AngularJS使用用户界面路线实现多层嵌套路由的示例

本文介绍了AngularJS使用用户界面路线实现多层嵌套路由的示例，分享给大家，具体如下：

一、预期实现效果：

https://liyuan-meng.github.io/uiRouter-app/index.html

（项目地址：https://github。com/梨园-孟/uiRouter-app)

二、分析题目要求，给出依赖关系，构建项目

1 .服务：

(1)根据条件查询人数据检查人员。服务，不给出条件则查询所有。

(2)得到路由信息getStateParams.service。

2.组件：

你好模块：点击按钮按钮更改内容。

(2)人民列表模块：显示人列表，点击人显示人详情。依赖于检查人员。服务模块。

(3)人员详细信息模块：显示人详情，依赖于检查人员。服务模块和getStateParams.service模块。

3.构建项目：

如图所示：组件目录用来保存所有服务模块和业务模块，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 script src=' http :/lib/angular。js '/script script src=' http :/lib/angular-ui-route。js '/script script src=' http :/app。配置。js '/script script src=' http :/组件/核心/人员/检查人员。服务。js '/script script src=' http :/components/core/people/getstate params。服务。js/'脚本脚本src='http:/组件/你好/你好。组件。js '/script script src=' http :/组件/人员列表/人员列表。组件。js '/script script src=' http :/组件/人员-细节/人员-细节。组件。js '/script/head body ng-app=' hello oslarsystem ' div a ui-sref=' hello state ' hello/a ui-sref=' about state ' about/a ui-sref=' peopleState ' peoples/a/div ui-view/ui-view/body/html(1)导入解放运动中的文件以及所有用到的服务和成分服务的文件。

(2)ng-app='helloSolarSystem '指明了从helloSolarSystem模块开始解析。

(3)定义视图ui-view/ui-view

2.配置路由app.config.js

使用"严格";棱角分明。模块(' hello oslarsystem '，['peopleList '，' peopleDetail '，' hello '，' ui.router']).config(['$stateProvider '，function($ state provider){ $ state provider。状态(' hello state '，{ url: '/helloState '，template:'hello/hello' }).州(' aboutState '，{ url: '/about '，模板： ' H4这是用户界面-路由器你好太阳系app！/h4' }).状态(' peopleState '，{ url: '/peopleList '，template: '人物列表/人物列表' })。state('peopleState.details '，{ url:'/detail/:id '，模板： ' people-detail/people-detail ' })})])；(1)模块名字：helloSolarSystem

(2)注入peopleList '，' peopleDetail '，' hello '，' ui.router '模块。

(3)配置stateProvider服务的视图控制，例如第一个名为helloState的视图控制器：当ui-sref=='helloState '的时候，路由更新为全球资源定位器(统一资源定位符)的值#/helloState，并且ui-view/ui-view中显示的内容为你好组件解析出的内容。

(4)嵌套路由的实现：名为人民州的视图控制器是父路由。名为peopleState.details的视图控制器是子路由。这是一种相对路由方式，父路由将匹配./index.html#/peopleState/，子路由将匹配./index。html #/PeopleState/detail/x(x是/detail/:id中的编号的值)。如果改成绝对路由的形式，只需要写成url:'^/detail/:id'，这时子路由将匹配./index.html#/detail/x(x是/detail/:id中的编号的值)。

4.实现checkPeople.service(根据条件查找人)

checkPeople.sercice.js

使用"严格";//根据条件（参数)查找信息棱角分明。模块('人。检查人员'，['ui.router']).工厂(' CheckPeople '，['$http '，函数($ http){ return { getData : getData }；函数getData(field){ var people；var promise=$ http({ method : ' GET '，url: ' ./data/people.json' }).然后（函数（响应){ if(file){ people=response。数据。过滤器(函数(值){ if(Number(值。id==Number(file)){返回值；} })} else { people=response。数据；}返回人员；});回报承诺；} }]);(1)在得到一条数据这个函数中，我们想要返回一个保存人信息的数组，但是由于使用$http().然后()服务的时候，这是一个异步请求，我们并不知道请求什么时候结束，所以世界返回人数组是有问题的。我们注意到，$http().然后()是一个承诺对象，所以我们可以想到直接将这个对象返回，这样在就可以使用'函数的结果。然后（函数（数据))来得到异步请求拿来的数据数据。

3.实现getStateParams.service(获取路由信息)

getStatePatams.service.js

使用"严格";angular.module('getStateParams '，['ui.router']).工厂(' GetStateParams '，['$location '，函数($ location){ return { getParams 3360 getParams }；函数getParams(){ var partUrlArr=$ location。网址().split('/')；返回parturlar[parturlar。长度-1]；}}]);(1)这里的getParams函数返回的是路由信息的最后一个数据，也就是人的id，这个服务有些特殊，不够通用，可能还需要优化一下会更加合理。不过并不影响我们的需求。

4.实现你好模块

hello.template.html

div div ng-hide=' hide first content '你好太阳系！/div div ng-hide='！隐藏第一内容太阳系统怎么了！/div button ng-click=' ctlButton()' click/button/div hello。组件。射流研究…

使用"严格";angular.module('hello '，[]).组件(' hello '，{ templateUrl: ' ./组件/你好/你好。模板。html '，controller: ['$scope '，函数hello controller($ scope){ $ scope。hidefirstcontent=false$ scope。ctlbutton=function(){ this。HideFirstContent=！this . HideFirstContent }；} ] });5.实现人物列表模块：

peopleList.template.html

div ul a ng-repeat=' people ' ui-sref=' people state。详细信息({ id : item。id })'李{ { item。名称} }/Li/a/ul ui-view/ui-view/div(1)这里的ui-view/ui-view用来显示peopleList的子组件pepleDetail

peopleList.component.js

使用"严格";angular.module('peopleList '，['people.checkPeople']).组件(' peopleList '，{ templateUrl: ' ./组件/人员列表/人员列表。模板。html '，controller: ['CheckPeople '，' $scope '，函数人员列表控制器(检查人员，$ scope){ $ scope。人=[]；CheckPeople.getData().然后(函数(数据){ $ scope。人=数据；});} ] });6.实现人员详细信息模块

peopleDetail.template.html

ul ng-repeat='人员详细信息中的项目按$索引跟踪里名字：{{item.name}}/li li介绍：{ { item。intro } }/Li/ulpersedetail。组件。射流研究…

使用"严格";angular.module('peopleDetail '，['people.checkPeople '，' getstateprams ']).组件(' peopleDetail '，{ templateUrl: ' ./组件/人员-细节/人员-细节。模板。html '，controller: ['CheckPeople '，' GetStateParams '，' $scope '，函数人员详细信息控制器(check people，GetStateParams，$ scope){ $ scope。人物详情=[]；检查人们。getdata(getstateprams。getparams()).然后(函数(数据){ $ scope。PeopleDetails=数据；});} ] });7.源码：https://github。com/梨园-孟/uiRouter-app

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。