简单讲解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插件
Nov 24 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
整理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
isset和empty的区别
2007/01/15 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现大文本文件分割
2019/07/22 Python
Python socket处理client连接过程解析
2020/03/18 Python
产品促销活动策划书
2014/01/15 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
事业单位鉴定材料
2014/05/25 职场文书
小组口号大全
2014/06/09 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
先进单位事迹材料
2014/12/25 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
婚庆答谢词大全
2015/09/29 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android