AngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介-jsチュートリアル-php.cn

AngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介

黄舟

リリース： 2017-05-27 10:33:39

オリジナル

911 人が閲覧しました

この記事では主に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=&#39;routingDemoApp&#39;>
<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(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,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([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

ログイン後にコピー

ルートを照合するには、when と else の 2 つのメソッドを使用します。 (実際には、上記の URL の後の / 文字と一致します)。最後に、ng-view ディレクティブを使用して、一致した文字に対応するフィールドまたはファイルを DOM に配置します。

多くの

属性がある場合。内部にコントローラーを設定すると、コントローラーは対応するフィールドまたはファイルに一致します。上記のコードの listController コントローラーと同じです。

ng-view ディレクティブには多くのルールがあります:

ルートを照合する場合:

1. 新しい現在のスコープを作成します。 2.
前のスコープを削除します。 3. 現在のテンプレート (コントローラーなど) を現在新しく作成されているスコープに関連付けます。 4. 組み込みの関連コントローラーがある場合は、それを現在のスコープに関連付けます。

以上がAngularJS 入門チュートリアル (1) - ルーティングの使用方法の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。