Working With Promises in AngularJS Services

Let’s talk about working with promises in AngularJS. To start, $q is a great implementation of promises, allowing you work with deferred objects and be more efficient with Ajax calls.

$q api has few useful methods, first one is to create new deferred object using $q.defer(), so this object could be resolve in the future using $.q.defer().resolve and also to be reject using $.defer().reject methods.

Explore Angular Courses

When executing Ajax calls from AngularJS services, usually we use $http which return by default a promise object which we can attach “then” method to for result notification.

But when the service should fetch data from the backend and allow more than one AngularJS controllers to use, it doesn’t make the make the most sense to fetch everything from the server every time. Then, we should save the data in local variable inside the service.

So when the AngularJS controller calls the service api to get the data, it could be a promise from the Ajax call or the data stored from previous call. The AngularJS controller should be able to differentiate between the cases, so thats not an ideal practice.

The way of doing it is to wrap the data stored in AngularJS service with another $q api called $q.when which can treated as a promise for both cases, so when the $q.when receive a promise it will be resolved when the promise will and if it receive a real data it will be resolved immediately.

That is transparent to the controller and this is a good practice.

Here’s a full code snippet below based on the above overview.

Explore Angular Courses

Kyle Pennell
Kyle Pennell is a marketer and writer with a variety of technical chops (JavaScript, Google Sheets/Excel, WordPress, SEO). He loves clear and helpful copy and likes automating things and making web apps (mostly maps). Found at and many other digital spaces