ホームページ > 記事 > ウェブフロントエンド > AngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介
AngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介
- 黄舟オリジナル
- 2017-05-27 10:33:39879ブラウズ
この記事では主にAngularJSルーティングの使い方を紹介し、AngularJSルーティングの概念、機能、基本的な使い方方法を簡単に分析します。必要な友人は参考にしてください
この記事では、AngularJSルーティングの使い方を説明します。 AngularJS ルーティングと例。参考のために皆さんと共有してください。詳細は次のとおりです: 現時点で理解されているのは、この NG ルーティング モジュールは複数のビュー を備えた単一ページの開発に使用できるということです。
最初にすべてのコードを投稿します:HTML:
<!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app='routingDemoApp'> <h2>AngularJS 路由应用</h2> <ul> <li><a href="#/" rel="external nofollow" >首页</a></li> <li><a href="#/computers" rel="external nofollow" >电脑</a></li> <li><a href="#/user" rel="external nofollow" >用户</a></li> <li><a href="#/blabla" rel="external nofollow" >其他</a></li> </ul> <p ng-view></p> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="test.js"></script> </body> </html>
list.html:
<p>
<h1>HI,这里是list.html</h1>
<h2>{{name}}</h2>
</p>
JS:
var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{
template:'这是电脑分类页面'
})
.when('/user',{templateUrl:'list.html',controller:'listController'})
.otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
$scope.name="ROSE";
}); まず第一に、私はAngular1.5を使用しているので、次のことを行う必要があります。追加でインポートします angular-route.js:<script src="angular.min.js"></script> <script src="angular-route.min.js"></script>NG でルーティングを使用するには、まず特定のモジュールでルーティングを定義する必要があります:
.config(['$routeProvider', function($routeProvider){
//内容
} ルートを照合するには、when と else の 2 つのメソッドを使用します。 (実際には、上記の URL の後の / 文字と一致します)。最後に、ng-view ディレクティブを使用して、一致した文字に対応するフィールドまたはファイルを DOM に配置します。 多くの 属性がある場合。内部にコントローラーを設定すると、コントローラーは対応するフィールドまたはファイルに一致します。上記のコードの listController コントローラーと同じです。
ng-view ディレクティブには多くのルールがあります:ルートを照合する場合:
1. 新しい現在のスコープを作成します。 2.
前のスコープを削除します。 3. 現在のテンプレート (コントローラーなど) を現在新しく作成されているスコープに関連付けます。 4. 組み込みの関連コントローラーがある場合は、それを現在のスコープに関連付けます。
以上がAngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。