| Assignment |
Fork the fiddle "AngularJS: A Walk-Through - Week 4" and
|
Services
In the example we have been using, the gems data was simply jammed into our controller; not pretty and not reusable. We are going data off into a separate object called a service.
| Assignment |
| Read articles describing AngularJS services; in particular: AngularJS Developers Guide: Services <https://docs.angularjs.org/guide/services> |
If one read other articles on services, they would have likely bumped in a number of other types of services other than a factory, e.g., service and provider. Yes, it is unfortunate they they used the word service to mean two different things. The good news is that for the most part these others are either redundant or used in edge cases. We will not use them.
First, we are going to stub out a gems service (to be added to ends of the JSFIDDLE JavaScript pane).
JavaScript
// gems.js
(function() {
var app = angular.module('store-services', []);
app.factory('gems', function() {
var service = {};
return service;
});
})();
Next we are going to have the "gemStore" app use the "store-services" by updating the following at the top of the JSFIDDLE JavaScript.
JavaScript
var app = angular.module('gemStore', ['store-directives', 'store-services']);
Next we are going to move the "gems" definition out of the "StoreController" and into the "gems" service by simply replacing the empty object "{}" with the array of gems.
Finally, we are going to inject the "gems" service into the "StoreController" as follows:
JavaScript
app.controller('StoreController', ['gems', function(gems){
this.products = gems;
}]);
| Assignment |
| Replicate the work above in the fiddle "AngularJS: A Walk-Through - Week 5" ("Update and "Set as base") As one can see, this did not add any functionality; rather this set us up to use the "gems" service in other parts of this application. |
| Assignment |
| While this was covered a bit in the Code School material and we just used it above, read articles on AngularJS dependency injection; in particular: AngularJS Developers Guide: Dependency Injection <https://docs.angularjs.org/guide/di> |
Routing
Angular uses different hash URLs, e.g., <http://domain.com/#/> and <http://domain.com/#/login> to differentiate screens as one navigates the app. Like any URL they can be bookmarked and crawled independently by the search engines. The important thing to understand is that the browser is not reloading the page as it navigates to a different hash URL.
Angular uses a separate ngRoute module to handle navigation between screens within an app.
| Assignment |
| Read articles on AngularJS routing; in particular: AngularJS: Tutorial: 7 - Routing & Multiple Views <https://docs.angularjs.org/tutorial/step_07> |
We are going to simply use the ngRoute module with the existing functionality (still only one screen). We first install the ngRoute module from a CDN using JSFIDDLE "External Resources".
//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.js
Then we make the "gemStore" application depend on ngRoute.
JavaScript
var app = angular.module('gemStore', ['ngRoute', 'store-directives', 'store-services']);
We then add an app.config to the gemStore application:
JavaScript
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'store.html',
controller: 'StoreController'
}).
otherwise({
redirectTo: '/'
});
}]);
Then we move the HTML (the top part that is not part of a ng-template script section) into the "store.html" file using the ng-template syntax.
HTML
<script id="store.html" type="text/ng-template">
Finally, we insert the ngView directive to the top of the HTML.
HTML
<div ng-view></div>
| Assignment |
| Replicate the work above in the fiddle "AngularJS: A Walk-Through - Week 5" ("Update and "Set as base") As one can see, this did not add any functionality; rather this set us up to add additional screens. |
| Assignment |
This challenging assignment is to use what one knows to add an "about.html" page that is linked from the "store.html" page. Things to remember:
|
| Sample of Week Result |
| The result of this week is an AngularJS app, "AngularJS: A Walk-Through - Week 5" that will be used as a starting point for the next week. AngularJS: A Walk-Through - Week 5 <http://jsfiddle.net/sckmkny/y04ht4mt/> |
