Week 8 - Promises

This week we will wrap up this series with the topic of promises (for some reason it took me awhile to get used to using this pattern; thus saving it for last).

Assignment

Fork the fiddle "AngularJS: A Walk-Through - Week 7" and Name it "AngularJS: A Walk-Through - Week 8" "Update" it and "Set as base".

Assignment

Read articles describing promises; in particular: JavaScript Promises and AngularJS $q Service <http://www.webdeveasy.com/javascript-promises-and-angularjs-q-service/>

In order to demonstrate the $q service, we will refactor our gemService. First we refactor it so that has a query function with success and error callbacks (throwing in a 2 second timeout to introduce an asynchronous element).

JavaScript

 
// store/gems.service.js
(function() {
    angular
        .module('storeModule')
        .factory('gemsService', gemsService);
    /**
    * @name gemsService
    * @desc Service for gems.
    */
    gemsService.$inject = ['$timeout'];
    function gemsService($timeout) {
        var service = {};
        service.query = query;
        var gems = [{
            name: 'Azurite',
            // OBMITTED
            reviews: []
        }];
        return service;
        function query(success, error) {
            $timeout(function() {
                success(gems);
            }, 2000);    
        }
    }
})();   

With the new gemService, the StoreController is changed to:

JavaScript

 
// store/store.controller.js
(function() {
    angular
        .module('storeModule')
        .controller('StoreController', StoreController);
    /**
    * @name StoreController
    * @desc Controller for the store screen.
    */
    StoreController.$inject = ['gemsService'];
    function StoreController(gemsService) {
        var vm = this;
        gemsService.query(function(gems) {
            vm.products = gems;
        }, function() {
        });
    }
})();  

Now that we have a typical asynchronous function, we will rewrite the query function as follows with the $q service.

JavaScript

 
// store/gems.service.js
(function() {
    angular
        .module('storeModule')
        .factory('gemsService', gemsService);
    /**
    * @name gemsService
    * @desc Service for gems.
    */
    gemsService.$inject = ['$timeout'];
    function gemsService($timeout) {
        var service = {};
        service.query = query;
        var gems = [{
            name: 'Azurite',
            // OBMITTED
            reviews: []
        }];
        return service;
        function query() {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve(gems);
            }, 2000);
            return deferred.promise;
        }
    }
})();   

And now we implement the promise in the StoreController.

JavaScript

 
// store/store.controller.js
(function() {
    angular
        .module('storeModule')
        .controller('StoreController', StoreController);
    /**
    * @name StoreController
    * @desc Controller for the store screen.
    */
    StoreController.$inject = ['gemsService'];
    function StoreController(gemsService) {
        var vm = this;
        gemsService.query().then(function(gems) {
            vm.products = gems;
        });
    }
})();

Assignment

Using the information above, refactor this week's fiddle to use the $q service.

Sample of Week Result

The result of this week is an AngularJS app, "AngularJS: A Walk-Through - Week 8". AngularJS: A Walk-Through - Week 8 <https://jsfiddle.net/sckmkny/e5LLpygs/>

Bonus

Now that one understands promises, the last refinement would be to change up the app so that the promises are resolved before loading the screen (to avoid showing the screen partially complete).  The key here is to AngularJS Route Resolves. Using Resolves In AngularJS Routes <http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx>