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




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

ui-router中路由的二级嵌套

关于ui-router中嵌套路由中的问题1.首先我们的页面层次为 其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理。 main.html页面中有一个ui-v...

AngularJS ui-router (嵌套路由)

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板...

AngularJS ui-router (嵌套路由)

介绍 AngularJS 嵌套路由:这是我针对同一个主题(ui-router)的第二篇文章. 如果你对第一篇文章感兴趣的话,可以访问 这里. 好了,让我们继续吧,来看看嵌套的ui-route...

AngularJS—学习 ui-router - 路由控制

参考原文:https://github.com/angular-ui/ui-router/wiki/URL-Routing 在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 st...

AngularJS—路由插件ui.router源码解析

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRou...

angularJs 中 ng-route与ui-router路由的区别

小编昨天晚上翻到之前做得笔记,今天就跟大家闲谈下ng-route与ui-router的区别 angular的路由有两种,在angular最先出来的ngRoute的时候,后续又有了uiRoute ng-...

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

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

AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么,对于angular而言,它自然也有内置的路由模块:叫做n...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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