You will learn following topics in this tutorial for your ease here we will use previously created storyboard app for learning routes in angularjs

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

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 Tutorial 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

Table 7.1. ngRoute components



$routeProvider Configures routes
$route Listens to URL changes and coordinates with the ng-view instance
ng-view Responsible for coordinating the creation of the appropriate controller and view for the current route
$routeParams Interprets and communicates URL parameters to the controller

You’ll see all of these components in action in a moment, but a high-level example would be if, say, you wanted to see the user stories assigned to a specific user. You’d use $routeProvider to configure a route with the $route service to detect when the URL is pointing to a specific user such as /users/123, with 123 being the user’s ID. $route will detect this route and work with ng-view to create the appropriate controller and view to display the user’s stories. The $routeParams service is injected into the controller and exposes the user’s ID from the URL so that the controller can act upon it.