How to use promises correctly with callback function - javascript

I've this service, it returns a list of students asynchronously using callback:
studentModule.factory('StudentService', function (DB_URL) {
return {
getAllStudents: function (callback) {
var Datastore = require('nedb'),
path = require('path');
db = {};
db.students = new Datastore({
filename: DB_URL + '/students.db',
autoload: true
});
db.students.find({}, function (err, stds) {
callback(stds);
});
}; //end return
My old way to use it in controller:
StudentService.getAllStudents(function(sts) {
$scope.students = sts;
$scope.$apply();//notify angular about the change
});
This works for me, but now i want to use some best practices. I need to resolve the result in the route before coming to the controller, here what i did:
.state('payment', {
url: '/payment',
templateUrl: 'frontend/components/payment/views/payment.html',
controller: 'PaymentController',
resolve: {
students: function (StudentService, $q) {
var defer = $q.defer();
defer.promise.then(function () {
StudentService.getAllStudents(function (sts) {
alert(JSON.stringify(sts));
return sts;
});
})
defer.resolve();
}
}
})
The alert is returning data from the route successfully but not from the controller - i get an undefined in the controller:
paymentModule.controller('PaymentController', function($scope,students) {
alert(JSON.stringify(students));
Any help will be appreciated!

You should always return a promise to resolve functions, and, when creating a promise of your own, you should resolve it with the data you need to pass along with it.
.state('payment', {
url: '/payment',
templateUrl: 'frontend/components/payment/views/payment.html',
controller: 'PaymentController',
resolve: {
students: function (StudentService, $q) {
var defer = $q.defer();
//defer.promise.then(function () {
StudentService.getAllStudents(function (sts) {
//alert(JSON.stringify(sts));
//return sts;
defer.resolve(sts);
});
//})
//defer.resolve();
return defer.promise
}
}
})

Related

resolving business treatment in service with ngResource

I have an AngularJs application working with components and several modules. I created a plunker example to present my problem here.
I have my NavbarComponent where I declared my Controller where I inject my service called NavbarService.
In the NavbarService, I inject a factory resource to make my Rest call, once this call is made I'm trying to made some treatment on the response before returning it back to the controller, in this example I just apply a simple filter on it, but it doesn't work. If I omit my treatment and return only the categories, the code works and you can visualize a list of two.
I can make my treatment in the controller but this is a bad practice 'cause I believe it should be done in the Service, secondly since it's an asynchronous response I must do something like this to make it work, which is really really ugly:
navbarService.getCategories().$promise.then(function (response) {
console.log("controller", response[0].category);
vm.categories = categoryFilter(response[0].category);
}, function (error) {
console.log("an error occured");
});
Can someone please guide me through this, I'm out of solutions. Thank you
Another simple way is to pass a callback function to service from you component like this
'use strict';
angular.module('navbar').component('appNavbar', {
templateUrl: "navbar.template.html",
controller: [ 'navbarService', function appNavbarController(navbarService) {
var vm = this;
navbarService.getCategories(function(data){
// this will be called when service will get the response and filter function has filtered the response
vm.categories = data;
});
}]
});
Now service should be like this
'use strict';
angular.module('navbar').service('navbarService', ['categoryResourceService', 'categoryFilter', function(categoryResourceService, categoryFilter) {
var vm = this;
vm.getCategories = function(callback) {
categoryResourceService.query(function(response) {
console.log("[NavbarService] response:", response);
callback(categoryFilter(response));
}, function(error) {
console.log("[NavbarService] error:", error);
});
//return vm.categories;
}
}]);
Filter will be like this
'use strict';
angular.module('navbar').filter('category', function() {
return function(categories) {
var categoryIds = ['World'];
var result = [];
angular.forEach(categoryIds, function (categoryId) {
angular.forEach(categories, function (category) {
if (category.name == categoryId) {
console.log("Match");
result.push(category);
}
});
});
return result;
};
});
Your filter should be like this and it should be called in transformResponse in $resource query instead of service, i hope this will help you
'use strict';
angular.module('navbar').filter('category', function() {
return function(categories) {
var categoryIds = ['World'];
var result = [];
angular.forEach(categoryIds, function (categoryId) {
angular.forEach(categories, function (category) {
if (category.name == categoryId) {
console.log("Match");
result.push(category);
}
});
});
return result;
};
});
Your categoryResource.service should be like this
angular.module('shared').factory('categoryResourceService',
['$resource','categoryFilter', function($resource, categoryFilter) {
var provider = "categories.json";
var params = {
id: '#id'
};
return $resource(provider, params, {
query: {
isArray: true,
method: 'GET',
params: {},
transformResponse: function(categories) {
var results = categoryFilter(angular.fromJson(categories));
console.log("[categoryResourceService] filtered response:", results);
return results;
}
}
});
}]);
navbar.service should be like this simply
'use strict';
angular.module('navbar')
.service('navbarService', [ 'categoryResourceService', function (categoryResourceService) {
var vm = this;
vm.getCategories = function(){
vm.categories = categoryResourceService.query(function(response){
console.log("[NavbarService] response:", response);
}, function(error){
console.log("[NavbarService] error:", error);
});
return vm.categories;
}
}]);
And components like this
'use strict';
angular.module('navbar').component('appNavbar', {
templateUrl: "navbar.template.html",
controller: [ 'navbarService', function appNavbarController(navbarService) {
var vm = this;
vm.categories = navbarService.getCategories();
}]
});

AngularJS Resolve Dependencies

I am working on an app to allow users to login with different level or access to an application. I added a resolve dependencies to get the list of users. It did return a list of correct users. How do I pass this object to the controller?
I follow a similar example on the website, but my getPrelogin object is always undefined. What did I do wrong?
.state('registration.login', {
url: '/Login',
resolve: {
preLoginFactory: 'preLoginFactory',
getPrelogin: function (preLoginFactory) {
var result = preLoginFactory();
result.then(function (result) {
return result.data.Model.IntroMessage;
})
}
},
views: {
"content#": {
templateUrl: '/Account/Login',
controller: function ($scope, $stateParams, $location, LoginFactory, getPrelogin, preLoginFactory) {
console.log('the value of get pre login')
console.log(getPrelogin);
$scope.introMessage = getPrelogin;
$scope.loginForm = {
emailAddress: '',
password: '',
rememberMe: false,
returnUrl: $stateParams.returnUrl,
loginFailure: false
};
$scope.login = function () {
var result = LoginFactory($scope.loginForm.emailAddress, $scope.loginForm.password, $scope.loginForm.rememberMe);
result.then(function (result) {
if (result.success) {
if ($location.loginForm.returnUrl !== 'undefined') {
$location.path('/routeOne');
} else {
$location.path($scope.loginForm.returnUrl);
}
} else {
$scope.loginForm.loginFailure = true;
}
});
};
}//"LoginController"
}
}
})
Your resolve object getPrelogin should return result variable, because promise preLoginFactory factory does return promise object. By injecting getPrelogin inside controller you would directly get data returned from getPrelogin which is result.data.Model.IntroMessage.
Code
resolve: {
preLoginFactory: 'preLoginFactory',
getPrelogin: function(preLoginFactory) {
var result = preLoginFactory();
return result.then(function(response) {
return response.data.Model.IntroMessage;
})
}
},
You must return your promise:
getPrelogin: function (preLoginFactory) {
var result = preLoginFactory();
return result.then(function (result) {
return result.data.Model.IntroMessage;
})
}

angular injecting resolve into controller logging undefined

I have the following resolve:
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'postsController as postsCtrl',
resolve: {
post: getSinglePostWrapper
}
})
and helper function
getSinglePostWrapper.$inject = ['postsService', '$stateParams'];
function getSinglePostWrapper(postsService, $stateParams) {
return postsService.getSinglePost($stateParams.id);
}
and my controller looks like this:
angular.module('flapperNews')
.controller('postsController', postsController);
postsController.$inject = ['postsService', 'post'];
function postsController(postsService, post) {
var vm = this;
vm.post = post;
console.log(post); //undefined here
}
I'm getting an undefined "post" when I try to inject the post from the resolve. I tried logging the post in the getSinglePostWrapper function, and it logs the correct object. I seem to be losing some binding or something from the resolve to the controller.
posts service
angular.module('flapperNews')
.factory('postsService', postsService);
postsService.$inject = ['httpService'];
function postsService(httpService) {
return {
getSinglePost: getSinglePost
}
function getSinglePost(postId) {
httpService.baseGet('/posts/' + postId)
.then(function(data) {
return data;
}, function(data) {});
}
}
httpservice
angular.module('httpService', [])
.factory('httpService', httpService);
httpService.$inject = ['$http', '$q'];
function httpService($http, $q) {
return {
baseGet: baseGet
}
function baseGet(url) {
return $http.get(url).then(
function (result) {
return result.data;
},
function (result) {
return $q.reject(result);
}
);
}
}
and I've injected httpservice into the first place I declare the flapperNews module.
FYI- everything is working. Other http requests are fine. This one is fine too. It just doesn't inject the post into the controller.
Promise chain breaks here.
function getSinglePost(postId) {
httpService.baseGet('/posts/' + postId)
.then(function(data) {
return data;
}, function(data) {});
}
You don't return the promise, hence post will be resolved to undefined before httpService.baseGet request has been finished.
try this:
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'postsController as postsCtrl',
resolve: {
post: function('postsService', '$stateParams') {
return postsService.getSinglePost($stateParams.id);
}
})
angular.module('flapperNews')
.controller('postsController', function($scope, post){
$scope.post = post;
console.log($scope.post); //undefined here
});

Angular Multiple Resolves in Router

i'm trying to resolve more than one service to my controller, and the 2nd service is dependant on the 1st resolving first as it requires some data to be included to make the request.
Below is what I would like to do, and how I think it ** should ** work, however, I can't seem to access the data returned in the 1st resolveData request.
Any suggestions or ideas would be greatly appreciated
.when('/maps/:id', {
templateUrl: 'partials/maps/view',
controller: 'MapViewCtrl',
authenticate: true,
resolve: {
resolveData: function ($route, MapService) {
var data = MapService.showfull({id: $route.current.params.id});
return data.$promise;
},
resolveMoreData: function($route, Service, resolveData){
var returnData = Service.get({id: resolveData.id});
return returnData.$promise;
}
}
})
The values resolved in a route definition cannot be dependend on each other. They are intended to be used by the controller for that route.
See this part of the $routeProvider source for a reference:
function updateRoute() {
// ...
var locals = angular.extend({}, next.resolve);
angular.forEach(locals, function(value, key) {
locals[key] = angular.isString(value) ?
$injector.get(value) : $injector.invoke(value, null, null, key);
});
// ...
// Here, we use $q.all(), which converts array of the promises
// into a single promise. That input array contains independent
// promises.
return $q.all(locals);
}
You could fix that in the couple of ways:
Move the resolveMoreData logic into the controller
Create a single dependency (either as a resolved dependency, or a service) which would combine those two promises into one.
The second option could look like:
resolve: {
data: function ($route, MapService, Service) {
var deferred = $q.defer();
MapService
.showfull({id: $route.current.params.id})
.then(function success(data) {
return Service.get({id: data.id});
}, function error(reason) {
deferred.reject(reason);
})
.then(function success(data) {
deferred.resolve(data);
}, function error(reason) {
deferred.reject(reason);
});
return deferred.promise;
}
}
(note the code above is an example only, I haven't ran it).
you should inject the dependency in a brackets [] or using the comment
/* #ngInject */
.when('/maps/:id', {
templateUrl: 'partials/maps/view',
controller: 'MapViewCtrl',
authenticate: true,
resolve: {
resolveData: function ($route, MapService) {
var data = MapService.showfull({id: $route.current.params.id});
return data.$promise;
},
resolveMoreData: ['$route', 'Service','resolveData', function($route, Service, resolveData){
var returnData = Service.get({id: resolveData.id});
return returnData.$promise;
}]
}
})

How to use factory/service which makes an Ajax request in ui-router resolve?

I am using the ui-router(http://angular-ui.github.io/ui-router/site/#/api/ui.router) solution for a form wizard and my state configuration looks like the following:
$stateProvider
.state('TabsView', {
url: '/mcm/:mcmcid',
controller: 'TabsController',
templateUrl: 'ngapps/mcm/views/TabsView.html'
})
.state('TabsView.Campaign Info', {
url: '/campaign-info',
templateUrl: 'ngapps/mcm/views/Campaign Info.html',
resolve: {
campaignFactory: 'CampaignFactory',
campaignData: function($stateParams,campaignFactory) {
return campaignFactory.getCampaignInfo($stateParams.mcmcid).$service;
}
},
controller: 'CampaignInfoController'
});
For the state "TabsView.Campaign Info" I try to resolve the campaignData by calling the CampaignFactory. The code for Campaign Factoy is as follows:
marketingCampaignModule.factory("CampaignFactory", ['AjaxFactory', '$q', function(AjaxFactory, $q) {
return {
getCampaignInfo: function(mcmcid) {
var result = {empty: true};
if (mcmcid > 0) {
var ajaxPromise = AjaxFactory.post("index.php/mcm/infosave/view", {mcmcid: mcmcid});
ajaxPromise.then(function(data) {
if (data['success']) {
if (data['params']) {
result = {'name': data['params']['name'], 'description': data['params']['description']};
}
}
return result;
});
}
}
};
}]);
campaignData in resolve does not get resolved. But I see that a call to the getCampaignInfo function of the CampaignFactory is being made in the console. I know I am doing something wrong with promise.Please tell me what am I doing wrong?
As per Chandermani's comment I modified the factory to return a promise as follows:
marketingCampaignModule.factory("CampaignFactory", ['AjaxFactory', '$q', function(AjaxFactory, $q) {
return {
getCampaignInfo: function(mcmcid) {
var deferred = $q.defer();
var result = {empty: true};
if (mcmcid > 0) {
var ajaxPromise = AjaxFactory.post("index.php/mcm/infosave/view", {mcmcid: mcmcid});
ajaxPromise.then(function(data) {
if (data['success']) {
if (data['params']) {
result = {'name': data['params']['name'], 'description': data['params']['description']};
}
}
deferred.resolve(result);
});
}else{
deferred.resolve(result);
}
return deferred.promise;
}
};
}]);
And modifed the resolve as follows:
resolve: {
campaignFactory: 'CampaignFactory',
campaignData: function($stateParams,campaignFactory) {
campaignFactory.getCampaignInfo($stateParams.mcmcid).then(function(data){
return data;
});
}
}
Still doesnt work. What am I doing wrong?
After the update you have done, you are just missing the return statement in resolve
campaignData: function($stateParams,campaignFactory) {
return campaignFactory.getCampaignInfo($stateParams.mcmcid);
}

Categories

Resources