Chapter 8 ■ Organizing Views

One particularly interesting alternative is the template option (see Listing 8-17). It’s similar to the templateUrl
option, but it differs in that it allows you to create the template right there in the route configuration options (as
opposed to using a view template file). It’s certainly not the way to do things in most cases, but it can be useful when
you don’t want or need a dedicated view template.

Listing 8-17. The Template Option

.otherwise({
template: '

Oops

Sorry, page not found

Using template, Listing 8-17 shows this approach in action. As you can see, we do not specify a path; instead,
we use a string value consisting of some HTML. As I mentioned, you generally would not want to use this approach
unless you had a particular reason to apply it. The main reason I am presenting it here is to clarify the difference
between template and templateURL.
As revealed in Table 8-3, besides accepting a string value, template and templateUrl can both accept a function
as a value. This function must itself return a string. Both of the route definitions that follow are functionally equivalent.

when('/portfolio', {
templateUrl: function () {return 'contact.html';},
controller: 'contactController'
});

when('/portfolio', {
templateUrl: 'contact.html',
controller: 'contactController'
});

Table 8-3. Route Configuration Options

Name Description

controller Specifies the name of a controller to be associated with the view displayed by the route

controllerAs Specifies an alias to be used for the controller

template Specifies the content of the view. (This can be expressed as a literal HTML string or as a
function that returns the HTML.)

templateUrl Specifies the URL of the view file to display when the route matches. (This can be
expressed as a string or as a function that returns a string.)

resolve Specifies a set of dependencies for the controller

redirectTo Specifies a path to which the browser should be redirected when the route is matched.
(This can be expressed as a string or a function.)

reloadOnSearch When true (the default value), the route will reload only when the values returned by
the $location search and hash methods change.

caseInsensitiveMatch When true (the default value), routes are matched to URLs without considering case.