AngularJS「ルーティング」の紹介と使い方

これらは、理論的には、あなた自身の将来の学習ニーズのためのものです。しかし、それでも真剣に受け止める必要があります。

以下の内容は、注意して使用および学習してください。

AngularJS における「ルーティング」の定義

AngularJS の概念は、最近、多くの同僚、クラスメート、友人がそれを使用することを私に勧めています。名前は聞いたことがあります

AngularJS が何であるかについては説明しませんが、これはまだ非常に興味深いものです

ここでは、初心者向けのチュートリアルである学習 Web サイトをお勧めしますが、その中のチュートリアルの多くは非常に簡単です。説明されていませんが、これは本当に始めるのに良い選択です

1. AngularJS とは何ですか? ルーティングについてはどうですか?

AngularJS ルーティングを使用すると、異なる URL を介して異なるコンテンツにアクセスできます。マルチビューのシングルページ Web アプリケーションは AngularJS を通じて実装できます

1 3 5

上記はそのプレゼンテーション形式です。実際、# 記号の後の内容はサーバーリクエストのように見えますか?のリクエスト。 必要なのは、# 以降のコンテンツの機能をクライアント側で実装することです。

AngularJS ルーティングは、# + タグ を使用して、異なる論理ページを区別し、異なるページを対応するコントローラーにバインドするのに役立ちます。

2. ルーティングの設定例

 1  2  3 <meta> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script></script> 7 <script></script> 8  9     <script>10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module(&#39;ngRouteExample&#39;, [&#39;ngRoute&#39;])12         .controller(&#39;a1&#39;, function ($scope, $route) { $scope.$route = $route;})13         .controller(&#39;a2&#39;, function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when(&#39;/a1&#39;, {17                 templateUrl: &#39;a1.html&#39;,18                 controller: &#39;a1&#39;19             }).20             when(&#39;/a2&#39;, {21                 templateUrl: &#39;a2.html&#39;,22                 controller: &#39;a2&#39;23             }).24             otherwise({25                 redirectTo: &#39;/a2&#39;26             });27         });28 </script>29 30   31 32 33     34           <script>35               <h1> Home 36           </script>37     38           <script>39               <h1> About 40           </script>41     42           <div> 43             <div>  44               <a>这是a1</a>45               <a>这是a2</a>46             </div>47               48             <div>49             </div>50           </div>51     52 

3. 分析

1 //包含了ngRoute 模块的2 angular.module('routingDemoApp',['ngRoute'])

1 //使用 ngView 指令，用来显示路由切换的页面2 <div></div>

 //                // //redirectTo，重定向的地址，可以是你想最开始加载的页面

ネイティブ HTML を作成するだけ2 つのファイルを a1.html と a2.html として直接指定します。パスは正しい必要があります (ここでは同じディレクトリに配置されています)

4. 最終的な外観は次のようになります。機能します 別のタグをクリックすると、次の

ng-view=""> ここのページはローカル ページである可能性があります。

以上がAngularJS「ルーティング」の紹介と使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。