怎么在AngularJS中利用ui-route实现多层嵌套路由？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
目前创新互联已为近千家的企业提供了网站建设、域名、网络空间、
网站托管、企业网站设计、
北林网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
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
Title
（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:''
}).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服务的视图控制，例如第一个名为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
whats up solar sytem!
