Week 5 - Customized Services and Routes

This week we are going to revisit services (Code School just touched upon them) and introduce routes (used as one expands the app to use multiple screens).

Assignment

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

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: Add the appropriate routing entries to the "app.config" section, e.g. "about.html" and "AboutController". Create a do nothing "AboutController". Create the "about.html" page using the ng-template syntax. Use a hash URL to link between pages.

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/>