| Assignment |
Fork the fiddle "AngularJS: A Walk-Through - Week 7" and
|
| 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> |
