検索

ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS は ui-route を使用して多層ネストされたルーティングを実装します

AngularJS は ui-route を使用して多層ネストされたルーティングを実装します

小云云
小云云オリジナル
2018-01-11 13:13:332124ブラウズ

この記事では主に、ui-route を使用して多層ネストされたルーティングを実装する AngularJS の例を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. 期待される実装結果:

https://liyuan-meng.github.io/uiRouter-app/index.html

(プロジェクトアドレス: https://github.com/liyuan-meng/uiRouter -app)

2. 質問の要件を分析し、依存関係を与え、プロジェクトを構築します

1. サービス:

(1) 条件が指定されていない場合は、人物データ checkPeople.service をクエリします。 。

(2) ルーティング情報getStateParams.serviceを取得します。

2. コンポーネント:

(1) hello モジュール: ボタン ボタンをクリックしてコンテンツを変更します。

(2) peopleList モジュール: 人物リストを表示します。人物をクリックすると人物の詳細が表示されます。 checkPeople.service モジュールに依存します。

(3) peopleDetail モジュール: 人物の詳細を表示し、checkPeople.service モジュールと getStateParams.service モジュールに依存します。

3. プロジェクトをビルドします:

図に示すように、コンポーネント ディレクトリはすべてのサービス モジュールとビジネス モジュールの保存に使用され、lib ディレクトリは外部参照の保存に使用されます (私は angular.js1 を使用します)。 5.8 および ui-route0.2.18) では、app.config.js ファイルがルーティングの構成に使用され、index.html がエントリ ファイルとして使用されます。

3. この例を実装します

1. ホームページindex.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./lib/angular.js"></script>
  <script src="./lib/angular-ui-route.js"></script>
  <script src="./app.config.js"></script>
  <script src="./components/core/people/checkPeople.service.js"></script>
  <script src="./components/core/people/getStateParams.service.js"></script>
  <script src="./components/hello/hello.component.js"></script>
  <script src="./components/people-list/people-list.component.js"></script>
  <script src="./components/people-detail/people-detail.component.js"></script>
</head>
<body ng-app="helloSolarSystem">
<p>
  <a ui-sref="helloState">Hello</a>
  <a ui-sref="aboutState">About</a>
  <a ui-sref="peopleState">People</a>
</p>

<ui-view></ui-view>

</body>
</html>

(1) lib内のファイルと、使用されるすべてのサービスおよびコンポーネントのサービスファイルをインポートします。

(2) ng-app="helloSolarSystem" は、解析が helloSolarSystem モジュールから開始されることを指定します。

(3) ビューの定義 5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a

2. ルーティングの構成 app.config.js


&#39;use strict&#39;;

angular.module("helloSolarSystem", [&#39;peopleList&#39;, &#39;peopleDetail&#39;, &#39;hello&#39;,&#39;ui.router&#39;]).

  config([&#39;$stateProvider&#39;, function ($stateProvider) {

    $stateProvider.state(&#39;helloState&#39;, {
      url: &#39;/helloState&#39;,
      template:&#39;<hello></hello>&#39;

    }).state(&#39;aboutState&#39;, {
      url: &#39;/about&#39;,
      template: &#39;<h4>Its the UI-Router Hello Solar System app!</h4>&#39;

    }).state(&#39;peopleState&#39;, {
      url: &#39;/peopleList&#39;,
      template:&#39;<people-list></people-list>&#39;

    }).state(&#39;peopleState.details&#39;, {
      url:&#39;/detail/:id&#39;,
      template: &#39;<people-detail></people-detail>&#39;
    })
  }
]);

(1) モジュール名: helloSolarSystem;

(2) 「peopleList」、「peopleDetail」、「hello」、「ui.router」モジュールを挿入します。

(3) helloState という名前の最初のビュー コントローラーなど、stateProvider サービスのビュー コントロールを構成します。ui-sref == "helloState" の場合、ルートは URL #/helloState および 894552bb197b9cda917f62c731086549> で表示されるコンテンツは、5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34 によって解析されたコンテンツです。

(4) ネストされたルーティングの実装: peopleState という名前のビュー コントローラーが親ルートです。 peopleState.details という名前のビュー コントローラーは子ルートです。これは相対ルーティング方法です。親ルートは.../index.html#/peopleState/ に一致し、子ルートは.../index.html#/peopleState/detail/x に一致します (x は /detail/)。 :id ) の id の値。絶対ルーティングに変更する場合は、url:'^/detail/:id' と記述するだけで、サブルートは.../index.html#/detail/x に一致します (x は /detail/ にあります)。 :id) ID 値)。

4. checkPeople.serviceの実装（条件に基づいて人物を検索）

checkPeople.sercice.js


&#39;use strict&#39;;

//根据条件（参数）查找信息。
angular.module(&#39;people.checkPeople&#39;, [&#39;ui.router&#39;]).
  factory(&#39;CheckPeople&#39;, [&#39;$http&#39;, function ($http) {
    return {
      getData: getData
    };
    function getData(filed) {
      var people;
      var promise = $http({
        method: &#39;GET&#39;,
        url: &#39;./data/people.json&#39;
      }).then(function (response) {
        if (filed) {
          people = response.data.filter(function (value) {
            if (Number(value.id) === Number(filed)) {
              return value;
            }
          })
        } else {
          people = response.data;
        }
        return people;
      });
      return promise;
    }
  }]);

(1) getData関数では人物情報を保存するために配列を返したいのですが、 $http().then() が処理されるとき、これは非同期リクエストであるため、リクエストがいつ終了するかわからないため、people 配列を返すのに問題が発生します。 $http().then() が Promise オブジェクトであることに気付きました。そのため、このオブジェクトを直接返すことを考えることができます。これにより、「function.then(function(data)) の結果」を使用して非同期リクエストを取得できます。来るデータデータ。

3. getStateParams.service の実装 (ルーティング情報の取得)

getStatePatams.service.js


"use strict";

angular.module("getStateParams", [&#39;ui.router&#39;]).
  factory("GetStateParams", ["$location", function ($location) {
    return {
      getParams: getParams
    };
    function getParams() {
      var partUrlArr = $location.url().split("/");
      return partUrlArr[partUrlArr.length-1];
    }
}]);

(1) ここでの getParams 関数は、ルーティング情報の最後のデータ、つまり人の ID を返します。このサービスはやや特殊であり、十分に汎用的ではありません。より合理的にするために最適化する必要があるかもしれません。しかし、それは私たちのニーズには影響しません。

4. hello モジュールを実装します

hello.template.html


<p>
  <p ng-hide="hideFirstContent">hello solar sytem!</p>
  <p ng-hide="!hideFirstContent">whats up solar sytem!</p>
  <button ng-click="ctlButton()">click</button>
</p>

hello.component.js


&#39;use strict&#39;;

angular.module("hello", [])
  .component(&#39;hello&#39;, {
    templateUrl: &#39;./components/hello/hello.template.html&#39;,
    controller: ["$scope", 
      function HelloController($scope) {
        $scope.hideFirstContent = false;
        $scope.ctlButton = function () {
          this.hideFirstContent = !this.hideFirstContent;
        };
      }
    ]
  });

5. peopleList モジュールを実装します:

peopleList.template.html


りー

(1) ここの 5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a は、peopleList

peopleList.component.js


<p>
  <ul>
    <a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
      <li>{{item.name}}</li>
    </a>
  </ul>
  <ui-view></ui-view>
</p>

6 のサブコンポーネント pepleDetail を表示するために使用されます。 peopleDetail.template.html

&#39;use strict&#39;;

angular.module("peopleList", [&#39;people.checkPeople&#39;])
  .component(&#39;peopleList&#39;, {
    templateUrl: &#39;./components/people-list/people-list.template.html&#39;,
    controller: [&#39;CheckPeople&#39;,&#39;$scope&#39;,
      function PeopleListController(CheckPeople, $scope) {
        $scope.people = [];
        CheckPeople.getData().then(function(data){
          $scope.people = data;
        });
      }
    ]
  });

peopleDetail.component.js

<ul ng-repeat="item in peopleDetails track by $index">
  <li>名字： {{item.name}}</li>
  <li>介绍： {{item.intro}}</li>
</ul>

7. ソースコード: https://github.com/liyuan-meng/uiRouter-app

関連する推奨事項:

ルーティング Ui-router AngularJS でのモジュール使用のサンプル コード


angularJS での ui-router モジュールと ng-grid モジュールの簡単な分析

ui-router_html/css_WEB-ITnose の使用法

以上がAngularJS は ui-route を使用して多層ネストされたルーティングを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html angular JS function 对象 promise 异步 github http https ui
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：nginxの速度制限・接続数制限について詳しく解説次の記事：nginxの速度制限・接続数制限について詳しく解説

関連記事

続きを見る