介绍
AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性. 我们将在示例中看到ui-router中存在的所有类型.
背景
引述我之前那篇文章开头给出的使用ui-router框架实现的简单路由,基于我们的业务需求,需要有不同类型的导航,一般像那种从一个页面到另外一个页面的导航非常的普通。但请想象一下在某些情况下,你需要在一个主页中有tab页或者菜单可以点击打开相应的页面.
|
|
好吧,让我们来看看一个典型的导航..
注意,这个导航我们已经在之前的文章中见过。针对现在的主题我们将看到该导航嵌套进视图中的形式.
根据上的界面设计,我们计划该页面能从一个页面导航到另外一个页面,当点击page-1时,我们将在下面显示page-1的内容,点击其它导航菜单也会有类似的效果. 我们希望这能够用一种很直接的方式被处理. 让我们开始写代码吧.
实战
针对该需求我们使用AngularJS框架来创建简单的html和JavaScript页面. 我们将创建3个HTML页面和一个JavaScript脚本文件。
一开始我们创建一个空的web应用程序,并加入三个HTML页面。如下所示. 这些页面都是片段视图,它们会在导航过程中展示。我们还要为了能展示应用程序的Tab,创建另外一个叫做PageTab.html的页面.
|
因此我们需要创建以下文件:
1. Page1.html
2. Page2.html
3. Page3.html
4. PageTab.html
注意:我们使用的是AngularJS 1.2,当我写这篇文章的时候,Angular 1.3已经发布了。
Page1.html
创建如下的html页面:
1
2
3
4
5
|
<
div
>
>
h1
>Page1contentgoeshere...</
>
</
>
>
|
Page2.html
创建如下的html页面:
>Page2contentgoeshere...</
>
Page3.html
创建如下的html页面:
>Page3contentgoeshere...</
>
创建如下的html页面:
PageTab.html
创建如下的html页面:
5
6
7
span
style
=
"width:100px"
>Page-1</
span
>Page-2</
>Page-3</
>
>
>
|
这将会使页面文本处于侧边,哎呀,我忘了添加当用户将鼠标悬停在文本上的时候的超链接了。让我们这样做: