Chapter 7. Structuring your site with routes

 

This chapter covers

  • Components of AngularJS routes
  • Creating routes
  • Route parameters
  • Creating and resolving dependencies in routes
  • Route events

Angello is starting to grow in complexity, with distinct but related areas of functionality such as managing users, managing user stories, and displaying visualizations. How do you know when to show the user and when to show the user stories? What if you want to show just the user stories for a specific user? This can get complex as you try to account for all the possible permutations.

Every web application has a URL, and you can use this to define the state of the application. Based on the URL, you can intelligently route the user to the part of the application that they want to see. This technique is called URL routing, and AngularJS allows you to implement routing in your web applications with the ngRoute sub-module. Routes help you intelligently decide what to show and how to show it, based on the URL of the application. We’ll spend the rest of this chapter discussing the various parts that make routes possible in AngularJS, while showing how we can use it in Angello.

7.1. The components of AngularJS routes

Routing in AngularJS consists of four components that work together to allow you to use URL routes to control the state of your application. See figure 7.1 and table 7.1 for the big picture of how these components work together.

Figure 7.1. ngRoute big picture

7.2. How to create routes in AngularJS

7.3. Using parameters with routes

7.4. Using resolve with routes

7.5. Route events

7.6. Testing

7.7. Best practices

7.8. Summary

sitemap