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>
       function MainCntl($route, $location) {
         this.$route = $route;
         this.$location = $location;

         $route.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl});
         $route.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl});
         $route.onChange(function() {
           $route.current.scope.params = $route.current.params;
         });
       }

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

       function ChapterCntl() {
         this.name = "ChapterCntl";
       }
     </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><br/>
       $location.hashPath: <input type="text" name="$location.hashPath" size="80" />
       <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:view></ng:view>
     </div>