AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

angular.js 嵌套路由

2016-11-03 1976
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 介绍 AngularJS 嵌套路由：，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性. 我们将在示例中看到ui-router中存在的所有类型. 背景 引述我之前那篇文章开头给出的使用ui-router框架实现的简

介绍

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 >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

创建如下的html页面：

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 2 content goes here...</ h1 >
      </ div >
</ div >

Page3.html

创建如下的html页面：

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 3 content goes here...</ h1 >
      </ div >
</ div >

创建如下的html页面：

PageTab.html

创建如下的html页面：

?
1
2
3
4
5
6
7
< div >
      < div >
          < span  style = "width:100px" >Page-1</ span >
          < span  style = "width:100px" >Page-2</ span >
          < span  style = "width:100px" >Page-3</ span >
      </ div >
</ div >

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

?
1
2
3
4
5
6
7
< div >
      < div >
          < span  style = "width:100px" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px" >< a  href = "" >Page-3</ a ></ span >
      </ div >
</ div >

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

  

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

现在我们就来创建它.

Main.html

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<! DOCTYPE  html>
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  src = "Scripts/angular.js" ></ script >
     < script  src = "Scripts/angular-ui-router.js" ></ script >
     < script  src = "App.js" ></ script >
 
</ head >
< body  data-ng-app = "myApp" >
     < h1 >AngularJS Home Page (Ui-router Demonstration)</ h1 >
     < div  data-ui-view = "" ></ div >
</ body >
< html >

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

  

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

App.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);
 
myApp.config( function  ($stateProvider, $urlRouterProvider) {
 
      $urlRouterProvider.when( "" ,  "/PageTab" );
 
      $stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })
         .state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page-1.html"
         })
         .state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page-2.html"
         })
         .state( "PageTab.Page3" , {
             url: "/Page3" ,
             templateUrl:  "Page3.html"
         });
});

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

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

?
1
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);

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

  

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

?
1
myApp.config( function  ($stateProvider, $urlRouterProvider) {

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

?
1
$urlRouterProvider.when( "" ,  "/PageTab" );

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

?
1
2
3
4
5
$stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })

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

  

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

?
1
2
3
4
.state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page-1.html"
         })

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

PageTab.html

?
1
2
3
4
5
6
7
8
9
10
<div>
      <div>
          <span style= "width:100px" ><a href= "" >Page- 1 </a></span>
          <span style= "width:100px" ><a href= "" >Page- 2 </a></span>
          <span style= "width:100px" ><a href= "" >Page- 3 </a></span>
      </div>
      <div>
           <div ui-view= "" />
      </div>
</div>

好了，再来下面一行..

?
1
2
3
<div>
     <div ui-view= "" />
</div>

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

  

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

?
1
2
3
4
.state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page2.html"
         })

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

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

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


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

?
1
2
3
4
5
6
7
8
9
10
< div >
      < div >
          < span  style = "width:100px"  ui-sref = ".Page1" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page2" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page3" >< a  href = "" >Page-3</ a ></ span >
      </ div >
      < div >
           < div  ui-view = "" />
      </ div >
</ div >

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

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

Main.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<! DOCTYPE  html>
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  src = "Scripts/angular.js" ></ script >
     < script  src = "Scripts/angular-ui-router.js" ></ script >
     < script  src = "App.js" ></ script >
 
</ head >
< body  data-ng-app = "myApp" >
     < h1 >AngularJS Home Page (Ui-router Demonstration)</ h1 >
     < div  data-ui-view = "" ></ div >
</ body >
< html >

PageTab.html

?
1
2
3
4
5
6
7
8
9
10
< div >
      < div >
          < span  style = "width:100px"  ui-sref = ".Page1" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page2" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page3" >< a  href = "" >Page-3</ a ></ span >
      </ div >
      < div >
           < div  ui-view = "" />
      </ div >
</ div >

Page1.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

App.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);
 
myApp.config( function  ($stateProvider, $urlRouterProvider) {
 
      $urlRouterProvider.when( "" ,  "/PageTab" );
 
      $stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })
         .state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page1.html"
         })
         .state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page2.html"
         })
         .state( "PageTab.Page3" , {
             url: "/Page3" ,
             templateUrl:  "Page3.html"
         });
});

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

下载地址  http://download.csdn.net/detail/u013378306/9672103
文章标签：
JavaScript
前端开发
关键词：
JavaScript路由
JavaScript嵌套
Angular路由
lhyxcxy
目录
相关文章
土木林森
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘：响应式系统、组件化与路由管理，震撼你的前端世界！
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架，以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js：响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性，能自动追踪数据变动并更新视图。例如，通过简单示例代码展示其响应式特性：`{{ message }}`，当`message`值改变，页面随之自动更新。此外，Vue.js支持组件化设计，允许将复杂界面拆分为独立且可复用的组件，提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件，并在其他页面中重复利用。
土木林森
85 3
土木林森
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
74 1
cqtianxin1
|
2月前
|
JavaScript
Node.js 路由
10月更文挑战第5天
cqtianxin1
27 2
代码bug生产队
|
2月前
|
JavaScript 前端开发 API
前端技术分享：Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享：Vue.js 动态路由与守卫
代码bug生产队
45 4
代码bug生产队
|
2月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
代码bug生产队
76 4
极简博客
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能：缓存策略、请求压缩和路由匹配
在开发Express.js应用时，采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据，并通过精确匹配、模块化路由及参数化路由提高路由处理效率，从而打造高效应用。
极简博客
198 14
派大鑫的工作室
|
2月前
|
Web App开发 JavaScript 前端开发
Javascript嵌套函数的调用
Javascript嵌套函数的调用
派大鑫的工作室
40 0
六卿
|
3月前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转，通过直接引入路由实例并使用`router.push`实现页面跳转。
六卿
157 0
白雾茫茫丶
|
4月前
|
JSON 数据安全/隐私保护 数据格式
Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权
这篇文章介绍了身份验证的重要性和多种处理策略，重点放在了JWT（JSON Web Token）认证在Nest.js框架中的应用。文章包含了JWT认证的流程，如何在Nest.js中实现，以及如何创建JWT认证策略。包括了安装依赖，创建处理认证流程的文件，以及如何使用HttpException过滤器来处理未登录访问。
白雾茫茫丶
237 0
Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权
土木林森
|
4月前
|
SEO 搜索推荐 数据采集
让 JSF 应用秒变搜索引擎宠儿！揭秘 SEO 优化的神奇魔法，让你的网站脱颖而出！
【8月更文挑战第31天】随着互联网的发展，搜索引擎已成为用户获取信息的主要途径，SEO 对 Web 应用至关重要。本文介绍如何提升 JavaServer Faces（JSF）应用的 SEO 友好性，包括关键词优化、网页结构优化和外部链接建设等基础知识，并提出了使用语义化 HTML 标签、优化页面标题和描述、生成静态 HTML 页面及 URL 重写等具体策略，帮助您的网站在搜索引擎中获得更高排名。
土木林森
35 0

热门文章

最新文章

  • 1
    jquery的load加载js页面到指定div中
  • 2
    node.js入门学习
  • 3
    前端 时间个性化 插件 jquery.timeago.js
  • 4
    JSBridge：混合开发中的双向通信[Android、iOS&JavaScript]
  • 5
    编写JavaScript时容易出错的几个地方
  • 6
    js 匿名函数 闭包
  • 7
    javascript：折叠菜单
  • 8
    Hammer.js分析（一）——基础结构
  • 9
    JS-【同页面多次调用】轮播特效封装-json传多个参数
  • 10
    js 正则 数值验证
  • 1
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    113
  • 2
    【TypeScript技术专栏】TypeScript在Angular开发中的应用
    89
  • 3
    angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）
    180
  • 4
    【angular】启动项目和路由配置
    56
  • 5
    云HIS医疗管理系统源码——技术栈【SpringBoot+Angular+MySQL+MyBatis】
    232
  • 6
    JAVA云HIS医院管理系统源码、基于Angular+Nginx+ Java+Spring，SpringBoot+ MySQL + MyCat
    144
  • 7
    【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数（多用于通过浏览器地址参数保存用户当前操作状态的需求），实现监听url路由切换、状态变化。
    109
  • 8
    【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？
    123
  • 9
    Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
    79
  • 10
    1分钟入门angular动画效果animations，敲简单滴哟~~☺
    111

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • AngularJS 快速入门
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    DataWorks售前咨询