AngularJSは、ui-routeを使用して、複数レベルのネストされたルーティングの例を実装します

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

この記事では、ui-routeを使用して複数レベルのネストされたルーティングを実装し、次のように全員と共有するAngularJSの例について説明します。

まず、期待される効果:

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

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

第二に、トピック要件を分析し、依存関係を与え、プロジェクトを構築する

サービス:

(1)条件に従って人のデータcheckPeople.serviceを照会し、条件が与えられていなければすべて照会する。

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

2.コンポーネント:

(1)hello module:コンテンツを変更するには、ボタンをクリックします。

(2)peolpleListモジュール:人のリストを表示し、人の詳細を表示する人をクリックします。 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">
<div>
<a ui-sref="helloState">Hello</a>
<a ui-sref="aboutState">About</a>
<a ui-sref="peopleState">People</a>
</div>
<ui-view></ui-view>
</body>
</html>

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

(2)ng-app = "helloSolarSystem"は、helloSolarSystemモジュールからの解析を示します。

(3)ビュー<ui-view>を定義する</ ui-view>

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)stateProviderサービスのビューコントロールを設定します。たとえば、最初のビューコントローラのhelloState:ui-sref == "helloState"の場合、ルートはurl#/ helloStateの値に更新され、<ui-view> </ ui-view>に表示されるコンテンツは、<hello> </ hello>コンポーネントによって解析されるコンテンツです。

(4)ネストされたルートの実装:peopleStateという名前のビューコントローラが親ルートです。 peopleState.detailsという名前のビュー・コントローラーは、サブルーチンです。 親ルートは… / index.html#/ peopleState /と一致し、子ルートは一致します… / index.html#/ peopleState / detail / x(xは/ detail / idのIDです)値)。 絶対経路形式に変更した場合は、 '^ / 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()サービスが使用されているので、これは非同期要求であり、要求がいつ終了するかわからない。だから、世界は人々の配列を返します問題です。 $ http()。then()はPromiseオブジェクトなので、このオブジェクトを直接返すことができるので、 "function result.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


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

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. peolpeListモジュールを実装します。

peopleList.template.html


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

(1)ここで<ui-view> </ ui-view>は、peopleListのサブコンポーネントpepleDetailを表示するために使用されます。

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;
});
}
]
});

6. peopleDetailモジュールを実装する

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;
});
}
]
});

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


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ