I have 2 controllers (Products) and (ProductsFilters) and 1 service (ProductService).
The 2 controllers are being loaded at the same time as the 2nd one (ProductsFilter) acts as a side menu for the first controller (Products).
Products controller calls AJAX service through ProductService and assign the returned data to a variable(Facets) in ProductService.
At same time the the ProductsFilter retrieve the (Facets) from ProductService.
The problem now, that I want to process some data in ProductsFilter controller before it is getting displayed in the view, but at the time of execution, the ProductService.Facets return an empty object because the AJAX call has not been finished yet!
I tried to $watch() the ProductService.Facets but it didn't work.
Here is the product service
.factory('ProductService', function(AppService, CategoryService, $stateParams, $location, $http) {
return {
facets: {},
browse: function(category_id, page, order, order_type) {
url = AppService.apiUrl() + 'products/browse.json?' + params;
var that = this;
return this.getProducts(url).then(function(response) {
that.facets.grouped_brands = response.grouped_brands;
that.facets.grouped_categories = response.grouped_categories;
that.facets.grouped_prices = response.grouped_prices;
that.facets.grouped_stores = response.grouped_stores;
return response;
});
},
getProducts: function(url) {
return $http.jsonp(url + '&callback=JSON_CALLBACK&ref=mobile_app', {cache: true})
.then(function(response) {
if (typeof response.data === 'object') {
return response.data;
}
});
}
}
})
Here is the Products controller:
.controller('ProductsController', function($scope, ProductService) {
$scope.page = 1;
$scope.moreProducts = function() {
ProductService.browse(180, $scope.page)
.then(function(products) {
angular.extend($scope.products, products.products);
$scope.page +=1;
}
);
}
$scope.products = {}
})
And here is the ProductsFilter controller:
.controller('ProductsFiltersController', function($scope, ProductService) {
$scope.facets = ProductService.facets;
$scope.brand_facets = []
$scope.$watch('facets', function() {
angular.forEach($scope.facets.grouped_brands, function(value, key) {
$scope.brand_facets.push({brand: key, count: value})
});
});
})
You can use angulars $broadcast and $on functionality to tell the second controller when the ajax answer is recieved.
How to exactly implement the broadcast feature depends on the relation between your controllers. You can use this SO-answer as help: $scope.$emit and .$on angularJS
It sounds like you have an asynchronous bug in your service. You either need to have the callback of the AJAX request return the data to the controllers, or use the $q to create a promise, which is returned to the controllers.
https://docs.angularjs.org/api/ng/service/$q
$q allows you to create a deferred object. So instead of the service returning a null object, it will return a promise that your controller can act on once it has been fulfilled.
Related
I am trying to handle restangular calls entirely from a service to keep the controller light, and also so I can manipulate the data further within the service later.
Struggling with promises, which I think is my issue. If I can avoid it, I dont want the service to return the promise, and then use .then() in the controller.
If I make the restangular call directly from the controller it works fine.
angular.module('vehicle', ['restangular'])
.config(
function(RestangularProvider) {
RestangularProvider.setBaseUrl('https://jsonplaceholder.typicode.com/');
RestangularProvider.setResponseExtractor(function(response, operation, what) {
if (operation === 'getList' && !Array.isArray(response)) {
return [response];
}
return response;
});
})
.controller('VehicleController', function($scope, VehicleService, Restangular) {
$scope.vehicles = VehicleService.getVehicles();
Restangular.all('posts').getList().then(function(vehicle) {
$scope.moreVehicles = vehicle.plain();
});
})
.service('VehicleService', function(Restangular) {
VehicleService = {};
VehicleService.vehicles = [];
VehicleService.getVehicles = function() {
Restangular.all('posts').getList().then(function(vehicle) {
VehicleService.vehicles = vehicle.plain();
return VehicleService.vehicles;
});
}
return VehicleService;
});
https://plnkr.co/edit/q1cNw6gN12pKsiPaD1o0?p=preview
Any ideas why my combination of service and promise wont return the data to scope?
I have just about given up with this. But I have a $resource that uses a query() to retrieve a list of items. I then have an Interceptor that runs over those items in order to insert an $interval.
The $interval at a specific point will then get an item again using the $resource's get() function. But its this get() that is not working.
The call happens but I cannot get the response back into the template.
myServices.factory('Items', ['$resource',
function($resource) {
return $resource("/items", {}, {
'query': {
interceptor: MyInterceptor,
url: "/items",
isArray: true
},
})
}]);
myServices.factory('MyInterceptor', function($q, $interval, $injector, $rootScope) {
return {
'response': function(response) {
angular.forEach(response.resource, function (item) {
$interval(function () {
item.something = 1 + item.something;
if(item.something == 10)
{
item = $injector.get("Mine").get({slug: item.id});
}
});
});
return response;
}
};
});
I thought that this line item = $injector.get("Mine").get({slug: item.id}); would work, but it doesn't. The new item is not changed in the template.
So I changed it to something like this, which did not work either;
$injector.get("Mine").get({slug: item.id}, function(data){
item = data;
});
I have tried with $q and $promise too, but I had no luck with those either. Finding decent examples on those subjects was tough too.
In short ...... I am using an Interceptor inside a $resource, with an $interval which then needs to eventually change a single value within an array of values within the $scope - how can I get this to work?
In short ...... I am using an Interceptor inside a $resource, with an $interval which then needs to eventually change a single value within an array of values within the $scope - how can I get this to work?
Based on the above statement I will give an answer.
First things first, remove the interceptor. You won't need it. Instead use a service.
Write a service called ProcessedItems.
angular.module('app')
.service('ProcessedItems', ['Items', '$q', function(Items, $q){
return {
query: function() {
var defer = $q.defer();
Items.query()
.$promise
.then(function(response){
angular.forEach(response.resource, function(i)){
i.s = 1 + i.s;
if(i.s == 10) {
i = $injector.get("Mine").get({slug: i.id});
i.$promise.then(function(){
defer.resolve(response);
}, function(){
defer.reject();
});
};
};
});
return defer.promise;
}
};
}]);
After this service is set up, in your controller you can do
angular.module('app')
.controller('AppController', ['$scope', 'ProcessedItems',
function($scope, ProcessedItems){
$scope.items = [];
ProcessedItems.query().then(function(pitems){
$scope.items = pitems;
});
});
What this will essentially do is first process the data completely and then display it in the view.
I don't know if this is even one of the Angular concepts or possible to do but i have a service that call the user information (name, id, age, ...):
.factory('me', function($resource, API_URL, $q) {
return {
getUser: function() {
var deferred = $q.defer();
var url = API_URL + 'api/me';
$resource(url)
.get(function(user) {
deferred.resolve(user);
}, function(response) {
deferred.reject(response);
});
return deferred.promise;
}
};
})
I use this service in many controllers to get the user data and use it to send with other http calls. for example in my newItemCtrl
.controller('newItemCtrl', function($scope, $http, API_URL, me) {
i called the me service as i did in many other controllers
and am wondering is there a way to call this service only once and use it in all the controllers instead of x times in each controller
I do something similar all the time with services by setting the value to the service once it's returned the first time. Now once the data is set in the service it will return the stored user data instead of making a request to your server.
service('myService', function($q, $http) {
this.data;
var self = this;
this.getMyData = function() {
if (angular.isDefined(self.data)) {
// use $q to return a promise
return $q.when(self.data)
}
return $http.get('myurl').then(function(resp) {
self.data = resp;
})
}
}
In your controller you can call myService.getMyData()
//Assume Value1 and Service1 have been correctly injected
if (Value1.data === null) {
Your_Var = Service1.call;
} else {
Your_Var = Value1.data;
}
For simplicity sake I would put that in a ternary expression when implementing.
For DRY compliance.
Going with DRY we need a SharedFactoryFuncion to handle $http requests
Your_Var = Service1.call;
//Inside Service1.call
return Value1.data === undefined ? SharedFactoryFuncion.get("url") : Value1.data;
There are numerous ways to handle the return of data from .get() so I won't go there as it's not pertinent.
I'm using a service to make user data available to various controllers in my Angular app. I'm stuck trying to figure out how to use the $http service to update a variable local to the service (in my case "this.users"). I've tried with and without promises. The server is responding correctly.
I've read several excellent articles for how to use $http within a service to update the scope of a controller. The best being this one: http://sravi-kiran.blogspot.com/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html. That does not help me though because it negates the benefits of using a service. Mainly, modifying the scope in one controller does not modify throughout the rest of the app.
Here is what I have thus far.
app.service('UserService', ['$http', function($http) {
this.users = [];
this.load = function() {
var promise = $http.get('users.json')
.success(function(data){
// this.users is undefined here
console.log(this.users);
}
};
promise.then(function() {
// this.users is undefined here
console.log('this.users');
});
}]);
Any help is greatly appreciated. Thank you.
Try using
var users = [];
rather than
this.users = [];
and see what
console.log(users);
outputs in each of those cases.
Your service is oddly defined, but if you have a return in it you can access it from any controller:
app.service('UserService', ['$http', function($http) {
var users = [];
this.load = function() {
var promise = $http.get('users.json')
.success(function(data){
// this.users is undefined here
console.log(users);
users = data.data;
}
};
return {
getUsers: function(){
return users;
}
}
}]);
so in your controller, you can use:
var myUsers = UserService.getUsers();
UPDATE to use a service correctly here, your service should return a promise and the promise should be accessed in the controller: Here's an example from another answer I gave
// your service should return a promise
app.service('PickerService', [$http', function($http) {
return {
getFiles: function(){
return $http.get('files.json'); // this returns a promise, the promise is not executed here
}
}
}]);
then in your controller do this:
PickerService.getFiles().then(function(returnValues){ // the promise is executed here as the return values are here
$scope.myDirectiveData = returnValues.data;
});
this does not have scope anymore where you are trying to use it do this instead:
app.service('UserService', [$http', function($http) {
var users = [];
this.load = function() {
var promise = $http.get('users.json')
.success(function(data){
console.log(users);
}
};
promise.then(function() {
console.log(users);
});
}]);
all local variables to a service should just be vars if you assign them to this as a property than they will be included every time the service is injected into a controller which is bad practice.
I think what your asking for is a solution along the lines of defining your service like this:
angular.module('app')
.service('User', function($http, $q) {
var users = null;
var deferred = $q.defer()
return {
getUsers: function() {
if(users) {
deferred.resolve(users);
} else {
$http.get('users.json');
.success(function(result) {
deferred.resolve(result);
})
.error(function(error) {
deferred.reject(error);
});
}
return deferred.promise;
}
};
});
Then in one Each controller you would have to do this:
angular.module('app')
.controller('ACtrl', function($scope, User) {
User.getUsers().then(function(users) {
// Same object that's in BCtrl
$scope.users = users;
});
});
angular.module('app')
.controller('BCtrl', function($scope, User) {
User.getUsers().then(function(users) {
// Same object that's in ACtrl
$scope.users = users;
});
});
NOTE: Because the deferred.promise the same promise passed to all controllers, executing deferred.resolve(users) in the future will cause all then success callbacks in each of your controllers to be called essentially overwriting the old users list.
All operations on the list will be noticed in all controllers because the users array is a shared object at that point. This will only handle updates to the user list/each individual user on the client side of your application. If you want to persist changes to the server, you're going to have to add other $http methods to your service to handle CRUD operations on a user. This can generally be tricky and I highly advise that you check out ngResource, which takes care of basic RESTful operations
I have a service that fetches some client data from my server:
app.factory('clientDataService', function ($http) {
var clientDataObject = {};
var cdsService = {
fetch: function (cid) {
//$http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
clientDataObject = {'data': response.data, 'currentClientID': cid};
return clientDataObject;
});
// Return the promise to the controller
return promise;
}
};
return cdsService;
});
Then in one controller I do:
//get stats
clientDataService.fetch($scope.id).then(function (response) {
$scope.client_data = {
'statistics': response.data
}
});
Which all works very well. However, I'm trying to do a watch from another controller on that service to update it's scope when the data changes, rather then having to re-kick off the http request:
$scope.$watch('clientDataService.clientDataObject', function (cid) {
alert(cid);
});
I'm just alerting for now, but it never ever triggers. When the page initially loads, it alerts "undefined". I have no errors in the console and all the $injects are fine, but it never seems to recognize that data has changed in the service. Am I doing something wrong in the watch?
Many thanks
Ben
clientDataService.clientDataObject is not part of your controller's scope, so you can't watch for changes on that object.
You need to inject the $rootScope into your service then broadcast the changes to the controllers scopes.
app.factory('clientDataService', function ($rootScope, $http) {
var clientDataObject = {};
var cdsService = {
fetch: function (cid) {
var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
clientDataObject = {'data': response.data, 'currentClientID': cid};
$rootScope.$broadcast('UPDATE_CLIENT_DATA', clientDataObject);
return clientDataObject;
});
// Return the promise to the controller
return promise;
}
};
return cdsService;
});
Then in the controller you can listen for the change using:
$scope.$on('UPDATE_CLIENT_DATA', function ( event, clientDataObject ) { });
Another approach can be:
define new service
app.factory('DataSharingObject', function(){
return {};
}
include this new service in controller where we want to store the data
app.factory('clientDataService', function ($http, DataSharingObject) {
DataSharingObject.sharedata = ..assign it here
}
include this new service in controller where we want to access the data
app.factory('clientReceivingService', function ($http, DataSharingObject) {
..use it here... = DataSharingObject.sharedata
}