AngularJS: Up and Running

Chapter 10. Routing Using ngRoute

Until this point, we have dealt with various parts of AngularJS, including controllers, services, and filters. But we have not yet moved beyond having just one HTML template that changes behavior depending on the service or the controller. In a real Single-Page Application, we would usually have multiple views that would be loaded when the user clicks certain links or goes to a URL in the browser. Replicating that in a pure JavaScript framework is difficult, because implementing routing always involves:

• Creating a state machine
• Adding and removing items from the browser’s history
• Loading and unloading templates and relevant JS as the state changes
• Handling the various idiosyncrasies across different browsers

More often than not, these get wrapped into reusable plugins or reimplemented from scratch. And we as developers are left hunting across the codebase to figure out how it is implemented and how to deal with it.

AngularJS provides us with an optional module called ngRoute, which can be used to do routing in an AngularJS application. Following the AngularJS philosophy, routing in AngularJS is declarative, so all routes are defined in a single configuration section where we can specify what the route is and what AngularJS needs to do when that route is encountered.

In this chapter, we will implement our own multiview AngularJS application with different routes while getting a detailed look at the various options that can be used to configure AngularJS ...