简单讲解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 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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/11/11 PHP
php数组随机排序实现方法
2015/06/13 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
github配置使用指南
2014/11/18 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python 如何快速复制序列
2020/09/07 Python
python Tornado框架的使用示例
2020/10/19 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
正规的求职信范文分享
2013/12/11 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
房产协议书范本
2014/10/18 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android