We Keep Coding

manual bootstrap angular with http calls

I have a WebAPI service that returns dynamic configuration data. Before my angular app loads I would like to call that service and load the config data into angular. JSFiddle of my attempt at doing that. My question is, after seeing the string test in the console I am seeing nothing else written into the console. How do I get test 2 and wierd wierd to appear into the console
var app = angular.module('app', [])
app.provider("ConfigService", function () {
var self = this;
self.Settings = {};
self.config = function (data) {
console.log(data);
};
this.$get =
function($http) {
return self;
};
});
angular.element(document).ready(function($http) {
console.log('test')
angular.module('app').config([
'ConfigServiceProvider',
function(configService) {
console.log('test 2')
$http.get('http://www.google.com').then(function(result) {
console.log('wierd wierd')
configService.config(result);
angular.bootstrap(document, ['app']);
})
}
]);
});
EDIT
In response to the question, why I do not run this in app.run phase instead.
In the app.run phase the app is still initializing and sometimes it loads up prior to my configuration section being completed. I wanted 100% guarantee that my config section is loaded first before any of the app is.

You can use $http outside of your angular module with angular.injector. With $http you can request the config from your server and bootstrap your app when $http's promise resolves.
JS Fiddle
Create module
var app = angular.module("app", []);
app.provider("configService", function () {
var configService = {
config: {}
};
this.setConfig = function (config) { configService.config = config; };
this.$get = function() { return configService; };
});
Function that fetches config from server
function fetchConfig() {
var $http = angular.injector(["ng"]).get("$http");
return $http.get("http://www.google.com");
}
Function that bootstraps app
function bootstrap(config) {
app.config(["configServiceProvider", function (configServiceProvider) {
configServiceProvider.setConfig(config);
}]).run(["configService", function (configService) {
//Not necessary, just to confirm everything worked
console.log("YAY! You have a config:", configService.config);
}]);
angular.bootstrap(document, ["app"])
}
Put it all together!
fetchConfig().then(
/*sucess*/function (config) { angular.element(document).ready(function () { bootstrap(config); }); },
/*fail*/ function (err) { console.log("UH OH could not retrieve config!", err); });

EDIT: Please use #StevenWexler 's answer: https://stackoverflow.com/a/37599857/5670592. It is much more correct, uses a nifty angular feature ($inject), and will provide configuration before the beginning of the bootstrap cycle.
I have updated the application with your constraints regarding blocking execution until API call is complete.
Try this: https://jsfiddle.net/6svnemu8/3/
I moved the code to the module.run(...) block. This is where all providers are available and you can use $http and your ConfigService. I kept the bootstrap call in the document ready function, and I also added the $q service so you can block execution of the application until the API call is complete. You can verify this by looking at the order of the test outputs in the console:
angular.module('app').run([
'ConfigService', '$http', '$q',
function(configService, $http, $q) {
console.log('test 2');
var deferred = $q.defer();
$http.get('/6svnemu8/2/').then(function(result) {
deferred.resolve(result);
}, function(result){
deferred.reject(result);
});
console.log("test 3");
deferred.promise.then(function(result){
console.log('wierd wierd');
configService.config(result);
}, function(result){
console.log("call failed.");
});
}
]);

Option 1 -- if you have an MVC app
In your main razor view, use JSON.Net to serialize your Model (or a property on it) to JavaScript.
<script>
window.configuration = #(Html.Raw(JsonConvert.SerializeObject(Model)))
</script>
Then put it into an angular constant so you can inject it anywhere you need it, and it's guaranteed to be there. This is the most convenient way to do it.
angular.module('YourModule').constant('configuration', window.configuration);
Option 2 -- loading it asynchronously
This service will load the configuration and cache the promise.
angular.module('YourModule').factory('configuration', ['$http', function($http) {
var configurationLoaded;
var service = {
get: get
};
function get() {
if(configurationLoaded) return configurationLoaded;
configurationLoaded = $http.get( ... );
return configurationLoaded;
}
return service;
}]);
Then anywhere you need it, you'll have to pull out properties from it like this:
angular.module('YourModule').controller('SomeController', ['configuration', function(configuration) {
var vm = this;
configuration.get().then(function(config) {
vm.someSetting = config.someSetting;
});
}]);

Angular - Best practice for retrieving data from a Factory method

I'm looking for some information on the best way to retrieve data from a local JSON file and handle the response. After browsing through Stack Overflow, I have some mixed thoughts as I've seen multiple ways of doing the same thing (although no explanation on why one may or may not be preferred).
Essentially, I have an Angular app that is utilising a factory to retrieve data from a JSON file; I'm then waiting for the response to resolve in my controller before using it in my html file, similar to the below:
Option 1
Factory:
comparison.factory('Info', ['$http', function($http) {
var retrievalFile = 'retrievalFile.json';
return {
retrieveInfo: function() {
return $http.get(retrievalFile);
}
}
}]);
Controller:
comparison.controller('comparisonController', ['$scope', 'Info', function($scope, Info) {
Info.retrieveInfo().then(function(response) {
$scope.info = response.data;
});
}]);
My main point of contention is figuring out when it's best to wait for the response to resolve, or if it even matters. I'm toying with the idea of having the factory return the fulfilled promise, and wait for the controller to retrieve the data also. In my view, it's best to abstract all data retrieval out of the controller and into the factory, but I'm not sure if this extends to waiting for the actual data to be returned within the factory itself. With this in mind, I'm confused about whether to opt for option 1 or option 2 and would really appreciate some feedback from more experienced/qualified developers!
Option 2
Factory:
comparison.factory('Info', ['$http', function($http) {
var retrievalFile = 'retrievalFile.json';
return {
retrieveInfo: function() {
return $http.get(retrievalFile).then(function(response) {
return response.data;
});
}
}
}]);
Controller:
comparison.controller('comparisonController', ['$scope', 'Info', function($scope, Info) {
Info.retrieveInfo().then(function(response) {
$scope.info = response;
});
}]);
Thank you for any input/suggestions in advance!

It depends on what your controller is expecting and how you set up your application. Generally, I always go with the second option. Its because I usually have global error or success handlers in all api requests and I have a shared api service. Something like below.
var app = angular.module('app', []);
app.service('ApiService', ['$http', function($http) {
var get = function(url, params) {
$http.get(url, { params: params })
.then(handleSuccess, handleError);
};
// handle your global errors here
// implementation will vary based upon how you handle error
var handleError = function(response) {
return $q.reject(response);
};
// handle your success here
// you can return response.data or response based upon what you want
var handleSuccess = function(response) {
return response.data;
};
}]);
app.service('InfoService', ['ApiService', function(ApiService) {
var retrieveInfo = function() {
return ApiService.get(retrievalFile);
/**
// or return custom object that your controller is expecting
return ApiService.get.then(function(data) {
return new Person(data);
});
**//
};
// I prefer returning public functions this way
// as I can just scroll down to the bottom of service
// to see all public functions at one place rather than
// to scroll through the large file
return { retrieveInfo: retrieveInfo };
}]);
app.controller('InfoController', ['InfoService', function(InfoService) {
InfoService.retrieveInfo().then(function(info) {
$scope.info = info;
});
}])
Or if you are using router you can resolve the data into the controller. Both ngRouter and uiRouter support resolves:
$stateProvider.state({
name: 'info',
url: '/info',
controller: 'InfoController',
template: 'some template',
resolve: {
// this injects a variable called info in your controller
// with a resolved promise that you return here
info: ['InfoService', function(InfoService) {
return InfoService.retrieveInfo();
}]
}
});
// and your controller will be like
// much cleaner right
app.controller('InfoController', ['info', function(info) {
$scope.info = info;
}]);

It's really just preference. I like to think of it in terms of API. What is the API you want to expose? Do you want your controller to receive the entire response or do you want your controller to just have the data the response wraps? If you're only ever going to use response.data then option 2 works great as you never have to deal with anything but the data you're interested in.
A good example is the app we just wrote where I work. We have two apps: a back-end API and our front-end Angular application. We created an API wrapper service in the front-end application. In the service itself we place a .catch for any of the API endpoints that have documented error codes (we used Swagger to document and define our API). In that .catch we handle those error codes and return a proper error. When our controllers/directives consume the service they get back a much stricter set of data. If an error occurs then the UI is usually safe to just display the error message sent from the wrapper service and won't have to worry about looking at error codes.
Likewise for successful responses we do much of what you're doing in option 2. In many cases we refine the data down to what is minimally useful in the actual app. In this way we keep a lot of the data churning and formatting in the service and the rest of the app has a lot less to do. For instance, if we need to create an object based on that data we'll just do that in return the object to the promise chain so that controllers aren't doing that all over the place.

I would choose option two, as it your options are really mostly the same. But let see when we add a model structure like a Person suppose.
comparison.factory('Info', ['$http', function($http) {
var retrievalFile = 'retrievalFile.json';
return {
retrieveInfo: function() {
return $http.get(retrievalFile).then(function(response) {
//we will return a Person...
var data = response.data;
return new Person(data.name, data.age, data.gender);
});
}
}
}]);
This is really simple, but if you have to map more complex data into object models (you retrieve a list of people with their own items... etc), that's when things get more complicated, you will probably want to add a service to handle the mapping between data and models. Well you have another service DataMapper(example), if you choose your first option you will have to inject DataMapper into your controller and you will have to make your request through your factory, and map the response with the injected service. And then you probably say, Should I have all this code here? ... Well probably no.
That is an hypothetical case, something that count a lot is how you feel structuring your code, won't architecture it in a way you won't understand. And at the end take a look at this: https://en.wikipedia.org/wiki/SOLID_(object-oriented_design) and research more information about this principles but focused to javascript.

Good question. A couple of points:
Controllers should be view centric versus data centric therefore you
want remove data logic from the controller and rather have it focus
on business logic.
Models (M in MVC) are a data representation of your application and
will house the data logic. In Angular case this would be a service
or factory class as you rightfully pointed out. Why is that well for
example:
2.1 AccountsController (might have multiple data models injected)
2.1.1 UserModel
2.1.2 AuthModel
2.1.3 SubscriptionModel
2.1.4 SettingsModel
There are numerous ways to approach the data model approach, but I would say your service class should be the data REST model i.e. getting, storing, caching, validating, etc. I've included a basic example, but suggest you investigate JavaScript OOP as that will help point you in the right direction as to how to build data models, collections, etc.
Below is an example of service class to manage your data.Note I have not tested this code but it should give you a start.
EXAMPLE:
(function () {
'use strict';
ArticleController.$inject = ['$scope', 'Article'];
function ArticleController($scope, Article) {
var vm = this,
getArticles = function () {
return Article.getArticles()
.then(function (result) {
if (result) {
return vm.articles = result;
}
});
};
vm.getArticles = getArticles;
vm.articles = {};
// OR replace vm.articles with $scope if you prefer e.g.
$scope.articles = {};
$scope.userNgClickToInit = function () {
vm.getArticles();
};
// OR an init on document ready
// BUT to honest I would put all init logic in service class so all in calling is init in ctrl and model does the rest
function initArticles() {
vm.getArticles();
// OR chain
vm.getArticles()
.then(getCategories); // doesn't here, just an example
}
initArticles();
}
ArticleModel.$inject = ['$scope', '$http', '$q'];
function ArticleModel($scope, $http, $q) {
var model = this,
URLS = {
FETCH: 'data/articles.json'
},
articles;
function extract(result) {
return result.data;
}
function cacheArticles(result) {
articles = extract(result);
return articles;
}
function findArticle(id) {
return _.find(articles, function (article) {
return article.id === parseInt(id, 10);
})
}
model.getArticles = function () {
return (articles) ? $q.when(articles) : $http.get(URLS.FETCH).then(cacheArticles);
};
model.getArticleById = function (id) {
var deferred = $q.defer();
if (articles) {
deferred.resolve(findArticle(id))
} else {
model.getBookmarks().then(function () {
deferred.resolve(findArticle(id))
})
}
return deferred.promise;
};
model.createArticle = function (article) {
article.id = articles.length;
articles.push(article);
};
model.updateArticle = function (bookmark) {
var index = _.findIndex(articles, function (a) {
return a.id == article.id
});
articles[index] = article;
};
model.deleteArticle = function (article) {
_.remove(articles, function (a) {
return a.id == article.id;
});
};
}
angular.module('app.article.model', [])
.controller('ArticleController', ArticleController)
.service('Article', ArticleModel);
})()

Using angularJS smart table

I would like to use AngularJS smart table for my site. I have gone through the documentation(smart table). Having hard time to understand how does the app.factory works here. I want to know how to implement createRandomItem function for the data I have in the database(mongodb).
app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {
//this would be the service to call your server, a standard bridge between your model an $http
// the database (normally on your server)
var randomsItems = [];
function createRandomItem(id) {
var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
return {
id: id,
name: heroes[Math.floor(Math.random() * 7)],
age: Math.floor(Math.random() * 1000),
saved: Math.floor(Math.random() * 10000)
};
}
for (var i = 0; i < 1000; i++) {
randomsItems.push(createRandomItem(i));
}
//fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
//in our case, it actually performs the logic which would happened in the server
function getPage(start, number, params) {
var deferred = $q.defer();
var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;
if (params.sort.predicate) {
filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
}
var result = filtered.slice(start, start + number);
$timeout(function () {
//note, the server passes the information about the data set size
deferred.resolve({
data: result,
numberOfPages: Math.ceil(filtered.length / number)
});
}, 1500);
return deferred.promise;
}
return {
getPage: getPage
};
}]);

Ok... My Time to Shine.. :D.... Just kidding.. you answer is bellow..
Well this a fairly straight forward example, if you are familiar with angular factory.
when you use a factory service it executes the code inside the factory's definition and return whatever you would just like calling a function.
So what the above code is doing is when you use this factory service simply generates a list of random items(Avengers) into the array randomItems that step is fairly simple. if you look at the createRandomItem(id) and the for loop after it.
the trick however is in getPage() and what the Resource factory is returning. So lets go on a journey.
in the code where Resource factory is used when you call Resourse.getPage() it'll return a promise object on which you can call other JS functions. and inside getPage() as you can see it has set a timeout to call resolve with an object that has variables data and numberOfPages in it, on the deffered object which triggers doneCallback on the promise of that deffered object.
so when you service like
Resourse.getPage(1,2,3) // please see the use of these arguments inside the getPage function
.done(function(result){
result.data; //the fake server data from the factory
result.numberOfPages; //this is computed in factory as well
});
When 1500ms pass the function/callback passed to done gets trigerred.
Summary and Answer
Note: Please read above first it took me hell of a time to write that.
Now to address your problem. what you can do is modify this
app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout)
to
app.factory('Resource', ['$http', '$q', '$filter', '$timeout', function ($http, $q, $filter, $timeout)
an use $http to retrieve data from the server or mongodb and fill in an array with your data from server.
$http.get(server_url).success(function(response){
//....do something with the response from the server like filtering etc..
//finally..
deferred.resolve({
data: response
});
});
an finally when using service
Resourse.getPage(1,2,3) //what ever you want to pass its not necessory to pass the same as above
.done(function(response){
//do what ever you want to do with response from your factory.. PHEW...
});
P.S.0. its the longest answer I've provided to date.. PHEW :P
P.S.1. Please feel free to ask any question in the comments

Unit test AngularJs $resource query with params

I would like to know how to unit test AngularJs $resource query with params.
I have this:
services.js
angular.module('conciergeApp.services', ['ngResource'])
.factory('Reply', function($resource) {
return $resource('/api/reply/:id/');
});
controllers.js
conciergeControllers.controller('ReplyCtrl', ['$scope', 'Reply',
function($scope, Reply) {
$scope.hotel_replies = Reply.query({
hotel: $scope.hotel_id
});
}
]);
So, the API Endpoint that gets queried here is:
'/api/reply/?hotel=<hotel_id>'
// aka
'/api/reply/?hotel=1'
This works when manually tested, but how do you unit test this?
With Jasmine spyOn, or $httpBackend. Whichever would be fine?
Can this be used? I tried this pattern, but couldn't do it successfully:
spyOn(object, 'method').andCallFake(function({foo:bar}) {
return myMockObject
});

Example here using Jasmine 2.0 and htmlRunner. Explanation to follow:
So inside your ReplyCtrl unit test:
describe('ReplyCtrl Controller', function () {
var Reply;
var ReplyCtrl;
var $scope;
var ReplyQueryMock;
var HOTEL_ID = 1234;
beforeEach(module('conciergeApp'));
beforeEach(inject(function (_Reply_, $controller, $rootScope) {
// This object can be used throughout your controller unit test for the
// response of calling the Reply.query method
ReplyQueryMock = {};
Reply = _Reply_;
spyOn(Reply, 'query').and.returnValue(ReplyQueryMock);
$scope = $rootScope.$new();
$scope.hotel_id = HOTEL_ID;
ReplyCtrl = $controller('ReplyCtrl', {$scope: $scope});
}));
it('should populate hotel_replies', function () {
expect(Reply.query).toHaveBeenCalledWith({
hotel: HOTEL_ID
});
expect($scope.hotel_replies).toBe(ReplyQueryMock);
});
});
This will mock out your Reply service and return a mocked object for the query. You will verify that your $scope's hotel_replies is the result of calling Reply.query with the hotel_id that is present on $scope.
Edit: Presumably $resource has been unit tested for you (by Angular team!). You might just want to verify that you setup the resource with the correct URL rather than digging down into the internals of what $resource really does (like calling $http for example). Fiddle link above updated, and would look something like the following:
describe('Reply Resource', function () {
var Reply;
var $resource;
var ReplyResourceMock;
beforeEach(module('conciergeApp.services', function ($provide) {
// Mock out $resource here
$provide.factory('$resource', function () {
ReplyResourceMock = {};
var $resource = jasmine.createSpy('$resource');
$resource.and.returnValue(ReplyResourceMock);
return $resource;
});
}));
beforeEach(inject(function (_Reply_, _$resource_) {
Reply = _Reply_;
$resource = _$resource_;
}));
it('should initialize resource', function () {
expect($resource).toHaveBeenCalledWith('/api/reply/:id/');
expect(Reply).toBe(ReplyResourceMock);
});
});
From original answer, probably overkill since you use $resource to abstract $http (still shown in fiddle)
Then to verify $resource works correctly from your Reply factory/service, you will want to inject $httpBackend. You can verify that the proper REST endpoint is called with the correct data.

Am I correctly using promise?

I am new to angularJs and I am trying to implement login/logout in my application.
I have an AuthService which logs user in, and a SessionService which writes the auth token to local storage (I am using jwt)
Here the AuthService:
'use strict';
angular.module('App')
.factory('AuthService', ['ApiService', 'SessionService', '$q', '$timeout', 'jwtHelper', function (ApiService, SessionService, $q, $timeout, jwtHelper) {
// inherit
var service = Object.create(ApiService);
service.login = login;
service.logout = logout;
service.check = check;
service.user = user;
return service;
function login(credentials) {
return service.form('user.login', credentials)
.then(function success(response) {
SessionService.setToken(response.token);
return response;
});
}
function logout() {
// here we use a promise so it's easier to handle
// logout in the controller by chaining methods
var d = $q.defer();
$timeout(function () {
SessionService.setToken();
d.resolve();
}, 0);
return d.promise;
}
function check() {
var token = SessionService.getToken();
return !!token && !jwtHelper.isTokenExpired(token);
}
function user() {
return service.call('user', {cache: true});
}
}]);
The problem I am facing it's in the logout method. I have no server call to do, just clear the local storage and user is logged out, but I'd like to handle this with a promise so in the controller I can do the following:
function logout() {
AuthService.logout().then(function success() {
$state.go('login');
});
}
Is this a good way of achieving this ?

I think there is no need for a promise in your particular case, and I would design it in another way :
I would store an "authenticatedUser" inside the $rootScope, with some parameters that I might find usefull (user culture, roles, ...(or just a boolean if there is no other requirement)).
In a kind of "applicationController", I would have a $watch* looking for its value :
$rootScope.$watch('authenticatedUser', function(newVal, oldVal){
if (newVal == oldVal)
return;
if (newVal == null){ //User has been disconnected
//Remove everything from screen
//Display login form
}
});
So, inside your controller, I would just have :
function logout() {
AuthService.logout();
}
That way, if ever one day you decide to be able to logout from another controller (we never know what can happen ;-) ), you will just have to call your service, and everything will be done. There will be no need to duplicate code.
Also, there is something I don't understand in your code :
// inherit
var service = Object.create(ApiService);
In angular, every service is a singleton instanciated during angular bootstrap. Are you sure you want to override this default behaviour?
: pay attention to $watches, they cost lots of processing time during angular digest.