简单讲解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的日期选择控件
Oct 27 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
HTML上传控件取消选择
Mar 06 Javascript
DIV始终居中的js代码
Feb 17 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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实现蜘蛛访问日志统计
2013/07/05 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python构建网页爬虫原理分析
2017/12/19 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
导购员的岗位职责
2014/02/08 职场文书
精神文明建设标语
2014/06/16 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
SQL注入详解及防范方法
2021/12/06 MySQL