angular.service.$route

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Description

Watches $location.hashPath and tries to map the hash to an existing route definition. It is used for deep-linking URLs to controllers and views (HTML partials).

The $route service is typically used in conjunction with ng:view widget.

Dependencies

Methods

Properties

Example

This example shows how changing the URL hash causes the $route to match a route against the URL, and the [[ng:include]] pulls in the partial. Try changing the URL in the input box to see changes.

     <script>
       angular.service('myApp', function($route) {
         $route.when('/Book/:bookId', {template:'rsrc/book.html', controller:BookCntl});
         $route.when('/Book/:bookId/ch/:chapterId', {template:'rsrc/chapter.html', controller:ChapterCntl});
         $route.onChange(function() {
           $route.current.scope.params = $route.current.params;
         });
       }, {$inject: ['$route']});

       function BookCntl() {
         this.name = "BookCntl";
       }

       function ChapterCntl() {
         this.name = "ChapterCntl";
       }
     </script>

     Chose:
     <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><br/>
     <input type="text" name="$location.hashPath" size="80" />
     <pre>$location={{$location}}</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>
     <hr/>
     <ng:include src="$route.current.template" scope="$route.current.scope"/>