使用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">
<div>
<a ui-sref="helloState">Hello</a>
<a ui-sref="aboutState">About</a>
<a ui-sref="peopleState">People</a>
</div> <ui-view></ui-view> </body>
</html>
（1）导入lib中的文件以及所有用到的service和component服务的文件。
（2）ng-app="helloSolarSystem"指明了从helloSolarSystem模块开始解析。
（3）定义视图<ui-view></ui-view>
2. 配置路由app.config.js
'use strict';
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', 'peopleDetail', 'hello','ui.router'模块。
（3）配置stateProvider服务的视图控制，例如第一个名为helloState的视图控制器：当ui-sref == "helloState"的时候，路由更新为url的值#/helloState，并且<ui-view></ui-view>中显示的内容为<hello></hello>组件解析出的内容。
（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
<div>
<div ng-hide="hideFirstContent">hello solar sytem!</div>
<div ng-hide="!hideFirstContent">whats up solar sytem!</div>
<button ng-click="ctlButton()">click</button>
</div>
hello.component.js
'use strict';
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
<div>
<ul>
<a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
<li>{{item.name}}</li>
</a>
</ul>
<ui-view></ui-view>
</div>
（1）这里的<ui-view></ui-view>用来显示peopleList的子组件pepleDetail
peopleList.component.js
'use strict';
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
<ul ng-repeat="item in peopleDetails track by $index">
<li>名字： {{item.name}}</li>
<li>介绍： {{item.intro}}</li>
</ul>
peopleDetail.component.js
'use strict';
angular.module("peopleDetail", ['people.checkPeople', 'getStateParams'])
.component('peopleDetail', {
templateUrl: './components/people-detail/people-detail.template.html',
controller: ['CheckPeople', 'GetStateParams', '$scope',
function peopleDetailController(CheckPeople, GetStateParams, $scope) {
$scope.peopleDetails = [];
CheckPeople.getData(GetStateParams.getParams()).then(function(data){
$scope.peopleDetails = data;
});
}
]
});
7.源码：
https://github.com/liyuan-meng/uiRouter-app
使用ui-route实现多层嵌套路由的更多相关文章
- angularjs ui-view多视口多层嵌套路由配置
最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- react-router 嵌套路由 内层route找不到
今天在做嵌套路由的时候,没有报错,但是页面显示为空,搜索了一下资料,有两个原因: 1.exact精确匹配 <Route component={xxx} path="/" /& ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- Angularjs中的嵌套路由ui-router
先看看ng-router和ui-router的区别 (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换. (2)ui-route的改进:在具 ...
- vue嵌套路由总结
嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...
- VUE router-view 页面布局 （嵌套路由+命名视图）
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
随机推荐
- QScintilla 编译
直接上英文了,不翻译了.看不懂的可以留言哈. ———————————————————————————————————————— Installation As supplied QScintilla ...
- 卡尔曼滤波（Kalman Filter）
一.引言 以下我们引用文献[1]中的一段话作为本文的開始: 想象你在黄昏时分看着一仅仅小鸟飞行穿过浓密的丛林.你仅仅能隐隐约约.断断续续地瞥见小鸟运动的闪现.你试图努力地猜測小鸟在哪里以及下一时刻它会 ...
- NanUI文档 - 使用网页来设计整个窗口
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)
写在前面: 最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格,下面就来说说从后台获取数据并在前台页面进行完美展示.啊哈哈哈..(天啦,坐我旁边的丽姐貌似炒股 一个月可以搞几十万 ...
- 对Java中多态，封装，继承的认识（重要）
一.Java面向对象编程有三大特性:封装,继承,多态 在了解多态之前我觉得应该先了解一下 ...
- C# 杂活
1 下拉框 List<Model.Sys.AccountModel> AcModel = BLL.Sys.AccountBLL.Instance.GetModelList("Ro ...
- UML2和建模工具学习总结
软件发展的方向:CS–>BS–>SOA–>BIG DATA 建模的含义: 模型是对现实的简化 从特点视角对系统的一个完整性描述 建模的重要性: 为了更好的理解一个系统 管理复杂度(也 ...
- OC学习10——内存管理
1.对于面向对象的语言,程序需要不断地创建对象.这些对象都是保存在堆内存中,而我们的指针变量中保存的是这些对象在堆内存中的地址,当该对象使用结束之后,指针变量指向其他对象或者指向nil时,这个对象将称 ...
- iOS动态性 运行时runtime初探(强制获取并修改私有变量，强制增加及修改私有方法等)
借助前辈的力量综合一下资料. OC是运行时语言,只有在程序运行时,才会去确定对象的类型,并调用类与对象相应的方法.利用runtime机制让我们可以在程序运行时动态修改类.对象中的所有属性.方法,就算是 ...
- jsp程序设计：jstl之JSTL标签库
转载自:http://www.blogjava.net/haizhige/archive/2008/10/26/236783.html,个人进行了一些修改. 前言:写一个taglib一般可以继承Sim ...