angular.module.ng.$route

Description

Is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

You can define routes through $routeProvider's API.

The $route service is typically used in conjunction with ngView directive and the $routeParams service.

Dependencies

Methods

Properties

Events

Example

This example shows how changing the URL hash causes the $route to match a route against the URL, and the ngView pulls in the partial.

Note that this example is using inlined templates to get it working on jsfiddle as well.

   <script type="text/ng-template" id="examples/book.html">
     controller: {{name}}<br />
     Book Id: {{params.bookId}}<br />
   </script>

   <script type="text/ng-template" id="examples/chapter.html">
     controller: {{name}}<br />
     Book Id: {{params.bookId}}<br />
     Chapter Id: {{params.chapterId}}
   </script>

   <script>
     angular.module('route', [], function($routeProvider, $locationProvider) {
       $routeProvider.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl});
       $routeProvider.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl});

       // configure html5 to get links working on jsfiddle
       $locationProvider.html5Mode(true);
     });

     function MainCntl($scope, $route, $routeParams, $location) {
       $scope.$route = $route;
       $scope.$location = $location;
       $scope.$routeParams = $routeParams;
     }

     function BookCntl($scope, $routeParams) {
       $scope.name = "BookCntl";
       $scope.params = $routeParams;
     }

     function ChapterCntl($scope, $routeParams) {
       $scope.name = "ChapterCntl";
       $scope.params = $routeParams;
     }
   </script>

   <div ng-controller="MainCntl">
     Choose:
     <a href="Book/Moby">Moby</a> |
     <a href="Book/Moby/ch/1">Moby: Ch1</a> |
     <a href="Book/Gatsby">Gatsby</a> |
     <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
     <a href="Book/Scarlet">Scarlet Letter</a><br/>

     <div ng-view></div>
     <hr />

     <pre>$location.path() = {{$location.path()}}</pre>
     <pre>$route.current.template = {{$route.current.template}}</pre>
     <pre>$route.current.params = {{$route.current.params}}</pre>
     <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
     <pre>$routeParams = {{$routeParams}}</pre>
   </div>
 
   it('should load and compile correct template', function() {
     element('a:contains("Moby: Ch1")').click();
     var content = element('.doc-example-live [ng-view]').text();
     expect(content).toMatch(/controller\: ChapterCntl/);
     expect(content).toMatch(/Book Id\: Moby/);
     expect(content).toMatch(/Chapter Id\: 1/);

     element('a:contains("Scarlet")').click();
     content = element('.doc-example-live [ng-view]').text();
     expect(content).toMatch(/controller\: BookCntl/);
     expect(content).toMatch(/Book Id\: Scarlet/);
   });