简单讲解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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
Vue插件之滑动验证码
Sep 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 日常开发小技巧
2009/09/23 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
回调函数的意义以及python实现实例
2017/06/20 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
django模板语法学习之include示例详解
2017/12/17 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
关于python 跨域处理方式详解
2020/03/28 Python
Django中ORM的基本使用教程
2020/12/22 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
法学专业个人求职信
2013/09/26 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
公司会计岗位职责
2014/02/13 职场文书
小学生节水倡议书
2015/04/29 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
详解Redis集群搭建的三种方式
2021/05/31 Redis
基于JavaScript实现省市联动效果
2021/06/22 Javascript