详细解释angularjs 关于ui-router分层使用_AngularJS_脚本之家

关于ui-router中嵌套路由中的问题

本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例,分享给大家,具体如下:

最近感觉有很多学angular
的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用,现在要好得多了。在这里就记录下ui-router使用。

**大家好,我是IT修真院北京总院第27期的学员于靖华,一枚正直纯洁善良的web程序员**

1.首先我们的页面层次为

一、预期实现效果:

就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则来设置路由名,好处是容易看懂,也便于管理。

**今天讲下深度思考中的知识点——**——AngularJS ui-router
(嵌套路由)**

其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理。

我这里是以总state到模块state再到下一层模块state最后到详细页面的state来分层。

1.背景介绍

main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view

(项目地址:

首先我们先定义一个总的state如:

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。

这样就实现了嵌套路由。

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

.state('home', { url: '/home?backKey',// abstract: true, templateUrl:'home/home.html', controller:'homeCtrl' })

2.知识剖析

当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2。

  1. service:

在homeCtrl中可以为空,看需求吧。因为这个是最顶层的state所以在angular.module中一定要把下一层的路由angular.module依赖进来。如果有多个模块那就分别依赖进来,用逗号隔开,这里就依赖一个模块来说明下。如var
m = angular.module(“ms.homeRouter”, [‘ms.hrRouter’]);

vns娱乐网站,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。

 Main page    angular.module("myApp",["ui.router"]) .config(function{ $stateProvider .state("PageTab",{ url:"", templateUrl:"PageTab.html" }) .state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" }) .state("PageTab.Page2",{ url:"/Page2", templateUrl:"Page2.html" }) })

根据条件查询people数据checkPeople.service,不给出条件则查询所有。

而在home.html中必须要存在一个
作为祖模板。好了到这里就已经把最顶层的工作内容完成了,现在开始各个模块路由分配。

不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!

PageTab.html

得到路由信息getStateParams.service。

wns威斯尼斯人,上面已经说到一个ms.hrRouter的模块依赖进来,现在就已这个为例来说明下配置:在这个模块中新建个js文件,定义一个angular.module,名字就是ms.hrRouter。

于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧”。

Insert title herePageTab  Page-1 Page-2  

Page1 Page1

Page2 Page2
  1. components:
var m = angular.module("ms.hrRouter", [ 'ms.hrDismissionRouter']);

3.常见问题

以上是全部的页面代码,Main.html中js库需要手动导入。

hello模块:点击button按钮更改内容。

这个就是hr的模块,在这模块中又有该模块的子模块。angular.module名依赖进来,在这模块的路由中先配置下总路由,然后再在该路由下分下一层模块路由。

何使用ui-router???

下面我们重点看Main.html中对路由统一管理的部分也就是这段js代码

peolpleList模块:显示people列表,点击people显示people详情。依赖于checkPeople.service模块。

.state('home.hr', { url: '/hr', template: '', controller: 'hrCtrl' }) .state('home.hr.dismission', { url: '/dismission', template: '', controller: 'hrNextCtrl' }) });

4.解决方案

 angular.module("myApp",["ui.router"]) .config(function{ $stateProvider .state("PageTab",{ url:"", templateUrl:"PageTab.html" }) .state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" }) .state("PageTab.Page2",{ url:"/Page2", templateUrl:"Page2.html" }) })

peopleDetail模块:显示people详情,依赖于checkPeople.service模块和getStateParams.service模块。

说明下上面的代码:state名为home.hr说明这个是在hr模块中的顶层路由。其template为”
意思是抽象的,如果路由定位这里其显示内容其实是在home层页面中的ui-view中,这里的hrCtrl内容也可以为空,看需求,但必须要定义出这个控制器否则会报错。接着来解释下下面state名为home.hr.dismission路由:从名字就可以看出来这个路由就是hr模块的下一层模块,名为dismission。而url对象也是这模块的名字,以便在浏览器地址中可以直接看出是在哪模块哪层哪里。template、controller两个属性跟上面解释是一样的。

首先,无论是使用哪种路由,作为框架额外的附加功能,它们都将以模块依赖的形式被引入,简而言之就是:在引入路由源文件之后,你的代码应该这样写(以ui.router为例):

一共三个状态:

如图所示:component目录用来保存所有服务模块和业务模块,lib目录保存外部引用(我是用的是angular.js1.5.8和ui-route0.2.18),app.config.js文件用来配置路由,index.html则作为入口文件。

到现在已经完成了顶层路由home到hr模块路由再到dismission模块路由说明。

angular.module(“myApp”, [“ui.router”]); //
myApp为自定义模块,依赖第三方路由模块ui.router

.state("PageTab",{ url:"", templateUrl:"PageTab.html" })

三、实现这个例子

now到dismission模块中的详情页面的路由配置:在dismission模块中也新建一个路由js文件。这个模块的angular.module配置为var
m = angular.module(“ms.hrDismissionRouter”, []);

因此我们需要创建以下文件:

在第一个中我们定义了初始状态名为PageTab,url状态为空,这时候在母版中将会在ui-view中填充PageTab.html这个页面。

  1. 首页index.html

    Title Hello About People

因为这个是最底层的路由了已经再也没有子路由依赖了,所以后面的[]中是空的。在这页面中的state配置如:

  1. Page1.html

  2. Page2.html

  3. Page3.html

  4. PageTab.html

.state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" })

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

.state('home.hr.dismission.commonApproval', { url: '/commonApproval?taskId&openid&doType', templateUrl: 'hr/dismissionAppl/dismissionAppl.html', resolve: { dismRsl: getResolve() }, controller: 'dismissionApplCtrl' })]);

注意:我们使用的是AngularJS 1.2,当我写这篇文章的时候,Angular
1.3已经发布了。

我们把这个状态名字命名为PageTab.Page1
这时候的路由将会交给PageTab来处理,即在PageTab.html页面中的ui-view中填充Page1.html中的内容。同理如果state命名为PageTab.Page2
那么处理它的就会是PageTab.html这个页面。

ng-app=”helloSolarSystem”指明了从helloSolarSystem模块开始解析。

从state名字也可以看出,这个是在dismission模块的子层。url也是这个页面的路由名,以及这个页面需要带的参数。这里的resolve的作用是在页面加载前先执行getResolve()方法。该方法的目的是获取数据,达到进该页面前先获取到该页面的数据,等到该页面的所有数据都获取完后再跳转到该页面。这个resolve属性不懂的可以百度,或者我博客中也有篇介绍的,可以看看。

Page1.html

希望本文所述对你有所帮助,angularjs
ui-router中路由的二级嵌套就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习angularjs可以继续关注本站。

定义视图

好了!可能说得不是太明白但总体思路就是这样。

创建如下的html页面:

  1. 配置路由app.config.js

    ‘use strict’;angular.module(“helloSolarSystem”, [‘peopleList’, ‘peopleDetail’, ‘hello’,’ui.router’]). config([‘$stateProvider’, function { $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: ” }) }]);

Note:
最好是在每层模块中都新建两个js文件,一个是router.js一个是controller.js这样好管理。
这是模块分层对应的文件分层。

vns娱乐网站 1

模块名字:helloSolarSystem;

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

Page2.html

注入’peopleList’, ‘peopleDetail’, ‘hello’,’ui.router’模块。

创建如下的html页面:

配置stateProvider服务的视图控制,例如第一个名为helloState的视图控制器:当ui-sref

“helloState”的时候,路由更新为url的值#/helloState,并且中显示的内容为组件解析出的内容。

嵌套路由的实现:名为peopleState的视图控制器是父路由。名为peopleState.details的视图控制器是子路由。这是一种相对路由方式,父路由将匹配…/index.html#/peopleState/,子路由将匹配…/index.html#/peopleState/detail/x。如果改成绝对路由的形式,只需要写成url:’^/detail/:id’,这时子路由将匹配…/index.html#/detail/x。

  1. 实现checkPeople.service

checkPeople.sercice.js

'use strict';//根据条件查找信息。angular.module('people.checkPeople', ['ui.router']). factory('CheckPeople', ['$http', function  { return { getData: getData }; function getData { var people; var promise = $http({ method: 'GET', url: './data/people.json' }).then { if  { people = response.data.filter { if  === Number { return value; } }) } else { people = response.data; } return people; }); return promise; } }]);

在getData这个函数中,我们想要返回一个保存people信息的数组,但是由于使用$http服务的时候,这是一个异步请求,我们并不知道请求什么时候结束,所以世界返回people数组是有问题的。我们注意到,$http是一个Promise对象,所以我们可以想到直接将这个对象返回,这样在就可以使用”函数的结果.then”来得到异步请求拿来的数据data。

  1. 实现getStateParams.service

getStatePatams.service.js

"use strict";angular.module("getStateParams", ['ui.router']). factory("GetStateParams", ["$location", function  { return { getParams: getParams }; function getParams() { var partUrlArr = $location.url; return partUrlArr[partUrlArr.length-1]; }}]);

这里的getParams函数返回的是路由信息的最后一个数据,也就是people的id,这个service有些特殊,不够通用,可能还需要优化一下会更加合理。不过并不影响我们的需求。

  1. 实现hello模块

hello.template.html

 hello solar sytem! whats up solar sytem! click

hello.component.js

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

peopleList.template.html

   {{item.name}}   

这里的用来显示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 { $scope.people = []; CheckPeople.getData{ $scope.people = data; }); } ] });
  1. 实现peopleDetail模块

peopleDetail.template.html

  • 名字: {{item.name}}
  • 介绍: {{item.intro}}

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{ $scope.peopleDetails = data; }); } ] });

7.源码:

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

vns娱乐网站 2

Page3.html

创建如下的html页面:

vns娱乐网站 3

创建如下的html页面:

PageTab.html

创建如下的html页面:

vns娱乐网站 4

这将会使页面文本处于侧边,哎呀,我忘了添加当用户将鼠标悬停在文本上的时候的超链接了。让我们这样做:

vns娱乐网站 5

我们没有指向任何超链接,只是为了把链接放在href中,实际上这是一种获取url的解决方法。

注意,到目前为止,我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段,我们需要一个占位或者说父页面来装下这些东西.
让我们把这个页面叫做 Main.html.

现在我们就来创建它.

Main.html

用如下内容创建这个html页面.

vns娱乐网站 6

我们需要在主页中做一些事情, (i) 我们需要引入AngularJS框架 (ii)
我们需要引入ui-router框架. (iii) 引入AngularJS文件 App.js
(之后我会谈到这个) (iv)
第四件事情就是让主页内容展示出来,然后显示出它里面的页面.

现在,让我们看一下App.JS文件的内容,我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在Main.html中显示PageTab.html的内容。代码如下:

App.js

vns娱乐网站 7

我们一步步地来解释这做了什么。

Line-1:第一行,声明AngularJS模块,
并把ui-router传入AngularJS主模块,所有的结合起来我们就得到了Angular模块。

vns娱乐网站 8

这里叫做App模块,这将告诉HTML页面这是一个AngularJS作用的页面,它的内容由AngularJS引擎来解释。

代码行-2:这一行声明了把 $stateProvider 和 $urlRouteProvider
路由引擎作为函数参数传入,这样我们就可以为这个应用程序配置路由了.

vns娱乐网站 9

代码行-3:
好,
那这一行做什么的呢,如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至
PageTab.html, 这个页面就是状态名称被声明的地方.
只要理解了这个,那它就像switch case语句中的default选项.

vns娱乐网站 10

语句块-1:
这一行定义了会在main.html页面第一个显示出来的状态
,作为页面被加载好以后第一个被使用的路由.

vns娱乐网站 11

这就向母版页的子页面,应用程序会首先加载这个main.html页面。

语句块-2: 现在,就由这一行来定义页面,
但是等一等,这里有点不同,我们之前为上面的状态名称加上了前缀,并且使用点“.“号进行了分隔.
这里很关键,它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入(sub
page / nested page / nested)状态的page/route.

vns娱乐网站 12

它将会在 “PageTab.html” 页面里面显示出来,那么它是什么意思呢.
想象一下当我们想要在母版页中管理所有的页面时,我们就会想要一个叫做”ui-view“的占位标记,
因此我们现在把PageTab.html叫做一个母版页,因为它会把我们需要在PageTab.html中用”ui-view“
声明好的其它页面都管理起来. 现在让我们来修改一下它.

PageTab.html

vns娱乐网站 13

vns娱乐网站 14

也就是说 PageTab.html 将对装下所有的子页面.

现在一切就绪了。OK,可是现在谁来告诉程序应该显示哪个页面呢.
这就是我们要在路由引擎里面配置的东西,如下所示.

vns娱乐网站 15

Page2.html 将会在被叫做PageTab的状态中展示,它就是PageTab.html.

Ok, 但是我们还落下啥事没做,这事就是当我们在 Page-1 或者 Page-2 再或者
Page-3 菜单上点击的时候需要页面在占位标记那里显示出来,是不 ?

还真是把那一块给忘啦,我们还没有为路由和这种逻辑建立起联系,
想象一下如果那是href的话,就意味着我们可以指定将会锚向页面里面的ID名称,
如果它是简单的html本地引用就是这样,但我们则需要按照需求显示不同的页面.

关键的地方在这里.  (ui-sref) 我们需要再一次修改
PageTab.html,如下所示.,

vns娱乐网站 16

注意,只是上面高亮的部分发生了改变 ,
这里我们只是简单的将App.js中定义的状态同tab中定义的对应文本进行了关联.
当我们使用点符号对它进行了声明,程序就会认为页面时ui-view中的子页面或者说嵌入页面,它们就是路由配置中需要被展示的页面.

现在,我们要看看目前为止我们讨论过的那些页面的内容了.

Main.html

vns娱乐网站 17

PageTab.html

vns娱乐网站 18

**Page1.html**

vns娱乐网站 19

**Page2.html**

vns娱乐网站 20

Page3.html

vns娱乐网站 21

**App.js**

vns娱乐网站 22

**一切OK,现在让我们把这个应用程序运行起来吧.**

**5.扩展思考**

angular的uiRouter服务学习

http://www.cnblogs.com/liulangmao/p/4155015.html

**6.参考文献**

参考一:ui.router源码解析

参考二:ui-router
嵌套路由

**7.更多讨论**

问题一:ui-router 相对于ng-router的优势?

回答:ui-router
可以实现多层路由嵌套、ng-router只能使用一次所以我们在使用过程中如果需要路由大多数情况,

都会使用了ui-router。

问题二: ui-router 和 ng-router 使用方法类似吗?

回答: 使用方法是类似
但是方法上有些不同、更多时候只需要了解ui-router即可、

问题三: $stateProvider有几种方法?

回答:
总共2个方法:decorator和state。但这里只讲state(state这个里面的配置也不讲全的,只讲几个暂时用到的)

鸣谢

**感谢观看**

感谢  徐恒 此教程在她技术分享的基础上完善而成!

PPT

视频连接

密码: iyx6


技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧

猛戳这里有惊喜

发表评论

电子邮件地址不会被公开。 必填项已用*标注