简单讲解AngularJS的Routing路由的定义与使用


Posted in Javascript onMarch 05, 2016

在单页面应用中,视图之间的跳转就显尤为重要的,随着应用越来越复杂,我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户。

咱们可以通过在主页面中引入不同的模板来支持不同页面的切换,但是这么做的缺点就是,越来越多的内嵌代码导致最后难以管理。

通过ng-include指令我们可以把很多的模板整合在视图中,但是我们有更好的方法来处理这种情况,我们可以把视图打散成layout和模板视图,然后根据用户访问的特定的URL来显示需要的视图

我们可以将这些“碎片”在一个布局模板中拼接起来

AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想

使用$routeProvider,我们可以更好的利用浏览历史的API并且可以让用户可以把当前路径存成书签以方便以后的使用

在我们的应用中设定路由,我们需要做两件事情:第一,我们需要指出我们存放将要存放新页面内容的布局模板在哪里。比如,如果我们想在所有页面都配上header和footer,我们可以这样设计布局模板:

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

ng-view指令将高速$routeProvider在哪里渲染模板

第二,我们需要配置我们的路由信息,我们将在应用中配置$routeProvider

$routeProvider提供了两种方法处理路由:when和otherwise。 方法when接收两个参数,第一个设置$location.path(). (直接用“//”也没有问题)

定义
定义路由非常容易,在我们的应用mian模块里面注入ngRoute依赖就可以了

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

现在,我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider,上面的代码给我们演示了两个用于定义路由的方法。

when()

when()方法有两个参数,我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示,也可以定义URL参数,在controller里面就使用$routeParams获取url参数。

templateUrl: 表示路由跳转的view模板

controller: 控制器

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

otherwise()

otherwise()定义了当应用找不到指定路由的时候跳转的路由

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

使用
定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的,这需要使用到ng-view指令

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

这样就只有<div ng-view></div>会被更新, header/footer都始终保持不变

Javascript 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 #Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 #Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 #Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 #Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 #Javascript
js控制TR的显示隐藏
Mar 04 #Javascript
Node.js操作Firebird数据库教程
Mar 04 #Javascript
You might like
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
应用数学专业求职信
2014/03/14 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
刑事起诉书范文
2015/05/19 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL