AngularJS ui-router (嵌套路由)

原创 2015年07月09日 22:18:16

1、需求

现在做一个从一个页面到另外一个页面的导航非常的普通。但请想象一下在某些情况下,你需要在一个主页中有tab页或者菜单可以点击打开相应的页面.

如图所示:


2、据上的界面设计,该页面实现页面之间的嵌套,即页面能从一个页面导航到另外一个页面, 当点击computer时,我们将在下面显示computer的内容,点击其它导航菜单也会有类似的效果. 我们希望这能够用一种很直接的方式被处理. 

3、针对该需求我们使用AngularJS框架来创建简单的html和JavaScript页面. 我们将创建5个HTML页面和2个JavaScript脚本文件

4、开始我们创建一个空的web应用程序,并加入三个HTML页面。如下所示. 这些页面都是片段视图, 它们会在导航过程中展示。我们还要为了能展示应用程序的Tab,创建另外一个叫做routeTwo.html的页面.

页面如下

computer.html---二级页面
person.html---二级页面
route.html---一级页面
student.html---二级页面
routeTwo.html---主页面

routeTwo.html-页面


我们需要在主页中做一些事情:

1) 我们需要引入AngularJS框架 

2) 我们需要引入ui-router框架. 

3) 引入AngularJS文件 App.js  

4) 第四件事情就是让主页内容展示出来,然后显示出它里面的页面.

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

route.html页面

App.js




5、这里为什么会用route.computer“.“号进行了分隔. 这里很关键,它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入(sub page / nested page / nested)状态的page/route.

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


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

7、控制器(controller.js)

App.js中导入了'appTest'模块,这是因为我们自己创建了一个名为controller.js的控制器:代码如下

var app=angular.module("appTest",[])
    app.controller("myController1",['$scope',function($scope){
    $scope.name="hello world"
}])

当其中一个页面需要传递数值时,例如computer页面即可调用外部控制器即可,调用的前提是要在routeTwo.html页面中引入

<script type="text/javascript" src="js/controller.js"></script>


这样computer页面可以直接写解析式访问controller里面的name属性。

回顾所讨论的页面

routeTwo.html-页面


route.html


omputer.html


person.html


student.html




AngularJS UI Router(ui.router)嵌套视图(Nested Views)

ui.router嵌套视图示例
  • xiaofanku
  • xiaofanku
  • 2016年03月21日 14:17
  • 3188

AngularJS 中的ui.router使用方法

一:为什么使用ui-router?  如果使用原生router的话,也就是当我们在index.html页面引用angular-route.js的时候,例如:我们在index.html页面的body下加...
  • flyingpig2016
  • flyingpig2016
  • 2017年07月14日 18:32
  • 1017

AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER

深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2015年09月07日 09:08
  • 52364

angularjs ui.router嵌套路由demo

  • 2016年03月11日 14:56
  • 28.59MB
  • 下载

angular ui-router:简单的单页面嵌套路由的实现过程

写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-r...
  • OBKoro1
  • OBKoro1
  • 2017年06月05日 00:42
  • 2723

初学AngularJs路由(五):Ui-router-视图嵌套

ui-route支持视图嵌套: 首页 HI,这里是list.html 点击加载list.ht
  • oak160
  • oak160
  • 2016年11月03日 16:59
  • 881

angular的uiRouter 嵌套路由学习总结

嵌套状态的方法: 状态和状态之间可以互相嵌套,状态的嵌套共有以下几种方式: 1.使用'.state()'进行嵌套. 比如 .state('contact',{}).state('conta...
  • Vin1992
  • Vin1992
  • 2017年06月01日 14:01
  • 298

angularJs模块ui-router之状态嵌套和视图嵌套

原文地址:http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/ 状态嵌套的...
  • qq_26562641
  • qq_26562641
  • 2016年12月06日 14:50
  • 3584

angular的uiRouter 嵌套路由学习总结

嵌套状态的方法: 状态和状态之间可以互相嵌套,状态的嵌套共有以下几种方式: 1.使用'.state()'进行嵌套. 比如 .state('contact',{}).state('conta...
  • Vin1992
  • Vin1992
  • 2017年06月01日 14:01
  • 298

angular ui-router:简单的单页面嵌套路由的实现过程

写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-r...
  • OBKoro1
  • OBKoro1
  • 2017年06月05日 00:42
  • 2723
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS ui-router (嵌套路由)
举报原因:
原因补充:

(最多只允许输入30个字)