$route

http://docs.angularjs.org/api/ngRoute.$route

概要
依存関係
reload()
current
routes
$routeChangeError
$routeChangeStart
$routeChangeSuccess
$routeUpdate
デモ

概要

$routeは、コントローラーとビュー(HTML部品)でディープリンクURLを使用するためのものです。 $location.url()を監視し、既存のroute定義へパスをマッピングすることを試みます。

ngRouteモジュールのインストールが必要です。 $routeProviderのAPIを通して、routeを定義することが出来ます。

$routeサービスは通常、ngViewディレクティブ、 $routeParamsサービスと組み合わせて使用されます。

依存関係

$location
$routeParams

reload()

$locationが変更されていなくても、$routeサービスへ現在のrouteの再読み込みを発生させます。この結果、ngViewは新しいスコープを作成し、コントローラーが再インスタンス化されます。

current

現在のrouteの定義を参照します。 routeの定義には下記のものが含まれます。

controller

route定義内で定義されたコントローラーのコンストラクタです。

locals

コントローラーをインスタンス化するための$controllerサービスによって使用されるlocalのマップです。 localは、resolveマップのresolve値を含みます。加えて、localは下記のものも含みます。

$scope - 現在のrouteスコープです。
$template - 現在のrouteのテンプレートHTMLです。

routes

全てのroute構成の配列です。

$routeChangeError

何らかのresolveのpromiseがrejecteされた場合に、ブロードキャストされます。

型: broadcast
ターゲット: rootスコープ

引数	説明
angularEvent	型：`Object` 総合的なイベントオブジェクトです。
current	型：`Route` 現在のroute情報です。
previous	型：`Route` 1つ前のroute情報です。
rejection	型：`Route` promiseのreject情報です。通常は、promise失敗のエラーです。

$routeChangeStart

route変更前にブロードキャストします。この時点で、routeサービスはroute変更を発生させるために必要な全ての依存関係のresolveを開始します。通常、routeプロパティのresolveで定義された依存関係はもちろん、ビューテンプレートの取得もこれに含まれます。全ての依存関係がresolveすると、$routeChangeSuccessが実行されます。

型: broadcast
ターゲット: ルートスコープ

引数説明

angularEvent

型：Object

総合的なイベントオブジェクトです。

型：Route

今後のroute情報です。

current

型：Route

現在のroute情報です。

$routeChangeSuccess

routeの依存関係がresolve後にブロードキャストされます。 ngViewリスナーは、ディレクティブのコントローラーをインスタンス化し、ビューを描画します。

型: broadcast
ターゲット: ルートスコープ

引数説明

angularEvent

型：Object

総合的なイベントオブジェクトです。

current

型：Route

現在のroute情報です。

型：Route、Undefined

前のroute情報です。また、現在のrouteが最初のものであれば、undefinedになります。

$routeUpdate

reloadOnSearchプロパティにfalseが設定されており、コントローラーの同じインスタンスが再利用されます。

型: broadcast
ターゲット: ルートスコープ

デモ

下記のサンプルは、URLハッシュを変更してrouteのURLに対して一致するものを$routeに取得させて、 ngViewを指定の部分に取り込む方法を示しています。

このサンプルは、インラインテンプレートを使用して、 jsfiddleのように動作していることに注意してください。

<!doctype html>
<html ng-app="ngViewExample">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}

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;
}

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/);
});

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。