AngularJSルーティング
ページのあるビューから別のビューにジャンプできることは、シングルページアプリケーションにとって重要です。アプリケーションがますます複雑になるにつれて、使用中にユーザーが見るインターフェイスを管理するための合理的な方法が必要です。 AngularJSは、ビューをレイアウトとテンプレートビューに分割し、ユーザーが現在アクセスしているURLに従って対応するビューを表示する実践を行います。
この記事では、AngularJSルーティングの簡単な例を説明し、それに関与する概念のいくつかに言及しています。
1。レイアウトページ
引用スクリプト：
<Script src = "../ scripts/jquery-1.9.1.min.js"> </script> <script src = "../ scripts/angular.min.js"> </script> <script src = "../ scripts/angular-route.min.js"> </script>
ページのレイアウトは比較的簡単です：
<div> <ul> <li> <a href = "＃page1"> Go Page 1 </a> </li> <li> <a href = "＃page2"> go page 2 </a> </li> <li> <a href = "＃other">他のページ</a> </a> </li> </ul>
NG-Viewは、Ngrouteモジュールによって提供される特別な指令で、AngularJSにテンプレートのレンダリングを行う場所を指示します。この例では、以下のDIVにレンダリングする必要があるコンテンツを配置します。上記の3つのAリンクは、それぞれ3つのビュービューを指します。
2。テンプレートページ
それぞれsubpage_1.htmlとsubpage_2.htmlと呼ばれる2つのテンプレートページを作成します。
3。ルーティングルールルーティング構成
Angular.module（ "myrouteapp"、["ngroute"]）.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider .when（ "/page1"、{templateurl： "subpage_1.html"}）。 "subpage_2.html"}）。アプリケーションの依存関係としてngrouteモジュールをロードします。構成関数を使用してモジュールまたはアプリケーションのルートを定義し、AngularJSが提供する2つの方法を使用してアプリケーションにルートを定義します。
templateurl：
アプリケーションは、TemplateUrlプロパティで指定されたパスに基づいて、XHR（または$ TemplateCacheから読み取る）を介してビューを読み取ります。このテンプレートを見つけて読み取ることができる場合、AngularJSはテンプレートの内容をNG-Viewディレクティブを使用してDOM要素にレンダリングします。
リダイレクト：
Redirecttoプロパティの値が文字列である場合、パスはこの値に置き換えられ、ルーティングの変更はターゲットパスに従ってトリガーされます。 Redirecttoプロパティの値が関数である場合、パスは関数の返品値に置き換えられ、ルーティングの変更はこのターゲットパスに従ってトリガーされます。
実行結果
[1ページ]をクリックします
[2ページ]をクリックします
上記の角度ルーティングルートの例コードは、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。