angular.service.$route.html

<h1>angular.service.$route</h1>
<div class="angular-service-route"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<div class="description"><p>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).</p>

<p>$route is typically used in conjunction with <a href="#!angular.widget.ng:view"><code>ng:view</code></a> widget.</p></div>
<h2>Dependencies</h2>
<ul class="dependencies"><li>$location</li>
</ul>
<h2>Methods</h2>
<ul class="methods"><li><h3>onChange(fn)</h3>
<div class="onchange-fn-"><p>Register a handler function that will be called when route changes</p><h4>Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">fn – {function()} – </code>
<p>Function that will be called on route change</p></li>
</ul>
</div>
</li>
<li><h3>when(path, params)</h3>
<div class="when-path-params-"><p>Add new route</p><h4>Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">path – {string} – </code>
<p>Route path (matched against $location.hash)</p></li>
<li><code ng:non-bindable="">params – {Object} – </code>
<p>Mapping information to be assigned to <code>$route.current</code> on route
   match.</p></li>
</ul>
</div>
</li>
</ul>
<h2>Properties</h2>
<ul class="properties"><li><h3>current</h3>
<div class="current">Name of the current route</div>
</li>
<li><h3>routes</h3>
<div class="routes">List of configured routes</div>
</li>
</ul>
<h2>Example</h2>
<div class="example"><doc:example><doc:source>&lt;p&gt;
  This example shows how changing the URL hash causes the &lt;tt&gt;$route&lt;/tt&gt;
  to match a route against the URL, and the &lt;tt&gt;[[ng:include]]&lt;/tt&gt; pulls in the partial.
  Try changing the URL in the input box to see changes.
&lt;/p&gt;

&lt;script&gt;
  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";
  }
&lt;/script&gt;

Chose:
&lt;a href="#/Book/Moby"&gt;Moby&lt;/a&gt; |
&lt;a href="#/Book/Moby/ch/1"&gt;Moby: Ch1&lt;/a&gt; |
&lt;a href="#/Book/Gatsby"&gt;Gatsby&lt;/a&gt; |
&lt;a href="#/Book/Gatsby/ch/4?key=value"&gt;Gatsby: Ch4&lt;/a&gt;&lt;br/&gt;
&lt;input type="text" name="$location.hashPath" size="80" /&gt;
&lt;pre&gt;$location={{$location}}&lt;/pre&gt;
&lt;pre&gt;$route.current.template={{$route.current.template}}&lt;/pre&gt;
&lt;pre&gt;$route.current.params={{$route.current.params}}&lt;/pre&gt;
&lt;pre&gt;$route.current.scope.name={{$route.current.scope.name}}&lt;/pre&gt;
&lt;hr/&gt;
&lt;ng:include src="$route.current.template" scope="$route.current.scope"/&gt;</doc:source>
</doc:example>
</div>
</div>