Chapter 8 ■ Organizing Views

Listing 8-6. The Contact Page, contact.html

Listing 8-7. The Route Not Found View Template, routeNotFound.html

Each of these view templates will look the same, differing only in the content displayed once they are brought
into the parent page via the ngView directive. Note the use of the jumbotron and text-center classes. These are
Bootstrap-defined classes that help us with the layout. In the case of the routeNotFound.html view template, I have
also used the Bootstrap has-error class to color the attempted path red, to highlight the erroneous input.
As I mentioned, every time the current route changes, the included view (the injected content) will change, based
on how we have configured our routes. What would cause the current route to change? In our example, it would occur
anytime our user interacted with the navigation links in our index.html file. So that we can hone in on these, I have
repeated them again in Listing 8-8.

Listing 8-8. The Navigation Links in Our Entry Page, index.html

• Home


• About


• Contact

You will notice that these links are declared using a # character, just like those used in HTML when addressing
named anchors. By default, when specifying links for the routing system, you should use this style of link, because
only the portion after the first # character is considered during the matching process. With this matching process
in mind, let’s have a look at some sample URLs and consider how the $location service can break them down into
distinct components (see Table 8-1).