前提
まず、ページに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ルーティング情報を整理する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！