AngularJSの定義と使い方を簡単に説明 Routing_AngularJS

単一ページのアプリケーションでは、ビュー間の移動が特に重要になります。アプリケーションがますます複雑になるにつれて、いつ、どのページをユーザーに表示するかを正確に制御する方法が必要になります。

メイン ページに異なるテンプレートを導入することで、異なるページ間の切り替えをサポートできますが、そうすることの欠点は、埋め込まれたコードが増えて最終的には管理が困難になることです。

ng-include ディレクティブを使用して多くのテンプレートをビューに統合できますが、この状況を処理するより良い方法があり、ビューをレイアウト ビューとテンプレート ビューに分割し、特定のユーザー アクセス URL に応じて分割できます。希望のビューを表示します

これらの「ピース」をレイアウト テンプレートにまとめることができます

AngularJS は、$routeProvider ($route サービスのプロバイダー) でルートを宣言することで、上記のアイデアを実装します。

$routeProvider を使用すると、閲覧履歴 API をより有効に活用でき、ユーザーが今後使用するために現在のパスをブックマークとして保存できるようになります

アプリケーションでルーティングを設定するには、2 つのことを行う必要があります。まず、新しいページ コンテンツが保存されるレイアウト テンプレートを保存する場所を指定する必要があります。たとえば、すべてのページにヘッダーとフッターを追加したい場合は、次のようにレイアウト テンプレートをデザインできます:

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

ng-view ディレクティブは、テンプレートをレンダリングする高速 $routeProvider を使用します

次に、ルーティング情報を設定する必要があります。アプリケーションで $routeProvider を設定します

$routeProvider は、ルーティングを処理するための 2 つのメソッド (when と else) を提供します。 メソッドは 2 つのパラメータを受け取る場合、最初のパラメータは $location.path() です (「//」を直接使用しても問題ありません)

定義
ルートの定義は非常に簡単で、アプリケーションのメイン モジュールに ngRoute の依存関係を挿入するだけです

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

これで、アプリケーションのルートを定義できます。 $routeProvider はルーティング モジュールの .config() メソッドに挿入されます。上記のコードは、ルートを定義する 2 つの方法を示しています。

いつ()

when() メソッドには、照合するブラウザの URL とルーティング操作オブジェクトの 2 つのパラメータがあります。一般に、メイン ルートは「/」で表されることが多く、コントローラーでは $routeParams を使用して URL パラメーターを取得することもできます。

templateUrl: ルートジャンプを表すテンプレートを表示

コントローラー: コントローラー

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

そうでない場合()

otherwise() は、アプリケーションが指定されたルートを見つけられない場合にジャンプするルートを定義します

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

を使用します 定義されたルートを使用するには? ページのどの部分を変換するかを angular に伝える必要があります。これには ng-view ディレクティブを使用する必要があります

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

この方法では、

のみが更新され、ヘッダー/フッターは常に変更されません。