In this step, you will learn how to create a layout template and how to build an app that has multiple views by adding routing.
-
Reset the workspace to step 7.
git checkout -f step-7
-
Refresh your browser or check the app out on Angular's server.
-
Reset the workspace to step 7.
git checkout -f step-7
-
Refresh your browser or check the app out on Angular's server.
Note that when you now navigate to app/index.html
, you are redirected toapp/index.html#/phones
and the same phone list appears in the browser. When you click on a phone link the stub of a phone detail page is displayed.
The most important changes are listed below. You can see the full diff on GitHub.
Multiple Views, Routing and Layout Template
Our app is slowly growing and becoming more complex. Before step 7, the app provided our users with a single view (the list of all phones), and all of the template code was located in theindex.html
file. The next step in building the app is to add a view that will show detailed information about each of the devices in our list.
To add the detailed view, we could expand the index.html
file to contain template code for both views, but that would get messy very quickly. Instead, we are going to turn theindex.html
template into what we call a "layout template". This is a template that is common for all views in our application. Other "partial templates" are then included into this layout template depending on the current "route" — the view that is currently displayed to the user.
Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature we can implementdeep linking, which lets us utilize the browser's history (back and forward navigation) and bookmarks.
A Note About DI, Injector and Providers
As you noticed,dependency injection (DI) is at the core of AngularJS, so it's important for you to understand a thing or two about how it works.
When the application bootstraps, Angular creates an injector that will be used for all DI stuff in this app. The injector itself doesn't know anything about what$http
or $route
services do, in fact it doesn't even know about the existence of these services unless it is configured with proper module definitions. The sole responsibilities of the injector are to load specified module definition(s), register all service providers defined in these modules, and when asked, inject a specified function with dependencies (services) that it lazily instantiates via their providers.
Providers are objects that provide (create) instances of services and expose configuration APIs that can be used to control the creation and runtime behavior of a service. In case of the$route
service, the $routeProvider
exposes APIs that allow you to define routes for your application.
config
functions. Thus you could not inject
$routeProvider
into
PhoneListCtrl
.
Angular modules solve the problem of removing global state from the application and provide a way of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are totally independent and both module systems can live side by side and fulfil their goals.
The App Module
app/js/app.js
:
- var phonecatApp = angular.module('phonecatApp', [
- 'ngRoute',
- 'phonecatControllers'
- ]);
- phonecatApp.config(['$routeProvider',
- function($routeProvider) {
- $routeProvider.
- when('/phones', {
- templateUrl: 'partials/phone-list.html',
- controller: 'PhoneListCtrl'
- }).
- when('/phones/:phoneId', {
- templateUrl: 'partials/phone-detail.html',
- controller: 'PhoneDetailCtrl'
- }).
- otherwise({
- redirectTo: '/phones'
- });
- }]);
In order to configure our application with routes, we need to create a module for our application. We call this modulephonecatApp
. Notice the second argument passed to angular.module
:['ngRoute', 'phonecatControllers']
. This array lists the modules thatphonecatApp
depends on.
Above, we added angular-route.js
to index.html
. That's not all we need to do to be able to use it, however. We also have to addngRoute
as a dependency of our app. To improve the organization of the app, we're going to move the controllers into their own file (as shown below), and call the modulephonecatControllers
. By listing these two modules as dependencies ofphonecatApp
, we can use the directives and services they provide.
Thus using the config
API we request the $routeProvider
to be injected into our config function and use the$routeProvider.when
API to define our routes.
Our application routes are defined as follows:
-
The phone list view will be shown when the URL hash fragment is
/phones
. To construct this view, Angular will use thephone-list.html
template and thePhoneListCtrl
controller. -
The phone details view will be shown when the URL hash fragment matches '/phone/:phoneId', where
:phoneId
is a variable part of the URL. To construct the phone details view, angular will use thephone-detail.html
template and thePhoneDetailCtrl
controller.
We reused the PhoneListCtrl
controller that we constructed in previous steps and we added a new, emptyPhoneDetailCtrl
controller to the app/js/controllers.js
file for the phone details view.
$route.otherwise({redirectTo: '/phones'})
triggers a redirection to/phones
when the browser address doesn't match either of our routes.
Note the use of the :phoneId
parameter in the second route declaration. The$route
service uses the route declaration — '/phones/:phoneId'
— as a template that is matched against the current URL. All variables defined with the:
notation are extracted into the $routeParams
object.
In order for our application to bootstrap with our newly created module we'll also need to specify the module name as the value of thengApp
directive:
app/index.html
:
- <!doctype html>
- <html lang="en" ng-app="phonecatApp">
- ...
Controllers
app/js/controllers.js
:
- var phonecatControllers = angular.module('phonecatControllers', []);
- phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
- function ($scope, $http) {
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
- });
- $scope.orderProp = 'age';
- }]);
- phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
- function($scope, $routeParams) {
- $scope.phoneId = $routeParams.phoneId;
- }]);
Again, note that we created a new module called phonecatControllers
. For small AngularJS applications, it's common to create just one module for all of your controllers if there are just a few. For larger apps, you will probably want to create separate modules for each major feature of your app.
Because our example app is relatively small, we'll add all of our controllers to this module.
Template
The $route
service is usually used in conjunction with the ngView directive. The role of the ngView
directive is to include the view template for the current route into the layout template. This makes it a perfect fit for ourindex.html
template.
ngRoute
is in its own module and must be loaded by loading the
angular-route.js
file distributed with Angular. The easist way to load the file is to add a
<script>
tag to your
index.html
file as shown below.
app/index.html
:
- <!doctype html>
- <html lang="en" ng-app="phonecatApp">
- <head>
- ...
- <script src="lib/angular/angular.js"></script>
- <script src="lib/angular/angular-route.js"></script>
- <script src="js/app.js"></script>
- <script src="js/controllers.js"></script>
- </head>
- <body>
- <div ng-view></div>
- </body>
- </html>
Note that we removed most of the code in the index.html
template and replaced it with a single line containing a div with theng-view
attribute. The code that we removed was placed into the phone-list.html
template:
app/partials/phone-list.html
:
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span2">
- <!--Sidebar content-->
- Search: <input ng-model="query">
- Sort by:
- <select ng-model="orderProp">
- <option value="name">Alphabetical</option>
- <option value="age">Newest</option>
- </select>
- </div>
- <div class="span10">
- <!--Body content-->
- <ul class="phones">
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
- <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
- <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
- </div>
- </div>
- </div>
We also added a placeholder template for the phone details view:
app/partials/phone-detail.html
:
- TBD: detail view for {{phoneId}}
Note how we are using phoneId
model defined in the PhoneDetailCtrl
controller.
Test
To automatically verify that everything is wired properly, we wrote end-to-end tests that navigate to various URLs and verify that the correct view was rendered.
- ...
- it('should redirect index.html to index.html#/phones', function() {
- browser().navigateTo('../../app/index.html');
- expect(browser().location().url()).toBe('/phones');
- });
- ...
- describe('Phone detail view', function() {
- beforeEach(function() {
- browser().navigateTo('../../app/index.html#/phones/nexus-s');
- });
- it('should display placeholder page with phoneId', function() {
- expect(binding('phoneId')).toBe('nexus-s');
- });
- });
You can now rerun ./scripts/e2e-test.sh
or refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running onAngular's server.
Experiments
- Try to add an
{{orderProp}}
binding toindex.html
, and you'll see that nothing happens even when you are in the phone list view. This is because theorderProp
model is visible only in the scope managed byPhoneListCtrl
, which is associated with the<div ng-view>
element. If you add the same binding into thephone-list.html
template, the binding will work as expected.
PhoneCatCtrl
, create a new model called "
hero
" with
this.hero = 'Zoro'
. In
PhoneListCtrl
let's shadow it with
this.hero = 'Batman'
, and in
PhoneDetailCtrl
we'll use
this.hero = "Captain Proton"
. Then add the
<p>hero = {{hero}}</p>
to all three of our templates (
index.html
,
phone-list.html
, and
phone-detail.html
). Open the app and you'll see scope inheritance and model property shadowing do some wonders.
Summary
With the routing set up and the phone list view implemented, we're ready to go tostep 8 to implement the phone details view.