點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:21:49

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例:本文介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例，分享給大家，具體如下：一、預(yù)期實(shí)現(xiàn)效果： https://liyuan-meng.github.io/uiRouter-app/index.html （項(xiàng)目地址：https://github.com/liyuan-meng/uiRoute

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例:本文介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例，分享給大家，具體如下：一、預(yù)期實(shí)現(xiàn)效果： https://liyuan-meng.github.io/uiRouter-app/index.html （項(xiàng)目地址：https://github.com/liyuan-meng/uiRoute

本文介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例，分享給大家，具體如下：

一、預(yù)期實(shí)現(xiàn)效果：

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

（項(xiàng)目地址：https://github.com/liyuan-meng/uiRouter-app）

二、分析題目要求，給出依賴關(guān)系，構(gòu)建項(xiàng)目

1. service:

（1）根據(jù)條件查詢people數(shù)據(jù)checkPeople.service，不給出條件則查詢所有。

（2）得到路由信息getStateParams.service。

2. components:

（1）hello模塊：點(diǎn)擊button按鈕更改內(nèi)容。

（2）peolpleList模塊：顯示people列表，點(diǎn)擊people顯示people詳情。依賴于checkPeople.service模塊。

（3）peopleDetail模塊：顯示people詳情，依賴于checkPeople.service模塊和getStateParams.service模塊。

3. 構(gòu)建項(xiàng)目：

如圖所示：component目錄用來(lái)保存所有服務(wù)模塊和業(yè)務(wù)模塊，lib目錄保存外部引用（我是用的是angular.js1.5.8和ui-route0.2.18），app.config.js文件用來(lái)配置路由，index.html則作為入口文件。

三、實(shí)現(xiàn)這個(gè)例子

1. 首頁(yè)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）導(dǎo)入lib中的文件以及所有用到的service和component服務(wù)的文件。

（2）ng-app="helloSolarSystem"指明了從helloSolarSystem模塊開(kāi)始解析。

（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服務(wù)的視圖控制，例如第一個(gè)名為helloState的視圖控制器：當(dāng)ui-sref == "helloState"的時(shí)候，路由更新為url的值#/helloState，并且<ui-view></ui-view>中顯示的內(nèi)容為<hello></hello>組件解析出的內(nèi)容。

（4）嵌套路由的實(shí)現(xiàn)：名為peopleState的視圖控制器是父路由。名為peopleState.details的視圖控制器是子路由。這是一種相對(duì)路由方式，父路由將匹配.../index.html#/peopleState/，子路由將匹配.../index.html#/peopleState/detail/x（x是/detail/:id中的id的值）。如果改成絕對(duì)路由的形式，只需要寫(xiě)成url:'^/detail/:id',這時(shí)子路由將匹配.../index.html#/detail/x（x是/detail/:id中的id的值）。

4. 實(shí)現(xiàn)checkPeople.service（根據(jù)條件查找people）

checkPeople.sercice.js

'use strict';

//根據(jù)條件（參數(shù)）查找信息。
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這個(gè)函數(shù)中，我們想要返回一個(gè)保存people信息的數(shù)組，但是由于使用$http().then()服務(wù)的時(shí)候，這是一個(gè)異步請(qǐng)求，我們并不知道請(qǐng)求什么時(shí)候結(jié)束，所以世界返回people數(shù)組是有問(wèn)題的。我們注意到，$http().then()是一個(gè)Promise對(duì)象，所以我們可以想到直接將這個(gè)對(duì)象返回，這樣在就可以使用"函數(shù)的結(jié)果.then(function(data))"來(lái)得到異步請(qǐng)求拿來(lái)的數(shù)據(jù)data。

3. 實(shí)現(xiàn)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函數(shù)返回的是路由信息的最后一個(gè)數(shù)據(jù)，也就是people的id，這個(gè)service有些特殊，不夠通用，可能還需要優(yōu)化一下會(huì)更加合理。不過(guò)并不影響我們的需求。

4. 實(shí)現(xiàn)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. 實(shí)現(xiàn)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>用來(lái)顯示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. 實(shí)現(xiàn)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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： angu angularjs使用ui-route實(shí)現(xiàn)多層嵌套路由 angularjs使用ui-route實(shí)

熱門(mén)焦點(diǎn)

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例

最新推薦

猜你喜歡

熱門(mén)推薦