简单讲解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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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
PHP array操作10个小技巧分享
2011/06/23 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
英语演讲稿范文
2014/01/03 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
小石潭记导游词
2015/02/03 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
毕业生政审意见范文
2015/06/04 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python