Chapter 8
Organizing Views
AngularJS excels when it comes to the creation of single-page applications, or S PAs, as they are commonly called. This
kind of application has become increasingly common, given the advances in HTML5 and the availability of faster
Internet connections. With an SPA, we can provide a much more responsive user experience, decrease the load on
our web servers, and benefit from other advantages, such as the ability to cater better to users who might have to work
offline. However, there is a potential issue with a web site or web application that downloads a lot of its content during
a single-page request—organizing and managing that content.
With Angular, we can manage this situation neatly and easily, using the Angular routing system. As you will
see, this approach makes for a very flexible and powerful solution to the problem of managing applications that are
required to deliver large amounts of content (and functionality) in the context of a single-page application.
Ideally, we should be able to tell our application where our content resides, and, moreover, when users request
it, it should just find it and load it for them with a minimum of fuss and complexity. This is where the Angular routing
system comes into play.
By the end of this chapter, you should feel comfortable with the most important parts of the Angular system—the
$route service and its related provider and directives. Before we look at any of this, however, we have to download
and install the ngRoute module.
Installing the ngRoute Module
As the Angular routing system is defined within an optional module called ngRoute, we must download this module
before we can get started. To do this, go to http://angularjs.org, click Download, select the version you require
(the code listings in this chapter use the 1.2.5 version), and click the Browse additional modules link displayed next to
Extras, as shown in Figure 8-1.