AngularJS「ルーティング」の紹介と使い方-H5 チュートリアル-php.cn

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

巴扎黑

リリース： 2017-07-21 14:05:30

オリジナル

1377 人が閲覧しました

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

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

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

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

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

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

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

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

1 3 5

ログイン後にコピー

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

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

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

 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js?1.1.11"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js?1.1.11"></script> 8  9     <script type="text/javascript">10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module('ngRouteExample', ['ngRoute'])12         .controller('a1', function ($scope, $route) { $scope.$route = $route;})13         .controller('a2', function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when('/a1', {17                 templateUrl: 'a1.html',18                 controller: 'a1'19             }).20             when('/a2', {21                 templateUrl: 'a2.html',22                 controller: 'a2'23             }).24             otherwise({25                 redirectTo: '/a2'26             });27         });28 </script>29 30   31 </head>32 33     <body ng-app="ngRouteExample" class="ng-scope">34           <script type="text/ng-template" id="a1.html">35               <h1> Home </h1>36           </script>37     38           <script type="text/ng-template" id="a2.html">39               <h1> About </h1>40           </script>41     42           <div> 43             <div id="navigation">  44               <a href="#/a1">这是a1</a>45               <a href="#/a2">这是a2</a>46             </div>47               48             <div ng-view="">49             </div>50           </div>51     </body>52 </html>

ログイン後にコピー

3. 分析

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

ログイン後にコピー

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

ログイン後にコピー

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

ログイン後にコピー

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

4. 最終的な外観は次のようになります。機能します 別のタグをクリックすると、次の ng-view=""> ここのページはローカルページである可能性があります。

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