In this article, we will discuss about the URL routing features of AngularJS. AngularJS supports a feature called URL routing which uses the value returned by the $location.path method to load and display view files without the need for nasty literal values embedded throughout the markup and code in an application. But like other normal AngularJS features, this URL routing features not included by default in the AngularJS library files. So in the below sections, I will discuss how to download and install the $route service, which provides the URL routing functionally.
Installing the ngRoute Module
The $route service is defined within an optional module called ngRoute that must be downloaded into the angularjs folder. Go to http://angularjs.org, click Download, select the version you want and download the file. Download the angular-route.js file into the angularjs folder.
Defining the URL Routes
At the heart of the functionality provided by the $route service is a set of mappings between URLs and view file names, known as URL routes or just routes. When the value returned by the $location.path method matches one of the mappings, the corresponding view file will be loaded and displayed. The mappings are defined using the provider for the $route service, $routeProvider. Routes are defined using the $routeProvider.when method. The first argument is the URL that the route will apply to, and the second argument is the route configuration object. The routes I have defined are the simplest possible because the URLs are static and I have provided the minimum configuration information, but later in the article I’ll show you more complex examples. I’ll describe all of the configuration options later in the article, but for now it is enough to know that the templateUrl configuration option specifies the view file that should be used when the path of the current browser URL matches the first argument passed to the when method. In the below section, I show how to define a route config in AngularJS.
- testApp.config(function ($routeProvider) {
-
- $routeProvider.when("/mobile", {
- templateUrl: "../ch09(route)/mobile.html",
- controller: "MobileController"
- });
-
- });
Using Route Parameters
The URLs I used to define the routes in the previous section were fixed or static, meaning that the value passed to the $location.path method or set in an a element’s href attribute has to exactly match the value I used with the $routeProvider.when method. As a reminder, here is one of the routes that I defined:
- ...
-
- $routeProvider.when("/create", {
-
- templateUrl: "editorView.html"
-
- });
-
- ...
This route will be activated only when the path component of the URL matches /create. This is the most basic kind of URL that routes can be used with and, as a consequence, the most limited. Route URLs can contain route parameters, which match one or more segments in the path displayed by the browser. A segment is the set of characters between two / characters. As an example, the segments in the URL http://localhost:5000/users/adam/details are users, adam, and details. There are two kinds of route parameters: conservative and eager. A conservative route parameter will match one segment, and an eager one will match as many segments as possible.
Accessing Routes and Routes Parameters
The URLs I used in the previous section process paths and assign the contents of segments to route parameters, which can then be accessed in code. In this section, I am going to demonstrate how to access those values using the $route and $routeParams services, both of which are contained in the ngRoute module.
Configuring Routes
The routes I have defined so far in this article have defined only the templateUrl configuration property, which specifies the URL of the view file that the route will display. This is only one of the configuration options available. I have listed the full set in below as follow.
| Name | Descriptions |
| controller | Specifies the name of a controller to be associated with the view displayed by the Route |
| controllerAs | Specifies an alias to be used for the controller. |
| Template | Specifies the content of the view. This can be expressed as a literal HTML string or as a function that returns the HTML. |
| templateUrl | Specifies the URL of the view file to display when the route matches. This can be expressed as a string or as a function that returns a string |
| resolve | Specifies a set of dependencies for the controller |
| redirectTo | Specifies a path that the browser should be redirected to when the route is matched. Can be expressed as a string or a function |
For demonstrating the route concept, I write down the below code as mentioned :