前提
まず、ページにAngularとAngular-Routeを導入する必要があります。 Angular-routeの前にAngularを導入する必要があることに注意してください。
<スクリプトsrc = "../../ bower_components/angular/angular.js"> </script>
<スクリプトsrc = "../../ bower_components/angular-route/angular-route.js"> </script>
これは主に、Angular-route.jsがWindow.Angularパラメーターを渡す必要があるためです。このパラメーターは、Angularがロードされた後にのみ表示されます。
((function(window、angular、undefined){'sprict'; ... ngroutemodule.directive( 'ngview'、ngviewfactory); ...})(window、window.angular);公式Webサイトにダウンロードするか、Bowerを使用してインストールできます。
説明する
ルーティング関数は、RouteProviderサービスとNG-Viewによって実装されます。 NG-Viewは、ページテンプレートのマウントポイントを提供するのと同等です。ジャンプ用のURLを切り替えると、NG-Viewの場所に異なるページテンプレートが配置されます。次に、RouteProviderを使用してルートマッピングを構成します。
一般的に2つの方法があります。
when():パスとパラメーターを構成します。
それ以外の場合:他のパスジャンプを構成すると、デフォルトと考えることができます。
いつの2番目のパラメーター
コントローラー:対応するパスのコントローラー機能または名前
コントロール:コントローラーにエイリアス名を付けます
テンプレート:パスに対応するページテンプレートは、「<div> xxxx </div>」などのng-viewに表示されます。
TemplateUrl:「src/xxx.html」などのテンプレートに対応するパス
解決:このパラメーターは、このプロパティがキー価値ペアオブジェクトの形でサービスまたは値をルーティング関連のコントローラーにバインドするという事実に焦点を当てています。次に、実行結果値または対応するサービスリファレンスがコントローラーに注入されます。 ResolveがPromiseオブジェクトである場合、コントローラーに注入される前に正常に実行されるまで待ちます。この時点で、コントローラーは実行の結果が解決されるのを待ちます。
詳細な例については、次の例を参照してください。
リダイレクト:アドレスをリダイレクトします
reloadonsearch:対応するテンプレートがアドレスが変更されたときにのみロードされるかどうかを設定します。検索もパラメージもロードされません。
caseinsensitivematch:パスはケースに敏感です
ルーティングに一般的に使用されるイベントがいくつかあります。
$ RegeChangestart:このイベントは、ルートがジャンプする前にトリガーされます
$ RegeChangesuccess:このイベントは、ルートジャンプが成功した後にトリガーされます
$ routeChangeError:このイベントは、ルートジャンプが失敗した後に解雇されます
使用
ページで、URLジャンプとNG-Viewタグへのボタンリンクを書き込みます
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a">クリックa </a> </li> <li> <a href = "#/b">クリックb </a> </li> </ul> <ng-view> </ng-view> <!
その中で、NG-Viewは要素またはラベルなどと見なすことができます。
JavaScriptで定義する必要がある関連構成
<script type = "text/javascript"> angular.module( "myApp"、["ngroute"]).controller( "acontroller"、function($ scope、$ route){$ scope.hello = "hello、a!";}).controller( "bcontroller"、$ scope = " .controller( "myctrl"、function($ scope、$ location){$ scope。$ on( "$ viewcontentloaded"、function(){console.log( "ng-viewコンテンツロード!"); $ scope。$ on( "$ routeechangestart"、unter(event、curne) console.log( "ルート変更!"); }).config(function($ routeprovider、$ locationprovider){$ routeprovider .when( '/a'、{templateurl: 'a.html'、コントローラー: 'acontroller'})。 2番目の遅延:$ q、$ q.defer(); </script>上記のコードでは、 /bパスの解決は遅延方法に関連付けられています。このメソッドは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"> </</> < src = "../../ bower_components/angular-route/angular-route.js"> </script> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "#/a" <ng-view> </ng-view> <! - <div ng-view> </div> - > </div> <script type = "text/javascript"> angular.module( "myapp"、["ngroute"]).controller( "acontroller"、$ scope、$ scope = " .Controller( "BController"、function($ scope){$ scope.hello = "hello、b!";}).controller( "myctrl"、function($ scope、$ location){$ scope。$ on( "$ viewcontentloaded"、function(){console.log( "ng-view loaded!"); $ scope。$ on( "$ routechangestart"、function(event、next、current){//event.preventdefault(); }).config(function($ routeprovider、$ locationprovider){$ routeprovider .when( '/a'、{templateurl: 'a.html'、コントローラー: 'acontroller'})。 2番目の遅延:$ q、$ q.defer(); </script> </body> </html>上記は、Angularjs ng-routeルーティング情報を整理する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます!