這篇文章主要介紹了AngularJS使用ui-route實現多層嵌套路由的範例,現在分享給大家,也給大家做個參考。
本文介紹了AngularJS使用ui-route實作多層巢狀路由的範例,分享給大家,如下:
一、預期實作效果:
https://liyuan-meng.github.io/uiRouter-app/index.html
(專案網址:https://github.com/liyuan-meng/uiRouter-app)
二、分析題目要求,給出依賴關係,建構項目
1. service:
(1)根據條件查詢people資料checkPeople. service,不給條件則查詢所有。
(2)得到路由資訊getStateParams.service。
2. components:
(1)hello模組:點選button按鈕更改內容。
(2)peolpleList模組:顯示people列表,點擊people顯示people詳情。依賴checkPeople.service模組。
(3)peopleDetail模組:顯示people詳情,依賴checkPeople.service模組和getStateParams.service模組。
3. 建置專案:
如圖:component目錄用來保存所有服務模組和業務模組,lib目錄保存外部引用(我是用的是angular.js1.5.8和ui-route0.2.18),app.config.js檔案用來設定路由,index.html則是入口檔案。
三、實作這個範例
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中的檔案以及所有用到的service和component服務的文件。
(2)ng-app="helloSolarSystem"指明了從helloSolarSystem模組開始解析。
(3)定義視圖
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,且
(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(根據條件尋找people)
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這個函數中,我們想要回傳一個保存people資訊的數組,但是由於使用$http().then()服務的時候,這是一個非同步請求,我們並不知道請求什麼時候結束,所以世界返回people數組是有問題的。我們注意到,$http().then()是一個Promise對象,所以我們可以想到直接將這個對象返回,這樣在就可以使用"函數的結果.then(function(data))"來得到異步請求拿來的資料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函數傳回的是路由資訊的最後一個數據,也就是people的id,這個service有些特殊,不夠通用,可能還需要優化一下會比較合理。不過並不影響我們的需求。
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. 實作peolpeList模組:
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)這裡的
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; }); } ] });
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
透過webpack專案如何實現調試以及獨立打包設定檔(詳細教學)
以上是在AngularJS中使用ui-route實作多層嵌套路由(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!