knowhow-server/public/js/lib/angular-1.2.9/docs/partials/api/ngRoute.$route.html

A personal workflow engine that can manage and use any network connected host

<a href="http://github.com/angular/angular.js/tree/v1.2.9/src/ngRoute/route.js#L236" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngRoute/route.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$route</code>
<div><span class="hint">service in module <code ng:non-bindable="">ngRoute</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ngroute-route-page"><p><code>$route</code> is used for deep-linking URLs to controllers and views (HTML partials).
It watches <code>$location.url()</code> and tries to map the path to an existing route definition.</p>
<p>Requires the <a href="api/ngRoute"><code>ngRoute</code></a> module to be installed.</p>
<p>You can define routes through <a href="api/ngRoute.$routeProvider">$routeProvider</a>&#39;s API.</p>
<p>The <code>$route</code> service is typically used in conjunction with the
<a href="api/ngRoute.directive:ngView"><code>ngView</code></a> directive and the
<a href="api/ngRoute.$routeParams"><code>$routeParams</code></a> service.</p>
</div></div>
<h2 id="dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$location">$location</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$routeParams">$routeParams</a></code>
</li>
</ul>
<div class="member method"><h2 id="methods">Methods</h2>
<ul class="methods"><li><h3 id="methods_reload">reload()</h3>
<div class="reload"><div class="ngroute-route-reload-page"><p>Causes <code>$route</code> service to reload the current route even if
<a href="api/ng.$location"><code>$location</code></a> hasn&#39;t changed.</p>
<p>As a result of that, <a href="api/ngRoute.directive:ngView">ngView</a>
creates new scope, reinstantiates the controller.</p>
</div></div>
</li>
</ul>
</div>
<div class="member property"><h2 id="properties">Properties</h2>
<ul class="properties"><li><h3 id="properties_current">current</h3>
<div class="current"><div class="ngroute-route-page"><p>Reference to the current route definition.
The route definition contains:</p>
<ul>
<li><code>controller</code>: The controller constructor as define in route definition.</li>
<li><p><code>locals</code>: A map of locals which is used by <a href="api/ng.$controller"><code>$controller</code></a> service for
controller instantiation. The <code>locals</code> contain
the resolved values of the <code>resolve</code> map. Additionally the <code>locals</code> also contain:</p>
<ul>
<li><code>$scope</code> - The current route scope.</li>
<li><code>$template</code> - The current route template HTML.</li>
</ul>
</li>
</ul>
</div></div>
</li>
<li><h3 id="properties_routes">routes</h3>
<div class="routes"><div class="ngroute-route-page"><p>Array of all configured routes.</p>
</div></div>
</li>
</ul>
</div>
<div class="member event"><h2 id="events">Events</h2>
<ul class="events"><li><h3 id="events_$routechangeerror">$routeChangeError</h3>
<div class="$routechangeerror"><div class="ngroute-route-routechangeerror-page"><p>Broadcasted if any of the resolve promises are rejected.</p>
</div><div class="inline"><h4 id="events_$routechangeerror_type">Type:</h4>
<div class="type">broadcast</div>
</div>
<div class="inline"><h4 id="events_$routechangeerror_target">Target:</h4>
<div class="target">root scope</div>
</div>
<h5 id="events_$routechangeerror_target_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>angularEvent</td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ngroute-route-routechangeerror-page"><p>Synthetic event object</p>
</div></td></tr><tr><td>current</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangeerror-page"><p>Current route information.</p>
</div></td></tr><tr><td>previous</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangeerror-page"><p>Previous route information.</p>
</div></td></tr><tr><td>rejection</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangeerror-page"><p>Rejection of the promise. Usually the error of the failed promise.</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="events_$routechangestart">$routeChangeStart</h3>
<div class="$routechangestart"><div class="ngroute-route-routechangestart-page"><p>Broadcasted before a route change. At this  point the route services starts
resolving all of the dependencies needed for the route change to occurs.
Typically this involves fetching the view template as well as any dependencies
defined in <code>resolve</code> route property. Once  all of the dependencies are resolved
<code>$routeChangeSuccess</code> is fired.</p>
</div><div class="inline"><h4 id="events_$routechangestart_type">Type:</h4>
<div class="type">broadcast</div>
</div>
<div class="inline"><h4 id="events_$routechangestart_target">Target:</h4>
<div class="target">root scope</div>
</div>
<h5 id="events_$routechangestart_target_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>angularEvent</td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ngroute-route-routechangestart-page"><p>Synthetic event object.</p>
</div></td></tr><tr><td>next</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangestart-page"><p>Future route information.</p>
</div></td></tr><tr><td>current</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangestart-page"><p>Current route information.</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="events_$routechangesuccess">$routeChangeSuccess</h3>
<div class="$routechangesuccess"><div class="ngroute-route-routechangesuccess-page"><p>Broadcasted after a route dependencies are resolved.
<a href="api/ngRoute.directive:ngView">ngView</a> listens for the directive
to instantiate the controller and render the view.</p>
</div><div class="inline"><h4 id="events_$routechangesuccess_type">Type:</h4>
<div class="type">broadcast</div>
</div>
<div class="inline"><h4 id="events_$routechangesuccess_target">Target:</h4>
<div class="target">root scope</div>
</div>
<h5 id="events_$routechangesuccess_target_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>angularEvent</td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ngroute-route-routechangesuccess-page"><p>Synthetic event object.</p>
</div></td></tr><tr><td>current</td><td><a href="" class="label type-hint type-hint-route">Route</a></td><td><div class="ngroute-route-routechangesuccess-page"><p>Current route information.</p>
</div></td></tr><tr><td>previous</td><td><a href="" class="label type-hint type-hint-route">Route</a><a href="" class="label type-hint type-hint-undefined">Undefined</a></td><td><div class="ngroute-route-routechangesuccess-page"><p>Previous route information, or undefined if current is
first route entered.</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="events_$routeupdate">$routeUpdate</h3>
<div class="$routeupdate"><div class="ngroute-route-routeupdate-page"><p>The <code>reloadOnSearch</code> property has been set to false, and we are reusing the same
instance of the Controller.</p>
</div><div class="inline"><h4 id="events_$routeupdate_type">Type:</h4>
<div class="type">broadcast</div>
</div>
<div class="inline"><h4 id="events_$routeupdate_target">Target:</h4>
<div class="target">root scope</div>
</div>
</div>
</li>
</ul>
</div>
<h2 id="example">Example</h2>
<div class="example"><div class="ngroute-route-page"><p>This example shows how changing the URL hash causes the <code>$route</code> to match a route against the
URL, and the <code>ngView</code> pulls in the partial.</p>
<p>Note that this example is using <a href="api/ng.directive:script"><code>inlined templates</code></a>
to get it working on jsfiddle as well.</p>
<h4 id="example_source">Source</h4>
<div source-edit="ngViewExample" source-edit-deps="angular.js angular-route.js script.js" source-edit-html="index.html-169 book.html chapter.html" source-edit-css="" source-edit-js="script.js-170" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-171" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-169" ng-html-wrap="ngViewExample angular.js angular-route.js script.js"></pre>
<script type="text/ng-template" id="index.html-169">
  <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> |
    <a href="Book/Scarlet">Scarlet Letter</a><br/>

    <div ng-view></div>
    <hr />

    <pre>$location.path() = {{$location.path()}}</pre>
    <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
    <pre>$route.current.params = {{$route.current.params}}</pre>
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
    <pre>$routeParams = {{$routeParams}}</pre>
  </div>
</script>
</div>
<div class="tab-pane" title="book.html">
<pre class="prettyprint linenums" ng-set-text="book.html"></pre>
<script type="text/ng-template" id="book.html">
  controller: {{name}}<br />
  Book Id: {{params.bookId}}<br />
</script>
</div>
<div class="tab-pane" title="chapter.html">
<pre class="prettyprint linenums" ng-set-text="chapter.html"></pre>
<script type="text/ng-template" id="chapter.html">
  controller: {{name}}<br />
  Book Id: {{params.bookId}}<br />
  Chapter Id: {{params.chapterId}}
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-170"></pre>
<script type="text/ng-template" id="script.js-170">
  angular.module('ngViewExample', ['ngRoute'])

  .config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl,
      resolve: {
        // I will cause a 1 second delay
        delay: function($q, $timeout) {
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl
    });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
  });

  function MainCntl($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
  }

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

  function ChapterCntl($scope, $routeParams) {
    $scope.name = "ChapterCntl";
    $scope.params = $routeParams;
  }
</script>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-171"></pre>
<script type="text/ng-template" id="scenario.js-171">
  it('should load and compile correct template', function() {
    element('a:contains("Moby: Ch1")').click();
    var content = element('.doc-example-live [ng-view]').text();
    expect(content).toMatch(/controller\: ChapterCntl/);
    expect(content).toMatch(/Book Id\: Moby/);
    expect(content).toMatch(/Chapter Id\: 1/);

    element('a:contains("Scarlet")').click();
    sleep(2); // promises are not part of scenario waiting
    content = element('.doc-example-live [ng-view]').text();
    expect(content).toMatch(/controller\: BookCntl/);
    expect(content).toMatch(/Book Id\: Scarlet/);
  });
</script>
</div>
</div><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="ngViewExample" ng-set-html="index.html-169" ng-eval-javascript="script.js-170"></div>
</div></div>
</div>