angular.service.$route.html

<h1>angular.service.$route</h1>
<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>
<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 ng:include widget. </p><h2>Dependencies</h2>
<ul class="dependencies"><li>$location</li>
</ul>
<h2>Methods</h2>
<ul class="methods"><li><h3>onChange(fn)</h3>
<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>
Function that will be called on route change</li>
</ul>
</li>
<li><h3>when(path, params)</h3>
<p>Add new route</p><h4>Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">path – {string} – </code>
Route path (matched against $location.hash)</li>
<li><code ng:non-bindable="">params – {Object} – </code>
Mapping information to be assigned to <code>$route.current</code> on route
   match.</li>
</ul>
</li>
</ul>
<h2>Properties</h2>
<ul class="properties"><li><h3>current</h3>
Name of the current route</li>
<li><h3>routes</h3>
List of configured routes</li>
</ul>
<h2>Example</h2>
<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>