AngularJSルーティング
この章では、AngularJSルーティングを紹介します。
AngularJSルーティングにより、異なるURLを介して異なるコンテンツにアクセスできます。
AngularJSは、マルチビューのシングルページWebアプリケーション（SPA）を実現できます。
通常、URLはhttp://runoob.com/first/pageですが、単一ページのWebアプリケーションでは、angularjsは＃+タグを使用して実装されます。
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
上記のリンクのいずれかをクリックすると、サーバーに要求したアドレスは同じです（http://runoob.com/）。 ＃番号の後のコンテンツは、サーバーに要求するときにブラウザによって無視されるためです。そのため、クライアントの＃番号の後にコンテンツの関数を実装する必要があります。 AngularJSルーティングは、異なる論理ページを区別し、＃+タグを介して対応するコントローラーに異なるページをバインドするのに役立ちます。
上記の図では、2つのURLが作成されていることがわかります。各URLには、対応するビューとコントローラーがあります。
次に、簡単な例を見てみましょう。
<html> <head> <メタcharset = "utf-8"> <title> angularjsルーティング例 - 初心者のチュートリアル</title> </head> <body ng-app = 'routingdemoApp'> <h2> angularjsルーティングアプリケーション</h2> <ul> <li> <a href = " href = "＃/computers">コンピューター</a> </li> <li> <a href = "＃/printers"> print </a> </li> <li> <a href = "＃/blabla">その他</a> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/Angurar-route.js"> </script> angular.module（ 'routingdemoapp'、['ngroute']）.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider .when（ '/'、{the empplate： 'これはホームページ'}）。 .when（ '/printers'、{Template： 'これはプリンターページ}）。 </script> </body> </html>実行結果：
AngularJSルーティングアプリケーション
分析の例：
1.ルーティングを実装するJSファイルをロード：Angular-route.js。
2.メインアプリケーションモジュールの依存性モジュールとしてngrouteモジュールが含まれています。
Angular.module（ 'RoutingDemoApp'、['ngroute']）
3. ngviewディレクティブを使用します。
<div ng-view> </div>
このDIV内のHTMLコンテンツは、ルートの変更に応じて変更されます。
$ routeproviderを構成する、angularjs $ routeproviderはルーティングルールを定義するために使用されます。
module.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider .wh（ '/'、{これはホームページです '}）。 。AngularJSモジュールの構成関数は、ルーティングルールの構成に使用されます。 configapiを使用することにより、$ routeproviderを構成関数に挿入し、$ routeprovider.apiを使用してルーティングルールを定義することを要求します。
$ RouteProviderは、when（path、object）＆retsion（object）関数が順番にすべてのルートを定義し、関数に2つのパラメーターを含むことを提供します。
最初のパラメーターは、URLまたはURLの通常のルールです。
2番目のパラメーターは、ルーティング構成オブジェクトです。
ルーティング設定オブジェクト
AngularJSルーティングは、さまざまなテンプレートを介して実装することもできます。
$ routeproviderの最初のパラメーター。関数がURLまたはURLの通常のルールであり、2番目のパラメーターはルーティング構成オブジェクトです。
ルーティング構成オブジェクトの構文ルールは次のとおりです。
$ routeProvider.when（url、{template：string、templateurl：string、controller：string、function or array、controlleras：string、redirectto：string、function、resolve：object <key、function>}）;パラメーター説明：
テンプレート：
単純なHTMLコンテンツをng-viewに挿入する必要がある場合は、このパラメーターを使用してください。
.when（ '/computers'、{Template： 'これはコンピューター分類ページ'}）
templateurl：
ng-viewにHTMLテンプレートファイルを挿入する必要がある場合は、このパラメーターを使用します。
$ routeprovider.when（ '/computers'、{templateurl： 'Views/Computers.html'、}）;上記のコードは、サーバーからビュー/コンピューター.htmlファイルコンテンツを取得し、ng-viewに挿入します。
コントローラ：
関数、文字列、または配列タイプ、現在のテンプレートで実行されるコントローラー関数は、新しいスコープを生成します。
コントロール：
文字列タイプ、コントローラーのエイリアスを指定します。
リダイレクト：
リダイレクトのアドレス。
解決する：
現在のコントローラーが依存する他のモジュールを指定します。
例
<html> <head> <Meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script type = "text/javascript"> angular.module（ 'ngrouteexample'、['ngroute']） $ route;}）。コントローラー（ 'controller'、function（$ scope）{$ scope。$ route = $ route;}）。 templateurl： 'embedded.about.html'、コントローラー： 'controller'}）; </h1> </script> <script> <type = "text/ng-template" id = "embedded.about.html"> <h1> bout </h1> </script> <div> <div> "navigation"> <a href = "＃/home"> home </a> <a href = "＃/< </div> </div> </div> </body> </html>実行結果：
Homeabout
家
上記は、AngularJSルーティングに関する情報のコレクションです。 AngularJSプログラミングを支援できる学生を願っています。