In my code I am calling this function loadAllOrders();. This is the skeleton of its implementation,
$scope.loadAllOrders = function() {
orderSvc.GetAllOrders().then(function(response) {
// Does a bunch of stuff here
});
}
GetAllOrders() uses a $http to get data from a database. loadAllOrders() then formats all the data and inserts them into an ng-repeat.
I want to be able to call a function when loadAllOrders() has finished. For example,
$scope.loadAllOrders().then(
//I am doing something
);
How can this be achieved?
You can write custom promise for loadAllOrders in angular JS
You have to inject $q service as a dependency on your controllers or service
$scope.loadAllOrders = function() {
var deferred = $q.defer();
orderSvc.GetAllOrders().then(function(response) {
// Does a bunch of stuff here
deferred.resolve(response);
});
return deferred.promise;
}
https://docs.angularjs.org/api/ng/service/$q
Hope this helps
Related
I have some logic inside my promise. Is it possible to cover this logic with unit tests? For example, I fire google analytics event inside this promise in my controller and want to make something like expect($analytics.eventTrack).toHaveBeenCalledWith(...).
Finally, the way to cover the code which is inside the promise can be the following:
let's suppose that on saving some data we fire a GA event inside our promise which says that the data was saved.
We have a service VoteService which has a method saveVote. This method makes a request to the server and returns a promise. Inside our promise, we fire GA event (when save was successfully executed).
To write the test for this we need in beforeEach:
create a promise saveVoteDeferrer = $q.defer();
resolve the promise with needed data
spyOn service's method
spyOn(VoteServiceMock,'saveVote')
.and.returnValue(saveVoteDeferrer.promise);
And then in it:
Call controller's method which contains service's method:
$ctrl.addVote();
verify if the GA event was fired inside our promise body
expect($analytics.eventTrack)
.toHaveBeenCalledWith('NewVoteAdded', {});
Bellow the sample:
voteController.js
var vm = this;
vm.addVote = function(){
//some logic goes here
VoteService.saveVote(vote)
.then(function(result){
//some logic goes here
$analytics.eventTrack('NewVoteAdded', {});
});
}
VoteService.js
return function(){
this.saveVote = function($http){
// some logic goes here
return $http.post(/*needed parameters*/);
}
}
vote.spec.js
describe('some text', function(){
beforeEach(function () {
// inject what you need
// mock VoteService service
// inject voteController controller
var saveVoteDeferrer = $q.defer();
spyOn($analytics,'eventTrack');
saveVoteDeferrer.resolve({ data: { } });
spyOn(VoteServiceMock,'saveVote')
.and.returnValue(saveVoteDeferrer.promise);
it('fire GA event when the vote is saved', function(){
$ctrl.addVote();
expect($analytics.eventTrack)
.toHaveBeenCalledWith('NewVoteAdded', {}); });
});
});
I have placed the service and the controller in the same js file. So Im trying to fetch the data from the service and use it in my html. In my code Im able to generate the data from the service but not able to assign it to a $scope in the controller and use it in the html. So how do I get the data and assign it to the $scope so that I can use it in my html.
var app = angular.module("app",[]);
app.factory('factoryServices',function($http){
var newObject = {};
var _getChart= function(){
$http.get("http://citibikenyc.com/stations/json")
.success(function(data, status){
if(data) {
return data;
}
}).error(function(data,status){
return error;
});
}
newObject.getChart = _getChart;
return newObject;
});
app.controller("chartController",function($scope,$http,factoryServices){
factoryServices.getChart($scope.chartServicesCompleted);
$scope.chartServicesCompleted = function(data){
$scope.serviceResponse = data;
}
})
If you rewrite your code like this, it should work as expected:
var app = angular.module("app",[]);
app.factory('factoryServices',function($http){
var newObject = {};
var _getChart= function(){
return $http.get("http://citibikenyc.com/stations/json")
.then(function(response){
if(response.data) {
return response.data;
}
}, function(response){
console.error("getChart failed with ",response);
});
}
newObject.getChart = _getChart;
return newObject;
});
and your controller
app.controller("chartController",function($scope,$http,factoryServices){
factoryServices.getChart().then(chartServicesCompleted);
function chartServicesCompleted(data){
$scope.serviceResponse = data;
}
})
The reason your initial code doesn't work, is because your getChart doesn't actually take an argument. So passing your callback like this: getChart($scope.chartServicesCompleted) doesn't do anything. In the rewritten code, I've made it so the getChart function returns the promise created by $http.get(..) which then allows you to use .then([callback]) in your controller.
you are passing a callback function but not handling inside the service method.
do change as
var _getChart= function(callback){
$http.get("http://citibikenyc.com/stations/json")
.success(function(data, status){
callback(data);
}).error(function(data,status){
callback(data);
});
}
now factoryServices.getChart($scope.chartServicesCompleted); will work
you can make more generic by handling success and error callback separately.
or one more way is to implement the success and error logic inside your controller.
but do not forget to check the function type i.e
if(typeof callback == 'function'){
callback(data);
}
Edit: as per advanced you call implement promises.
if you are using angular version 1.6, the success and error methods have been depreciated.
secondly you can do inside service return the http object
var _getChart= function(){
return $http.get("http://citibikenyc.com/stations/json");
}
and then handle the promise in the controller like
factoryServices.getChart().then(successMethod, error method);
Let the service return the promise to the controller. ex:
var _getChart= function(){
return $http.get("http://citibikenyc.com/stations/json");
}
and in the controller handle the promise. Use 'then' instead
factoryServices.getChart().then(function(response){var theDate = response.data},function(error){});
you can declare methods instead in the controller for handling the success and error
factoryServices.getChart).then(onSuccess,onError);
Don use the .success method and .error method. They dont't behave as other promises. So get used to 'then'
You really don't need to handle errors in the service method.I use angular interceptors in most of the cases. Check em out. But sometimes you need to handle the error in the controller. So its good to get the callback in the controller
I have still problems with my database, but I found out, that the problems come from the fact, that opening the database takes some time, but the app is not waiting till this task has finished.
Is there a way to make angular wait till the database is opened correctly before it starts the next task?
Thanks,
Christian.
Update: 2016-08-08 - 03:13 pm
Thanks for all the answers. As I can see, my first idea with promises ($q) was right, but:
My app has an app.js, which is my main file. It only calls the InitDB. This should open the database. Then it should call the CreateTables, this creates the table, if it doensn't exist.
The rest of my app is splitted in 4 pages (templates). Every page has it's own controller.
So the idea was to init the db, to create the table, and then work with the database, but used over different controllers.
This won't work, because I would always need to put all of my stuff in the .then() of my initDB in the app.js???
This is my first AngularJS app, maybe this is the reason why I do a lot of mistakes...
Thanks,
Christian.
One of the core concepts of Angular is working with services/factories. There is ample documentation and blogs about how these work and how to use them, but the basic idea is that these are singleton "controllers" that handle shared data and methods across your entire application. Used in combination with promises, you can easily create a service that will manage communications with your database.
angular
.module('myApp')
.service('DBService', DBService)
.controller('Ctrl1', Ctrl1)
.controller('Ctrl2', Ctrl2)
.controller('Ctrl3', Ctrl3)
.controller('Ctrl4', Ctrl4);
DBService.$inject = ['$q'];
function DBService($q) {
var DBService = this;
var DBServiceDeferred = $q.defer();
DBService.ready = DBServiceDeferred.promise;
// a service is only initialized once, so this will only ever be run once
(function() {
init();
})();
function init() {
// you can use promise chaining to control order of events
// the chain will halt if any function is rejected
initDB()
.then(createTablesUnlessExist)
.then(setDbReady);
}
function initDB() {
var deferred = $q.defer();
// simulate async db initialization
$timeout(function() {
deferred.resolve();
// or reject if there is an error
// deferred.reject();
}, 5000);
return deferred.promise;
};
function createTablesUnlessExist() {
//create tables if needed (only happens once)
var deferred = $q.defer();
// simulate async table creation
$timeout(function() {
deferred.resolve();
// or reject if there is an error
// deferred.reject();
}, 5000);
return deferred.promise;
}
function setDbReady() {
DBServiceDeferred.resolve();
}
}
Now you have your DB setup and you don't have to worry about it anymore. You can access the DB from any controller using the service. None of the queries will run until the DB has been initialized and the tables have been created.
Ctrl1.$inject = ['DBService', '$q'];
function Ctrl1(DBService, $q) {
$q.when(DBService.ready).then(function() {
DBService.conn.query("Select something");
});
}
Ctrl2.$inject = ['DBService', '$q'];
function Ctrl2(DBService, $q) {
$q.when(DBService.ready).then(function() {
DBService.conn.query("Select something");
});
}
Ctrl3.$inject = ['DBService', '$q'];
function Ctrl3(DBService, $q) {
$q.when(DBService.ready).then(function() {
DBService.conn.query("Select something");
});
}
Ctrl4.$inject = ['DBService', '$q'];
function Ctrl4(DBService, $q) {
$q.when(DBService.ready).then(function() {
DBService.conn.query("Select something");
});
}
Angular provides a service $q. A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing. Please refer the documentation https://docs.angularjs.org/api/ng/service/$q for the same.
$q basically revolves around the concepts of promises. Promises in AngularJS are provided by the built-in $q service.
Write a method that check if connection is established or not...which returns true or false.
app.controller('MainCtrl', function($scope, httpq) {
http.get('server call method')
.then(function(data) {
if(data.conn==true)
// do what u want
//write other calls
})
.catch(function(data, status) {
console.error('error', response.status, response.data);
})
});
you can use $q library
example:
app.service("githubService", function ($http, $q) {
var deferred = $q.defer();
this.getAccount = function () {
return $http.get('https://api.github.com/users/haroldrv')
.then(function (response) {
// promise is fulfilled
deferred.resolve(response.data);
// promise is returned
return deferred.promise;
}, function (response) {
// the following line rejects the promise
deferred.reject(response);
// promise is returned
return deferred.promise;
})
;
};
});
using above service:
app.controller("promiseController", function ($scope, $q, githubService) {
githubService.getAccount()
.then(
function (result) {
// promise was fullfilled (regardless of outcome)
// checks for information will be peformed here
$scope.account = result;
},
function (error) {
// handle errors here
console.log(error.statusText);
}
);
});
I am using some data which is from a RESTful service in multiple pages.
So I am using angular factories for that. So, I required to get the data once from the server, and everytime I am getting the data with that defined service. Just like a global variables. Here is the sample:
var myApp = angular.module('myservices', []);
myApp.factory('myService', function($http) {
$http({method:"GET", url:"/my/url"}).success(function(result){
return result;
});
});
In my controller I am using this service as:
function myFunction($scope, myService) {
$scope.data = myService;
console.log("data.name"+$scope.data.name);
}
Its working fine for me as per my requirements.
But the problem here is, when I reloaded in my webpage the service will gets called again and requests for server. If in between some other function executes which is dependent on the "defined service", It's giving the error like "something" is undefined. So I want to wait in my script till the service is loaded. How can I do that? Is there anyway do that in angularjs?
You should use promises for async operations where you don't know when it will be completed. A promise "represents an operation that hasn't completed yet, but is expected in the future." (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
An example implementation would be like:
myApp.factory('myService', function($http) {
var getData = function() {
// Angular $http() and then() both return promises themselves
return $http({method:"GET", url:"/my/url"}).then(function(result){
// What we return here is the data that will be accessible
// to us after the promise resolves
return result.data;
});
};
return { getData: getData };
});
function myFunction($scope, myService) {
var myDataPromise = myService.getData();
myDataPromise.then(function(result) {
// this is only run after getData() resolves
$scope.data = result;
console.log("data.name"+$scope.data.name);
});
}
Edit: Regarding Sujoys comment that
What do I need to do so that myFuction() call won't return till .then() function finishes execution.
function myFunction($scope, myService) {
var myDataPromise = myService.getData();
myDataPromise.then(function(result) {
$scope.data = result;
console.log("data.name"+$scope.data.name);
});
console.log("This will get printed before data.name inside then. And I don't want that.");
}
Well, let's suppose the call to getData() took 10 seconds to complete. If the function didn't return anything in that time, it would effectively become normal synchronous code and would hang the browser until it completed.
With the promise returning instantly though, the browser is free to continue on with other code in the meantime. Once the promise resolves/fails, the then() call is triggered. So it makes much more sense this way, even if it might make the flow of your code a bit more complex (complexity is a common problem of async/parallel programming in general after all!)
for people new to this you can also use a callback for example:
In your service:
.factory('DataHandler',function ($http){
var GetRandomArtists = function(data, callback){
$http.post(URL, data).success(function (response) {
callback(response);
});
}
})
In your controller:
DataHandler.GetRandomArtists(3, function(response){
$scope.data.random_artists = response;
});
I was having the same problem and none if these worked for me. Here is what did work though...
app.factory('myService', function($http) {
var data = function (value) {
return $http.get(value);
}
return { data: data }
});
and then the function that uses it is...
vm.search = function(value) {
var recieved_data = myService.data(value);
recieved_data.then(
function(fulfillment){
vm.tags = fulfillment.data;
}, function(){
console.log("Server did not send tag data.");
});
};
The service isn't that necessary but I think its a good practise for extensibility. Most of what you will need for one will for any other, especially when using APIs. Anyway I hope this was helpful.
FYI, this is using Angularfire so it may vary a bit for a different service or other use but should solve the same isse $http has. I had this same issue only solution that fit for me the best was to combine all services/factories into a single promise on the scope. On each route/view that needed these services/etc to be loaded I put any functions that require loaded data inside the controller function i.e. myfunct() and the main app.js on run after auth i put
myservice.$loaded().then(function() {$rootScope.myservice = myservice;});
and in the view I just did
ng-if="myservice" ng-init="somevar=myfunct()"
in the first/parent view element/wrapper so the controller can run everything inside
myfunct()
without worrying about async promises/order/queue issues. I hope that helps someone with the same issues I had.
I'm trying to setup a data service in my Angular application that is using breezeJS. After I resolve my promise I can't get the .then to file in my controller. I am getting data back from my database via breeze in my data service. I could just pass back the breeze promise but I want to be able to use $q.all to know when all my data has been found.
In my controller`
ProApp.controller('caseInfoController',
function caseInfoController($scope, $log, $timeout, caseDataService) {
/***initialize data ***/
// initializeApp();
ATPinitializeApp();
function ATPinitializeApp() {
$scope.MyStateList= caseDataService.getAllStates()
.then(function assignStates(data) {
$log.info("THIS THEN WILL NOT FIRE");
});
}
`
The above then will not fire when the promise from the data service is fulfilled.
ProApp.factory('caseDataService', function ($log, $q)
{
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var servicename = "http://localhost:60882/breeze/SPLBreeze";
var manager = new breeze.EntityManager(servicename);
var caseDataService =
{
getAllStates: getAllStates,
};
return caseDataService;
/*** implementation details ***/
function getAllStates()
{
var myStatePromise = $q.defer();
var query = breeze.EntityQuery
.from("state");
manager.executeQuery(query)
.then(function (data) {
$timeout(function () { myStatePromise.resolve(data); }, 200);;
});
return myStatePromise.promise;
};
Any help would be greatly appreciated. I'm not 100% sure if I have the $q promises set up correctly. Eventually I would like to use a $q.all to determine when an array of various promises have been resolved to so I can update a message to the user. I've been reading that I need to use a timeout to get angular to realize that a change has happened in the next event loop.
You're staring down the barrel of an Angular $q bug. You can read about it here if you wish.
That won't help nearly as much as following the advice in my answer to this related StackOverflow question in which I show and describe an adapter to get from Q.js promise to a $q promise.
I have never used breeze but I think your problem is that you are not returning anything on the success callback..
/***initialize data ***/
. . .
function ATPinitializeApp() {
$scope.MyStateList= caseDataService.getAllStates()
.then(function assignStates(data) {
$log.info("THIS THEN WILL NOT FIRE");
return data; // If you don´t return anything nothing will be added to the scope.
});
}
Also the $timeout on the getAllStates function should not be necesary since angular resolves the promises asynchronously (it queues the resolution using $rootScope.$evalAsync)
function getAllStates()
{
. . .
manager.executeQuery(query)
.then(function (data) {
// I believe the $timeout that was in this function is not necessary
myStatePromise.resolve(data);
});
return myStatePromis
e.promise;
}
Hope this could help you a little bit.
Regards,
Carles