ホームページ > 記事 > ウェブフロントエンド > ui-route を使用して AngularJS でマルチレイヤーのネストされたルーティングを実装する (詳細なチュートリアル)
ui-route を使用して AngularJS でマルチレイヤーのネストされたルーティングを実装する (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-12 17:10:071722ブラウズ
この記事では主に、ui-route を使用して多層ネストされたルーティングを実装する AngularJS の例を紹介し、参考として提供します。
この記事では、ui-route を使用して多層のネストされたルーティングを実装する例を紹介します。詳細は次のとおりです。
1. 期待される実装効果:
//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
'use strict';
angular.module("helloSolarSystem", ['peopleList', 'peopleDetail', 'hello','ui.router']).
config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('helloState', {
url: '/helloState',
template:'<hello></hello>'
}).state('aboutState', {
url: '/about',
template: '<h4>Its the UI-Router Hello Solar System app!</h4>'
}).state('peopleState', {
url: '/peopleList',
template:'<people-list></people-list>'
}).state('peopleState.details', {
url:'/detail/:id',
template: '<people-detail></people-detail>'
})
}
]);(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
'use strict';
//根据条件（参数）查找信息。
angular.module('people.checkPeople', ['ui.router']).
factory('CheckPeople', ['$http', function ($http) {
return {
getData: getData
};
function getData(filed) {
var people;
var promise = $http({
method: 'GET',
url: './data/people.json'
}).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", ['ui.router']).
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
'use strict';
angular.module("hello", [])
.component('hello', {
templateUrl: './components/hello/hello.template.html',
controller: ["$scope",
function HelloController($scope) {
$scope.hideFirstContent = false;
$scope.ctlButton = function () {
this.hideFirstContent = !this.hideFirstContent;
};
}
]
});5. peopleList モジュールを実装します:
peopleList.template.html
<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>(1) ここに5643c5c8ec46989a1440c123e54787f3 142226fc0f7a4611fbee3f36258ad78a peopleList
peopleList.component.js'use strict';
angular.module("peopleList", ['people.checkPeople'])
.component('peopleList', {
templateUrl: './components/people-list/people-list.template.html',
controller: ['CheckPeople','$scope',
function PeopleListController(CheckPeople, $scope) {
$scope.people = [];
CheckPeople.getData().then(function(data){
$scope.people = data;
});
}
]
});のサブコンポーネントpepleDetailを表示するために使用されますpeopleDetail.template.html<ul ng-repeat="item in peopleDetails track by $index">
<li>名字： {{item.name}}</li>
<li>介绍： {{item.intro}}</li>
</ul>peopleDetail.component.js'use strict';
angular.module("peopleDetail", ['people.checkPeople', 'getStateParams'])
.component('peopleDetail', {
templateUrl: './components/people-detail/people-detail.template.html',
controller: ['CheckPeople', 'GetStateParams', '$scope',
function peopleDetailController(CheckPeople, GetStateParams, $scope) {
$scope.peopleDetails = [];
CheckPeople.getData(GetStateParams.getParams()).then(function(data){
$scope.peopleDetails = data;
});
}
]
}); 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 関連記事:
JSスクリプトを使用してロード後に対応するコールバック関数を実装する方法
vue+webpackを使用してパッケージ化されたファイルの404ページ空白の問題を解決する方法
デバッグとWebpack プロジェクト ファイルによる独立したパッケージング構成 (詳細なチュートリアル)
vue-cli+webpack プロジェクトを通じてプロジェクト名を変更する方法
vue コンポーネントでグローバル登録とローカル登録を実装する方法
以上がui-route を使用して AngularJS でマルチレイヤーのネストされたルーティングを実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。