怎么在AngularJS中利用ui-route實現(xiàn)多層嵌套路由？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

1. service:

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

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

2. components:

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

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

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

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

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

三、實現(xiàn)這個例子

1. 首頁index.html

  
  
  
  
  
  
  
  
  
  



  Hello
  About
  People

（1）導(dǎo)入lib中的文件以及所有用到的service和component服務(wù)的文件。

（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:''

    }).state('aboutState', {
      url: '/about',
      template: '
Its the UI-Router Hello Solar System app!
'

    }).state('peopleState', {
      url: '/peopleList',
      template:''

    }).state('peopleState.details', {
      url:'/detail/:id',
      template: ''
    })
  }
]);

（1）模塊名字：helloSolarSystem；

（2）注入'peopleList', 'peopleDetail', 'hello','ui.router'模塊。

（3）配置stateProvider服務(wù)的視圖控制，例如第一個名為helloState的視圖控制器：當(dāng)ui-sref == "helloState"的時候，路由更新為url的值#/helloState，并且中顯示的內(nèi)容為組件解析出的內(nèi)容。

（4）嵌套路由的實現(xiàn)：名為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. 實現(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這個函數(shù)中，我們想要返回一個保存people信息的數(shù)組，但是由于使用$http().then()服務(wù)的時候，這是一個異步請求，我們并不知道請求什么時候結(jié)束，所以世界返回people數(shù)組是有問題的。我們注意到，$http().then()是一個Promise對象，所以我們可以想到直接將這個對象返回，這樣在就可以使用"函數(shù)的結(jié)果.then(function(data))"來得到異步請求拿來的數(shù)據(jù)data。

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

4. 實現(xiàn)hello模塊

hello.template.html

  hello solar sytem!
  whats up solar sytem!