點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

AngularJS使用ui-route實現多層嵌套路由

來源：懂視網責編：小OO 時間：2020-11-27 20:06:42

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模塊。

推薦度：

點擊下載本文 文檔為doc格式

導讀一、預期實現效果。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模塊。

本文主要介紹了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）定義視圖<ui-view></ui-view>

2. 配置路由app.config.js

（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的值）。如果改成絕對路由的形式，只需要寫成url:'^/detail/:id',這時子路由將匹配.../index.html#/detail/x（x是/detail/:id中的id的值）。

4. 實現checkPeople.service（根據條件查找people）

checkPeople.sercice.js

（1）在getData這個函數中，我們想要返回一個保存people信息的數組，但是由于使用$http().then()服務的時候，這是一個異步請求，我們并不知道請求什么時候結束，所以世界返回people數組是有問題的。我們注意到，$http().then()是一個Promise對象，所以我們可以想到直接將這個對象返回，這樣在就可以使用"函數的結果.then(function(data))"來得到異步請求拿來的數據data。

3. 實現getStateParams.service（獲取路由信息）

getStatePatams.service.js

（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

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）這里的<ui-view></ui-view>用來顯示peopleList的子組件pepleDetail

peopleList.component.js

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

7.源碼：https://github.com/liyuan-meng/uiRouter-app

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AngularJS使用ui-route實現多層嵌套路由

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現 js 路由

熱門焦點

AngularJS使用ui-route實現多層嵌套路由

AngularJS使用ui-route實現多層嵌套路由

AngularJS使用ui-route實現多層嵌套路由

最新推薦

猜你喜歡

熱門推薦