I am facing following problem:
In my AngularJS application, I have service, which includes data and a function, which refreshes them
angular.module('testService', ['ui.router'])
.factory('testService', function($http) {
var service = {};
var _baseUrl = 'http://127.0.0.1:8000/api/v1/test/';
service.orders = {created: 0, approved: 0};
/*
* get number of unprocessed orders
*/
service.updateNOrders = function(){
var tableName = 'orders?stats=true';
$http({
method: 'GET',
url: _baseUrl + tableName,
}).success(function(data){
service.orders = data;
console.log(data);
return;
}).error(function(err){
alert(JSON.stringify(err));
return;
})
}
});
I can inject this service to i.e. directive and call the function updateNOrders to update the data from the directive.
What I want, though, is for service to call this function every n seconds.
The service is shared in several directives and instead of every directive, taking care of updating the data, I would like the service to do it itself.
I have tried comething like:
angular.module('testService', ['ui.router'])
.factory('testService', function($http, $q, $rootScope, $interval) {
$interval(console.log('test'),1000);
/*
rest of the code
*/
});
but that does not work.
So - Is it possible to call the function updateNOrders inside testService every minute or so?
Creating service with side effect is the bad idea. Better off create service with method which sets your interval with callback. Then you can inject your service in run callback (run calls callback only once):
angular.module('testService', ['ui.router'])
.factory('testService', ['$interval', function($interval) {
var service = {};
service.doPeriodicAjaxRequest = doPeriodicAjaxRequest;
function doPeriodicAjaxRequest() {
$interval(yourCode, ...);
}
return service;
}]);
Then:
angular.module('', [])
.run(['testService', function (testService) {
testService.doPeriodicAjaxRequest();
}]);
Why dont you call the service function from controller in certain interval of time.
$interval(testService.functionName,1000);
Related
I tried to write factory method in Angular JS:
.factory('FriendsFactory', function(){
var friend = {};
friend.delete = function(id) {
notificationsModal.show('danger', messages_info[86]);
notificationsModal.confirm(function() {
this.deleteAjax(event, id, type);
})
}
friend.deleteAjax = function (event, id, type){
var target = angular.element(event.target);
var request = $http({
method: "POST",
url: "/subscribe/deletesubscriber",
data: $.param({ id : id, type : type }),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
request.success(function () {
target.closest('.notif-item').remove();
$scope.counter--;
});
request.error(function () {
// TODO
});
}
return friend;
})
This code has two methods: friend.delete() also friend.deleteAjax()
Calling functions from Factory:
.controller('FriendsController', ['$scope','$http', 'friendsFactory', function($scope, $http) {
$scope.deleteUser = function (idUser) {
friendsFactory.delete(idUser);
}
}])
I need decrement variable $scope.counter in friend.deleteAjax() ajax response, regardless controller from was called factory.
I can do duplicate in each controller:
$scope.counter = 10; and after call factory, but it is not good
Although the answer suggested by #JBNizet is absolutely correct but if you are bound to use the code in the way it is, then you can do two things. First is to simply pass the $scope from controller to service call (which is not a cleaner approach is not recommended):
$scope.deleteUser = function (idUser) {
friendsFactory.delete(idUser, $scope);
}
And you can use the scope inside the factory.
The second option to use current controller's scope to root scope and then use this in the factory.
In your controller
$scope.deleteUser = function (idUser) {
$rootScope.callingControllerScope = $scope;
friendsFactory.delete(idUser);
}
In your factory
friend.deleteAjax = function (event, id, type){
console.log($rootScope.callingControllerScope.counter);
// your code
}
And you also need to fix your dependency injection:
.controller('FriendsController', ['$scope','$http', 'FriendsFactory', function($scope, $http, friendsFactory) {
$scope.deleteUser = function (idUser) {
friendsFactory.delete(idUser, $scope);
}
}]);
You're doing many, many things wrong:
Using friendsFactoryinstead of FriendsFactory:
.controller('FriendsController', ['$scope','$http', 'friendsFactory'
here --------^
Forgetting to declare friendsFactory as an argument of the controller function:
.controller('FriendsController', ['$scope','$http', 'friendsFactory', function($scope, $http) {
here ----^
Accessing an undefined $scope variable in the service:
$scope.counter--;
^--- here
Doing DOM manipulation in a service...
The service responsibility is not to manipulate the DOM and the controller scope.
The DOM should be modified using directives in the html template.
The controller scope should be managed by the controller, not by the service. Return the promise request from the deleteAjax() function, and let the controller register a success callback, rather than doing it in the service. This callback will then be able to access the controller scope.
Note that most errors are basic JavaScript error that should be signalled by a good JavaScript editor, or at least by looking at errors in the console of your browser.
I have a basic data Service which will be used across Controllers. But I'm having an issue grabbing some data that's been added via $http.
Service:
angular.module('core').service('FormService', ['$http', function($http) {
var _this = this;
_this.dropdownData = {
contactTimes: ['Anytime','Morning','Afternoon','Evening'],
industries: {},
};
$http.get('/json').success(function(resp){
_this.dropdownData.industries = resp.industries;
});
}]);
Controller:
angular.module('core').controller('SignupController', ['$scope', '$http', '$state', 'FormService', function($scope, $http, $state, FormService) {
console.log(FormService.dropdownData); // Shows full object incl industries
console.log(FormService.dropdownData.industries); // empty object {}
}]);
How do I get FormService.dropdownData.industries in my controller?
Create a service like below
appService.factory('Service', function ($http) {
return {
getIndustries: function () {
return $http.get('/json').then(function (response) {
return response.data;
});
}
}
});
Call in controller
appCtrl.controller('personalMsgCtrl', ['$scope', 'Service', function ($scope, Service) {
$scope.Industries = Service.getIndustries();
}]);
Hope this will help
Add a method to your service and use $Http.get inside that like below
_this.getindustries = function (callback) {
return $http.get('/json').success(function(resp){
_this.dropdownData.industries = resp.industries;
callback(_this.dropdownData)
});
};
In your controller need to access it like below.
angular.module('core').controller('myController', ['$scope', 'FormService', function ($scope, FormService) {
FormService.getDropdownData(function (dropdownData) {
console.log(dropdownData); // Shows full object incl industries
console.log(dropdownData.industries); // object {}
});
} ]);
Given that your console log shows the correct object, that shows your service is functioning properly. Only one small mistake you have made here. You need to access the data attributes in your return promise.
angular.module('core').service('FormService', ['$http', function($http) {
var _this = this;
_this.dropdownData = {
contactTimes: ['Anytime','Morning','Afternoon','Evening'],
industries: {},
};
$http.get('/json').success(function(resp){
//note that this is resp.data.industries, NOT resp.industries
_this.dropdownData.industries = resp.data.industries;
});
}]);
Assuming that you're data is indeed existing and there are no problems with the server, there are quite a few possible solutions
Returning a promise
angular.module('core').service('FormService', ['$http', function($http) {
var _this = this;
_this.dropdownData = {
contactTimes: ['Anytime','Morning','Afternoon','Evening'],
industries: {},
};
_this.dropdownData.industries = $http.get('/json');
}]);
//Controller
FormService.industries
.then(function(res){
$scope.industries = res.industries
});
Resolving with routeProvider / ui-route
See: $http request before AngularJS app initialises?
You could also write a function to initialize the service when the application starts running. At the end of the day, it is about waiting for the data to be loaded by using a promise. If you never heard about promises before, inform yourself first.
The industries object will be populated at a later point in time when the $http call returns. In the meantime you can still bind to the reference in your view because you've preserved the reference using angular.copy. When the $http call returns, the view will automatically be updated.
It is also a good idea to allow users of your service to handle the event when the $http call returns. You can do this by saving the $promise object as a property of industries:
angular.module('core').service('FormService', ['$http', function($http) {
var _this = this;
_this.dropdownData = {
contactTimes: ['Anytime','Morning','Afternoon','Evening'],
industries: {},
};
_this.dropdownData.industries.$promise = $http.get('/json').then(function(resp){
// when the ansyc call returns, populate the object,
// but preserve the reference
angular.copy( resp.data.industries, _this.dropdownData.industries);
return _this.dropdownData.industries;
});
}]);
Controller
app.controller('ctrl', function($scope, FormService){
// you can bind this to the view, even though the $http call has not returned yet
// the view will update automatically since the reference was preserved
$scope.dropdownData = FormService.dropdownData;
// alternatively, you can hook into the $http call back through the $promise
FormService.dropdownData.industries.$promise.success(function(industries) {
console.log(industries);
});
});
I'm all new to AngularJS and need some help, I have a "AppCtrl" and from there I have a HTTP webservice call - and need the webservice call response accessible in my other controllers.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $http) {
$scope.webservice_url = "http://webserviceurl.com/";
$http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) {
$scope.stations = data.stations;
});
})
This works FINE - and i can access the $scope.stations in my templates - BUT now i want to access the $scope.stations in my "PlaylistCtrl" controller, but this is undefined :(
.controller('PlaylistCtrl', function($scope, $stateParams) {
console.log($scope.stations); // is undefined :(
})
How can I make sure the http call is "done" (success) before the "PlaylistCtrl" is loaded ...
you should turn the http into service/factory if possible
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, dataService) {
dataService.then(function (data) {
$scope.data = data
})
});
app.controller('SecondCtrl', function($scope, dataService) {
dataService.then(function (data) {
$scope.secData = data
})
});
app.service('dataService', function ($http, $q){
var defferer = $q.defer()
$http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').success(function (data){
defferer.resolve(data)
})
return defferer.promise
})
http://plnkr.co/edit/8k97DngZ8KoFOBPFJG82?p=preview working example
$scope.stations ist not undefined in PlayListCtrl because the HTTP call has not finished, but because PlayListCtrl has a different $scope than AppCtrl.
You should put the webservice call into a service and inject that service into all controllers that require it.
In Angular, you don't wait for data before rendering. You let it render, even if the array is empty initially, and then once the data returns, you render again. Angular does this to maintain a high level of responsiveness. It is by design, and not something you should try to change.
All you need to do to fix your undefined variable is initialize the stations scope variable in your controller. Although it gets overwritten when the data returns from your service, it doesn't matter because angular will watch for changes to the scope variable by reference and update all views when it does.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $http) {
$scope.webservice_url = "http://webserviceurl.com/";
$scope.stations = [];
$http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) {
$scope.stations = data.stations;
});
})
In your inner controller, if the data hasn't returned yet, $scope.stations will be an empty array:
.controller('PlaylistCtrl', function($scope, $stateParams) {
console.log($scope.stations); // is []
$scope.$watch('stations', function(newVal) {
alert('data returned!! updating views!');
});
})
Once the data returns, the array reference on the scope is overwritten, any $watch handlers are called to update the view.
// Make a remote request.
$http.get('some wonderful URL for a service').success(function (results) {
superImportantInfo = results;
semaphore = true;
});
while (!semaphore) {
// We're just waiting.
}
This is how you can let your controller to wait till it finishes execution of controller 1 and before moving to the next controller.
Hope this help!
I am new to AngularJS and have a service that loads my initial user configuration
angular.module('myApp').service('myService', ['$http', function ($http) {
var self = this;
self.user = {};
self.loadConfiguration = function () {
$http.get('/UserConfig').then(function (result) {
self.user = result.data;
});
};
self.loadConfiguration();
}]);
I have a controller that uses the configuration from this service
angular.module('myApp').controller('myController', ['$scope', 'myService', function ($scope, myService) {
var self = this;
// calculation based on service value
self.something = myService.user.something * something else;
}]);
The problem here is that myService.user.something may be undefined since the AJAX request may not have completed when this code is called. Is there a way to have the service complete before any other code is run? I want the service function 'loadConfiguration' to be run only once irrespective of the number of controllers that depend on it.
You can call your service method inside .run() function
Run Blocks
Run blocks are the closest thing in Angular to the main
method. A run block is the code which needs to run to kickstart the
application. It is executed after all of the service have been
configured and the injector has been created. Run blocks typically
contain code which is hard to unit-test, and for this reason should be
declared in isolated modules, so that they can be ignored in the
unit-tests.
https://docs.angularjs.org/guide/module
angular.module('myApp').run(function()){
//use your service here
}
One way to deal with ajax delay, is use $rootScope.$broadcast() function on $http.success which will broadcast your custom event to all controllers. Antoher way is to use promises and perform actions in controllers after resolve. Here are some ideas: https://groups.google.com/forum/#!topic/angular/qagzXXhS_VI/discussion
If you want to make sure that your code in controller gets executed after your AJAX call returns, you may use events.
Use this in your service:
angular.module('myApp').service('myService', ['$http', '$rootScope', function ($http, $rootScope) {
var self = this;
self.user = {};
self.loadConfiguration = function () {
$http.get('/UserConfig').then(function (result) {
self.user = result.data;
$rootScope.$broadcast('myService:getUserConfigSuccess');
});
};
self.loadConfiguration();
}]);
In your controller:
angular.module('myApp').controller('myController', ['$scope', 'myService', function ($scope, myService) {
var self = this;
$scope.$on('myService:getUserConfigSuccess', function() {
// calculation based on service value
self.something = myService.user.something * something else;
})
}]);
You can even attach an object to the event.
Please refer to https://docs.angularjs.org/api/ng/type/$rootScope.Scope .
I make an $http call inside a service that is supposed to get data from my server. For some reason I can't get my service to work - nothing happens. I know the server code works because if I place the $http call inside a function within my controller, then it gets the server data as expected. Here is the code I have so far:
app.service('myService', function($q,$compile,$http) {
this.getData = function() {
var deferred = $q.defer();
var promise = $http.get('myfile.php').success(function (data) {
var response = $compile(data)($scope);
deferred.resolve(response);
});
return deferred.promise;
};
});
Also, I know the code that uses this service works because if I do something like the following,
app.service('myService', function() {
this.getData = function() {
return 'TEST';
};
});
then I will see the word "TEST" show up in the div that utilizes this service. I feel like I'm very close, but there is something I am missing. Any ideas on what I'm doing wrong?
UPDATE:
controller: function($scope, $http, $rootScope, myService){
var scope = $rootScope;
scope.viewMyData = function() {
var element = myService.getData();
$('#myDiv').html(element);
}
}
HTML:
<div ng-click="viewMyData()">Click Here</div>
<div id="myDiv"></div>
If I strip the code in myService and simply return TEST (as above), then I will see "TEST" show up in id="myDiv". But for some reason the $http call isn't being triggered.
#tymeJV is right, but here's my attempt to spell out the example better. $http returns a promise interface that allows you to chain callbacks to be executed when the $http response returns. So, in this case, calling myService.getData() can't return the result immediately (it's off getting the data from the server), so you need to give it a function to execute when the server finally responds. So, with promises, you simply attach your callback using the thePromise.then(myCallbackFunc).
Service
app.service('myService', function($q,$compile,$http) {
this.getData = function() {
var promise = $http.get('myfile.php');
promise = promise.then(function (response) {
return response.data;
});
return promise;
};
});
Controller
controller: function($scope, $rootScope, myService){
var scope = $rootScope;
scope.viewMyData = function() {
myService.getData().then(function(data) {
$('#myDiv').html(element);
});
}
}
Use .then in the controller to continue the promise pattern:
myService.getData().then(function(data) {
$('#myDiv').html(data);
});