AngularJs ng-routeルートの詳細及び例コード

前提

まず、ページにangularとangularをインクルードする必要があります。-routeに注意して、angular-の前にangularを導入するため

これは主にangular-route.jsにwindow.angularというパラメータを渡す必要がありますが、このパラメータはangularが読み込まれた後にのみ出現します。

(function(window, angular, undefined) {
"use strict";
...
ngRouteModule.directive('ngView', ngViewFactory);
...
})(window, window.angular);

ダウンロードは公式サイトからダウンロードするか、bowerを使用してインストールしてください。

説明

　　ルート機能はrouteProviderサービスとng-viewと組み合わせて実現します、ng-viewはページテンプレートのマウントポイントを提供します。URLを切り替えて遷移を行うとき、異なるページテンプレートがng-viewの場所；そしてrouteProviderでルートのマッピングを設定します。

一般的には以下の2つの方法で設定されます：

when()：パスとパラメータを設定します;

otherwise：他のパス遷移を設定します。defaultと考えてください。

whenの第2引数：

controller：対応するパスのコントローラーファンクションまたは名前

controllerAs：コントローラーに別名を設定

template：対応するパスのページテンプレート、ng-viewの場所、例えば"<div>xxxx</div>"

templateUrl：対応するテンプレートのパス、例えば"src/xxx.html"

resolve：このパラメータについて詳しく説明します。この属性は、キー値対オブジェクトの形式で、ルート関連のコントローラーにサービスや値をバインドします。その後、実行結果の値や対応するサービスの参照をコントローラーに注入します。resolveがpromiseオブジェクトである場合、それが成功してから注入されます。この時、コントローラーはresolveの実行結果を待ちます。

詳細な例は以下のサンプルを参照してください。

redirectTo：リダイレクト先のアドレス

reloadOnSearch：アドレスが変更されたときだけ、対応するテンプレートをロードするかどうかを設定します；searchやparamsの変更ではテンプレートはロードされません

caseInsensitiveMatch：パスの大小文字を区別しない

ルートにはいくつかの一般的なイベントがあります：

$routeChangeStart：このイベントはルート遷移前に発生します

$routeChangeSuccess：このイベントはルート遷移が成功した後に発生します

$routeChangeError：このイベントはルート遷移が失敗した後に発生します

使用

ページ内で、URL遷移のボタンリンクを記述し、ng-viewタグ　　

 <div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a>/li>
   <li><a href="#/b">click b</a>/li>
  </ul>
  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>

その中で、ng-viewは要素やタグなどとして使用できます。

javascriptでは、遷移に関する設定を定義する必要があります

<script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){
  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!);
  });
  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 3 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '"/a'
   });
 });
 </script>

上記のコードでは、/bパスのresolveに関連付けられた遅延メソッドが一つあり、このメソッドはPromiseオブジェクトを返し、3秒後に結果が返されます。したがって、bページでは、3秒後に読み込みが成功します。

さらには、2つのhtmlを提供する必要があります：

a.html：

<div ng-controller="aController" style="height:500px;width:100%;background-color:green;">{{hello}}</div>

およびb.html：

<div ng-controller="bController" style="height:2500px;width:100%;background-color:blue;">{{hello}}</div>

这样，就可以实现路由的跳转了。

全部的代码可以参考：

<html ng-app="myApp">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="../../bower_components/angular/angular.js></script>
 <script src="../../bower_components/angular-route/angular-route.js></script>
</head>
<body>
 <div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a>/li>
   <li><a href="#/b">click b</a>/li>
  </ul>
  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>
 <script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){
  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!);
  });
  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 1 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '"/a'
   });
 });
 </script>
</body>
</html>

以上がAngularJSのng-routeルートの情報を整理し、今後も関連する情報を追加していく予定です。皆様の本サイトへのサポートに感謝します！

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる内容を見つけた場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください）で通報し、関連する証拠を提供してください。一旦確認がつき、本サイトは侵害疑いのコンテンツをすぐに削除します。

基礎教程