频道导航

AngularJS使用ui-route实现多层嵌套路由的示例

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS使用ui-route实现多层嵌套路由的示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了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

<Meta charset="UTF-8"> Title

（1）导入lib中的文件以及所有用到的service和component服务的文件。

（2）ng-app="helloSolarSystem"指明了从helloSolarSystem模块开始解析。

（3）定义视图

2. 配置路由app.config.js

angular.module("helloSolarSystem",['peopleList','peopleDetail','hello','ui.router']).

config(['$stateProvider',function ($stateProvider) {

$stateProvider.state('helloState',{
  url: '/helloState',template:'<hello></hello>'

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

}).state('peopleState',{
  url: '/peopleList',template:'<people-list></people-list>'

}).state('peopleState.details',{
  url:'/detail/:id',template: '<people-detail></people-detail>'
})

}
]);

（1）模块名字：helloSolarSystem；

（2）注入'peopleList','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

//根据条件（参数）查找信息。
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

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

hello.component.js

angular.module("hello",[])
.component('hello',{
templateUrl: './components/hello/hello.template.html',controller: ["$scope",function HelloController($scope) {
$scope.hideFirstContent = false;
$scope.ctlButton = function () {
this.hideFirstContent = !this.hideFirstContent;
};
}
]
});

5. 实现peolpeList模块：

peopleList.template.html

（1）这里的用来显示peopleList的子组件pepleDetail

peopleList.component.js

angular.module("peopleList",['people.checkPeople'])
.component('peopleList',{
templateUrl: './components/people-list/people-list.template.html',controller: ['CheckPeople','$scope',function PeopleListController(CheckPeople,$scope) {
$scope.people = [];
CheckPeople.getData().then(function(data){
$scope.people = data;
});
}
]
});

6. 实现peopleDetail模块

peopleDetail.template.html

名字： {{item.name}}

介绍： {{item.intro}}

peopleDetail.component.js

angular.module("peopleDetail",['people.checkPeople','getStateParams'])
.component('peopleDetail',{
templateUrl: './components/people-detail/people-detail.template.html','GetStateParams',function peopleDetailController(CheckPeople,GetStateParams,$scope) {
$scope.peopleDetails = [];
CheckPeople.getData(GetStateParams.getParams()).then(function(data){
$scope.peopleDetails = data;
});
}
]
});

7.源码：nofollow" target="_blank" href="https://github.com/liyuan-meng/uiRouter-app">https://github.com/liyuan-meng/uiRouter-app

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

原文链接：/js/34245.html

ui-route uirouter多层嵌套多层嵌套路由

上一篇：10个经典的网页鼠标特效代码下一篇：js推箱子小游戏步骤代码解析

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章