AngularJSルーティングにより、異なるURLを介して異なるコンテンツにアクセスできます。
AngularJSは、マルチビューのシングルページWebアプリケーション（SPA）を実現できます。
通常、URLはhttp://runoob.com/first/pageですが、単一ページでは、Angularjsは＃+タグを使用して実装されています。
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
まず、$ routeproviderの構成オブジェクトプロパティメソッドを見てみましょう。
ルーティング設定オブジェクト解像度：
$ routeprovider.when（url（routing name）、{template：string（テンプレートプロンプト文字列）、テンプレート（テンプレートパスURL）、コントローラー：文字列、関数、または配列（現在のテンプレートでコントローラーを作成し、新しい$スコープスコープを生成）、コントローラ（コントローラエイリアス）、redirect（redirect、redirect（redirect、redirect）、redirecttut（redirect、redirect）、redirecttut（redirect、redirecttut） （現在のルートが依存するモジュール）}）;ルーティングを実装するための一般的なステップ：
ステップ1： ngrouteモジュールをインポートします
<script type = "text/javascript" src = "js/angular-route.min.js"> </scrip>
ステップ2：アプリケーションモジュールでngrouteを使用します
angular.module（ "routeapp"、["ngroute"]）
ステップ3： NG-Viewコマンドを使用します
<div ng-view ng-controller = 'defaultctrl'> </div>
ステップ4： $ routeproviderルーティングルールを構成します
.... config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider .when（ '/home'、{home.tpl.html '、controller：' homectrl '、}）.when（'/computer '、{templateurl：' computer.html '、'/when '、'/when、 'phone.html'、}）.when（ '/other'、{templateurl： 'other.tpl.html'、コントローラー： 'otherctrl'、}）}）...ステップ5：ハイパーリンクを介してルーティングを使用します
<ul> <li> <a href = "＃/home"> home </a> </li> <li> <a href = "＃/computer"> computer </a> </li> <li> <a href = "＃/phone"> mobile </a> </li> <li> <a href = "
完全なケース：
1 route.htmlページ
<html> <head> <Meta charset = "utf-8"> <title> angularjsルーティングインスタンス</title> <link rel = "styleSheet" type = "href =" href = "css/bootstrap.min.css"> </head> <body-app = 'routeapp'> < href = "＃/home"> home </a> </li> <li> <a href = "＃/computer"> computer </a> </li> <li> <a href = "＃/phone"> mobile </a> </li> <li> <a href = "＃/other">その他</a> ng-controller = 'defaultctrl'> </div> <スクリプトタイプ= "text/javascript" src = "js/jquery.min.js"> </script> <script type = "text/javascript" src = " src = "js/angular.min.js"> </script> <script> <text/javascript "src =" js/angular-route.min.js "> </script> <script> <text/ng-template" id = "home.tpl.html"> <h1 {{{data} </h1> </h1> </h1> type = "text/ng-template" id = "other.tpl.html"> <h1> {{data}} </h1> </script> <script = "text/javascript"> angular.module（ "Regeapp"、["ngroute"]）.config（ 。（ '/home'、{templateurl： 'home.tpl.html'、controller： 'homectrl'、}）.when（ '/computer'、{templateurl： 'computer.html'、}）.when（ '/電話'、{templateurl： 'temtml'、 '/ 'other.tpl.html'、コントローラー： 'otherctrl'、}）}]））））））））、function（$ scope）{$ scope.computers = [{id：0、name： "acr"、カテゴリ： "テスト"、価格：1.25}、 ID：2、name： "Apple"、category： "Test"、価格：4.25}]; }]; Controller（ "HomeCtrl"、function（$ scope、$ route）{$ scope = $ route; $ scope.data = "home home";}）.controller（ "otherctrl" </html>2.computer.htmlページ
<div> <table> <thead> <tr> <th> name </th> <th> category </th> <th> price </th> <th> {{data}} </th> </tr> </thead> <tbody> <td> {{item.category}} </td> <td> {{item.price |通貨}} </td> <td> <button ng-click = "deleteproduct（item）"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcreateproduct（item）"> edit </a> </tr> </tbody> </table> <div> <button ng-click = "editorcreateproduct（）"> add </a> </div> </div>3.phone.htmlページ
<div> <table> <thead> <tr> <th> name </th> <th> category </th> <th> price </th> <th> {{data}} </th> </tr> </thead> <tbody> <ttr ng-repeat = "アイテムのアイテム"> <td> {{it。 <td> {{item.category}} </td> <td> {{item.price |通貨}} </td> <td> <button ng-click = "deleteproduct（item）"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcreateproduct（item）"> edit </a> </tr> </tbody> </table> <div> <button ng-click = "editorcreateproduct（）"> add </a> </div> </div>ホームページをクリックします
「コンピューター」をクリックします
「モバイル」をクリックします
他をクリックします
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。