Chapter 8 ■ Organizing Views.otherwise({
// when all else fails
templateUrl: '/pages/routeNotFound.html',
controller: 'notFoundController'
});
});
It is worth repeating the fact that we declared a dependency on the ngRoute module when we created our
application module, because its absence is the source of many problems for Angular beginners. Next, we use our
application module’s config() method to set up our route configuration. While the config() method can be used for
other configuration purposes, here we use it solely to set up the routing system. We do this using the $routeProvider
parameter that we specified on its anonymous function argument. It is through the $routeProvider that we tell the
routing system how we want it to behave.
■ Caution You may have noticed something unusual. we talk about the $route service, yet we use $routeProvider
within the config() method. Providers are objects that create instances of services and expose configuration apis. You
need to use $routeProvider within the config() method, as this method is somewhat special. it can only use providers,
not services.
The route provider’s when() method adds a new route definition. As we discussed, this is achieved through the
two arguments that we pass to it. In Listing 8-9, the first when() method is used to create a route for our home page.
When the routing system can make a match against the value of location.path() and '/', it will inject the template
'home.html' into the ngView directive and make homeController its controller.
The next two route definitions use '/pages/about' and '/pages/contact', and the same logic applies. Of
course, in these cases, the view templates and the controllers used are different. Pay special attention to the forward
slashes in these routes. For example, the following two routes, '/pages/about' and 'pages/about', are not the same.
Note that the latter is missing the forward slash. Without the forward slash, you run the risk of creating a Not Found
error when navigating the web site. Keep in mind that the URL is evaluated relative to the value returned by the
$location.path() method.
Sometimes, a match cannot be made. This is where the otherwise() method comes in. If you were to type a
nonexistent URL into the browser’s address bar, you would cause the otherwise() method to execute and display the
'routeNotFound.html' view template. Of course, only a single argument is required in this case, as a URL makes no
sense in this context.
We also specified a controller to use with each of our route definitions. Listing 8-10 shows this again. All but the
last one do nothing more than set a value $scope.message, so that we can distinguish one page from another.
Listing 8-10. The Controllers for Our View Templates
app.controller('homeController', function ($scope) {
$scope.message = 'Welcome to my home page!';
});
app.controller('aboutController', function ($scope) {
$scope.message = 'Find out more about me.';
});
app.controller('contactController', function ($scope) {
$scope.message = 'Contact us!';
});