AngularJS 路由

この章では、AngularJS ルーティングについて紹介します。

AngularJS ルーティングを使用すると、異なる URL を通じて異なるコンテンツにアクセスできます。

AngularJS を使用することで、マルチビューのシングルページ Web アプリケーション（single page web application、SPA）を実現できます。

通常、私たちのURLの形式は次のとおりですhttp://example.com/first/pageしかし、シングルページ Web アプリケーションでは AngularJS は#! + 标记実装、例えば：

http://example.com/#!/first
http://example.com/#!/second
http://example.com/#!/third

注意：Angular 1.6 より前のバージョンは、... を介して行われます。# + 标记实现路由。

上記のいずれかのリンクをクリックすると、サーバーへ要求するアドレスはすべて同じになります (http://example.com/)。#! の後ろの内容は、サーバーへの要求時にブラウザーによって無視されるためです。したがって、クライアント側で #! の後ろの内容の機能を実装する必要があります。AngularJS ルーティングは、... を介して実現します。#! + 标记異なる論理ページを区別し、異なるページを対応するコントローラーにバインドするのに役立ちます。

上記の図では、/ShowOrders と /AddNewOrder の 2 つの URL が作成されていることがわかります。各 URL には、対応するビューとコントローラーがあります。

次に、簡単な例を見てみましょう：

实例解析：

• 1、ルーティングを実装するJSファイル「angular-route.js」を読み込みました。

• 2、メインアプリケーションモジュールの依存モジュールとして ngRoute モジュールを含めます。

  angular.module('routingDemoApp',['ngRoute'])
  

• 3、ngViewディレクティブを使用します。

  <div ng-view></div>

  この div 内の HTML コンテンツは、ルートの変化に応じて変わります。

• 4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});
  }]);
  

AngularJS モジュールの config 関数は、ルーティングルールを構成するために使用されます。config API を使用することで、$routeProvider を構成関数に注入し、$routeProvider.whenAPI を使用してルーティングルールを定義します。

$routeProvider は、when(path,object) & otherwise(object) 関数を提供し、すべてのルートを順番に定義します。関数には2つのパラメータが含まれます:

• 最初のパラメータは URL または URL 正規表現ルールです。
• 2番目のパラメータはルーティング設定オブジェクトです。

---

ルーティング設定オブジェクト

AngularJS ルーティングは、異なるテンプレートを使用して実装することもできます。

$routeProvider.when 関数の最初のパラメータは URL または URL 正規表現ルールであり、2 番目のパラメータはルーティング設定オブジェクトです。

ルーティング設定オブジェクトの構文規則は次のとおりです：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

参数说明：

• template:

  単純な HTML コンテンツを ng-view に挿入するだけでよい場合は、このパラメータを使用します。

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  HTML テンプレートファイルを ng-view に挿入するだけでよい場合は、このパラメータを使用します。

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  上記のコードは、サーバーから views/computers.html ファイルのコンテンツを取得し、ng-view に挿入します。

• controller:

  function、string、または配列タイプで、現在のテンプレート上で実行される controller 関数であり、新しい scope を生成します。

• controllerAs:

  string型で、controllerのエイリアスを指定します。

• redirectTo:

  リダイレクト先のアドレス。

• resolve:

  現在の controller が依存する他のモジュールを指定します。

实例

其他扩展