Beginning AngularJS

Chapter 8 ■ Organizing Views

Listing 8-16. The Revised Routes Configuration

app.config(function ($routeProvider) {

// configure the routes
$routeProvider

// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'homeController'
})

// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})

// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})

// route for the contact page with subject param
.when('/contact/:subject', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})

// when all else fails
.otherwise({
templateUrl: 'pages/routeNotFound.html',
controller: 'notFoundController'
});
});

You can see that the new route definition is in play now. You can also see that the original route remains in play
too. We still need this, so that we can continue to navigate to the contact view template without a route parameter. An
alternative is to remove it and simply make sure that we always use a route parameter. It all depends on what you want
to achieve. In this case, it made sense to leave it as a general purpose fallback.
Figure 8-4 and Figure 8-5 show the updated about.html and contact.html view templates. Figure 8-5 is the
result of following the link in the second paragraph of the about.html view template. You will see that its subject field
is pre-populated with the text “I would like to get a free quote.”