I have a AngularJS application that I launch from a gulp command line
and run on port 3000.
In this app, as it's in a development state, I have some http requests like this one :
$http.get("http://localhost:8080/myapi/customers")
.then(function(response) {$scope.names = response.data.records;});
The gulp script minifies, uglifies and syncs changes with the browser.
The myapi is a NodeJS / Express simple app that runs with this command :
node myapi.js
What I want to achieve is giving the relative URL to the api instead of giving the full URL just like this :
$http.get("/myapi/customers")
.then(function(response) {$scope.names = response.data.records;});
How can I do that ? I could find resources about unifying APIs and AngularJS apps domains.
Regards
Related
How to setup the dev environment where the UI is to be re-done using AngularJS and typescript etc but we already have an existing set of services hosted in rest/osgi bundles.
All the development models with AngularJS and type script talks about node/npm etc but how do we hit existing services with that? do i need to enable cors etc for development?
how is UI development done in these kind of projects as i believe not all projects are done from the beginning and have liberty to use node at server.
Well, usually from an angular app you define some kind of angular service that talks to your api in a standard way.
It's true that most "Frontend" projects use a mocking server during development but it isn't hard to hard to use a real server for this, provided it's not you own production server, obviously.
About the cors issue, I use to let CORS fully open during development ,and have a minimally accesable configuration on production, depending on your project.
After some research we have finalized the DevEnv and it's working out very well.
used angular cli for development
used proxy server to make the calls made to 4200 port to redirect to express server running at port 3000
package.json:
"start": "ng serve --proxy-config proxy.conf.json",
finally wrote a small express server to login to existing server and then pipe all requests!
This was our code:
var app = express();
//enable cors
var cors = require('cors')
app.use(cors());
//relay all calls to osgi server!!
app.use('/a/b/c/rest', function (req, res) {
var apiServerHost = "https://" + HOST + ":" + PORT + "/a/b/c/rest";
try {
var url = apiServerHost + req.url;
req.pipe(request(
{
headers: headers,
url: url,
"rejectUnauthorized": false
})).pipe(res);
} catch (error)
{
console.log("Error " + error);
}
} // Added by review
No mock required
I'm using ionic with angular.js for the front-end. I also setup a separate folder for my server side component. This is my index.js file...
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
As you can see it is a simple Hellow World example on my localhost.
I am going to use ngrok to make my server file public. My question is, after I do that, how can I call the index.js server file from ionic?
Do I call it from my angular module? If so, how can I do that? Can someone tell me what code is needed to add in ionic so I can connect to the server file? I am trying to use node js as my backend but having difficulty.
ngrok will allow you to access your localserver from outside your network.
Here is a basic example of how you call your server. Depends where you need to call it but this is how I do it using ngResource
angular.module('starter.services', ['ngResource'])
.factory('Session', function ($resource) {
return $resource('http://XXX.XXX.XXX.XXX:5000/sessions/:sessionId');
});
If you run your app from a browser with ionic server you can use http://localhost:5000.
If you use your phone and if it is on the same network than your server you can use your private IP, something like http://192.168.XXX.XXX
And if you want to try it from another network ngrok is a good choice.
I have created a angularjs application without nodejs usage. I am using "chrome-add server extension" to run the app locally and using Bluemix cloud to deploy the files and run the app. I have created a java service in Bluemix and http.get to get the service to my front end. But I am facing an issue with CORS in the front end sometime. So I took a suggestion to create a nodejs file to get the service and integrate to angular controller instead of http get method.
My issue is that I don't want to create a server configuration in nodejs, just get the service in nodejs (app.get) and pass to angularjs controllers. The app is already invoked by the Chrome extension port.
The code i have written in nodejs server file is,
var express = require('express');
var app = express();
var express = require('express');
var app = express();
app.get('http://myblumemix-service.mybluemix.net/getDetails', function(req, res){
//code to bind the response to angular controller
//alert("");
//console.log("got already running port successfully");
});
app.listen("http://127.0.0.1:8887/");
But i am not able to get the response successfully to angular controller.
My question is, could we use nodejs without creating web server and only to pass the rest response to angular modules. As i am new to node and angular, is there any example to do this?
You cannot do your CORS handler URL that way. You will need to have a local path which proxies to the mybluemix URL, using something like https://github.com/request/request.
Example:
var request = require('request');
app.get('/getDetails', function(req, res){
request.get('http://myblumemix-service.mybluemix.net/getDetails').pipe(res);
});
Then the Angular code needs to use /getDetails URL instead of the full mybluemix one.
I am working on creating a website with Angularjs and WebAPI as backend support with Visual studio.
I have defined the url to webapi in app.config.js as an app constant:
var serviceBase = 'http://localhost/Webapiservice/';
app.constant('ngAppSettings', {
apiServiceBaseUri: serviceBase,
clientId: 'ngTestApp'
});
Now for QA environments (http://QAServer/Webapiservice/), the webapi resides at a different URL, the same goes for our production environment (http://ProdServer/Webapiservice/).
I can manually update the js file to the appropriate location. But is there a way to automate this process so webAPI is pointing to the correct URL?
Is it possible to do this with grunt? Again I have never used grunt before.
ngConstant does a great job, along with grunt: https://github.com/werk85/grunt-ng-constant. This way you can specify your environments as JSON files and on compile/run time, grunt generates a enviornment.js file with a module (I call mine always ENV), which can be injected in every part of your application.
I would do something like this:
angular
.module('app', [])
.value('$path', {
rest : "http://localhost/Webapiservice"
})
you will call something like this:
app.constant('ngAppSettings', {
apiServiceBaseUri: $path.rest,
clientId: 'ngTestApp'
});
I'm trying to integrate StrongLoop Loopback [backend] with the Yeoman workflow [frontend] but struggling to unite the two codebases. I know I could independently develop my "backend" using StrongLoop's Loopback and just expose it as a REST API. However, I would rather develop using the Loopback Angular SDK and connect to the models programmatically within the same app. I'm wondering how I need to organize my folder structure, update my Gruntfile.js to include Loopback app setting for both serve and build functions, and only run one server instance for development (instead of "grunt serve" for my yeoman app frontend stuff and "slc run" for loopback backend stuff).
I've read about "plans" for yeoman scaffolding as opposed to the CLI workflow for Loopback but they are 5 months+ on Github without any updates.
Any guidance to make it work now (as opposed to waiting for this feature to be developed) would be greatly appreciated.
For reference:
Here is the Loopback Angular SDK instructions with Grunt commands detailed
http://docs.strongloop.com/display/DOC/AngularJS+JavaScript+SDK
There is a native $resource to interact with RESTful server-side.
Tutorial
Also you can use custom build service to combine loopback API and Angular front end:
angular.module('catalog', [])
.constant('ENDPOINT_URI', 'http://0.0.0.0:3000/api/')
.controller('CatalogController', function (ProductsModel) {
var store = this;
function getItems() {
ProductsModel.all()
.then(function (result) {
store.products = result.data;
});
}
store.products = [];
getItems();
})
.service('ProductsModel', function ($http, ENDPOINT_URI) {
var service = this,
path = 'products/';
function getUrl() {
return ENDPOINT_URI + path;
}
service.all = function () {
return $http.get(getUrl());
};
});
Tutorial