angular.service.$route

Description

Watches $location.url() and tries to map the path 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 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 [[ng:include]] pulls in the partial.

     <script>
       function MainCntl($route, $routeParams, $location) {
         this.$route = $route;
         this.$location = $location;
         this.$routeParams = $routeParams;

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

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

       function ChapterCntl($routeParams) {
         this.name = "ChapterCntl";
         this.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><br/>
       <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>
       <hr />
       <ng:view></ng:view>
     </div>