首頁  >  文章  >  web前端  >  在AngularJS中使用ui-route實作多層嵌套路由(詳細教學)

在AngularJS中使用ui-route實作多層嵌套路由(詳細教學)

亚连
亚连原創
2018-06-12 17:10:071722瀏覽

這篇文章主要介紹了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)定義視圖5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a

2. 設定路由app.config.js

&#39;use strict&#39;;

angular.module("helloSolarSystem", [&#39;peopleList&#39;, &#39;peopleDetail&#39;, &#39;hello&#39;,&#39;ui.router&#39;]).

  config([&#39;$stateProvider&#39;, function ($stateProvider) {

    $stateProvider.state(&#39;helloState&#39;, {
      url: &#39;/helloState&#39;,
      template:&#39;<hello></hello>&#39;

    }).state(&#39;aboutState&#39;, {
      url: &#39;/about&#39;,
      template: &#39;<h4>Its the UI-Router Hello Solar System app!</h4>&#39;

    }).state(&#39;peopleState&#39;, {
      url: &#39;/peopleList&#39;,
      template:&#39;<people-list></people-list>&#39;

    }).state(&#39;peopleState.details&#39;, {
      url:&#39;/detail/:id&#39;,
      template: &#39;<people-detail></people-detail>&#39;
    })
  }
]);

(1)模組名字:helloSolarSystem;

(2)注入'peopleList', 'peopleDetail', 'hello','ui.router'模組。

(3)配置stateProvider服務的視圖控制,例如第一個名為helloState的視圖控制器:當ui-sref == "helloState"的時候,路由更新為url的值#/helloState,且5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a中顯示的內容為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(根據條件尋找people)

checkPeople.sercice.js

&#39;use strict&#39;;

//根据条件(参数)查找信息。
angular.module(&#39;people.checkPeople&#39;, [&#39;ui.router&#39;]).
  factory(&#39;CheckPeople&#39;, [&#39;$http&#39;, function ($http) {
    return {
      getData: getData
    };
    function getData(filed) {
      var people;
      var promise = $http({
        method: &#39;GET&#39;,
        url: &#39;./data/people.json&#39;
      }).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", [&#39;ui.router&#39;]).
  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

&#39;use strict&#39;;

angular.module("hello", [])
  .component(&#39;hello&#39;, {
    templateUrl: &#39;./components/hello/hello.template.html&#39;,
    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)這裡的5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a用來顯示peopleList的子元件pepleDetail

peopleList.component .js

&#39;use strict&#39;;

angular.module("peopleList", [&#39;people.checkPeople&#39;])
  .component(&#39;peopleList&#39;, {
    templateUrl: &#39;./components/people-list/people-list.template.html&#39;,
    controller: [&#39;CheckPeople&#39;,&#39;$scope&#39;,
      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

&#39;use strict&#39;;

angular.module("peopleDetail", [&#39;people.checkPeople&#39;, &#39;getStateParams&#39;])
  .component(&#39;peopleDetail&#39;, {
    templateUrl: &#39;./components/people-detail/people-detail.template.html&#39;,
    controller: [&#39;CheckPeople&#39;, &#39;GetStateParams&#39;, &#39;$scope&#39;,
      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元件中如何實現全域註冊和局部註冊

以上是在AngularJS中使用ui-route實作多層嵌套路由(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn