StrongLoop Loopback Yeoman Angular - angularjs

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

Related

How to call node server using ionic

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.

AngularJS app and API on the same domain

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

Force angular js app on heroku to use http instead of https?

I am querying an "http" API with my app, so every time I access my application on heroku (which is https enabled by default), CORS complains about cross-origin domain requests.
Asking the owner of the API to make it "https" is not an option, so I was wondering if it was possible to force my application to always use http? This is a node.js built application. (More specifically, it is a yeoman-generated angular js app). In Rails, I've seen several posts on Stack OverFlow saying this can be easily done with something like config.force_ssl = false, so I was wondering whether something similar could work for a node.js application (either something in the code or on Heroku specifically).
As a fix, I wrote an AngularJS Factory that routes all https requests to http:
.factory('DisableSSL', function($location, $window){
return {
activate: function() {
if ($location.protocol() !== 'http') {
$window.location.href = $location.absUrl().replace('https', 'http');
}
}
};
})
This factory is included in all of my other controllers and the activate function is called.
Note that this doesn't work if you're using a browser extension like HTTPSEverywhere.

environment specific config with angularjs

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'
});

Is it possible to build a hybrid app with Angular?

I build an AngularJS application that I expected to work as a hybrid application for mobile devices. As such the application would run locally from the file system.
When the $routeProvider gets the html file I get the following message.
This is a CORS violation obviously but the file is local and trying to access another local file. It's not like a web site is trying to access a clients local files. This is the client.
I can't spin up a web server to serve up the local files because this will be packaged up and deployed as a local application.
I know people build hybrid mobile applications all the time. What I can't figure out is how they do this with AngularJS and why AngularJS doesn't either offer a solution or prescribe how to get around CORS.
I'm open to all suggestions. Thanks all.
XMLHttpRequest cannot load file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM36 angular.js:8380
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html'.
Here is my route config
mashupApp.config(function ($routeProvider, $httpProvider) {
// I've tried all these with no effect.
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$routeProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$httpProvider.defaults.useXDomain = true;
//delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/about', {
templateUrl: 'apps/mashup/about/about.html',
controller: 'aboutController',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({
name: 'mashupApp',
files: ['apps/mashup/about/aboutController.js', 'apps/mashup/~appServices/dataService.js']
});
}]
, sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
.when('/', {
templateUrl: 'apps/mashup/welcome/welcome.html',
sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
;
});
I don't know the details, but I'm pretty sure HabitRPG's Android app uses Angular.
https://github.com/HabitRPG/habitrpg-mobile
Ok, I figured it out.
Running a web app from a file doesn't work because of CORS but when you are packaged up in Phonegap or Cordova inside the Intel XDK everything works.
I took my application and created a blank Intel XDK project and copied my web files to it without changing anything.
It all worked!
Thanks for those who offered ideas and suggestions. I really appreciate it.
I see how this can work now.
If you want to create a hybrid mobile app with AngularJS, you should definitely checkout the Ionic Framework.
From the Ionic website:
A match made in heaven. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.
You can't access the files directly due to browser security settings, but you can store data etc in localstorage and use that when the app is offline.
Someone has put together an example here http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js

Resources