ホームページ >ウェブフロントエンド >H5 チュートリアル >AngularJS「ルーティング」の紹介と使い方
AngularJS「ルーティング」の紹介と使い方
- 巴扎黑オリジナル
- 2017-07-21 14:05:301349ブラウズ
これらは、理論的には、あなた自身の将来の学習ニーズのためのものです。しかし、それでも真剣に受け止める必要があります。
以下の内容は、注意して使用および学習してください。
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. 最終的な外観は次のようになります。機能します 別のタグをクリックすると、次の
以上がAngularJS「ルーティング」の紹介と使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。