angularJS $routeProvider
O'Reilly书上的伪代码
var someModule = angular.module('someModule',[...module dependencies]);
someModule.config(function($routeProvider){
$routeProvider
.when('url',{controller:aController, templateUrl:'/path/to/template'})
.when(...)//other mappings for your app
.otherwise(...)//what to do if nothing else matches
});
$route被用于URLS到controller和view(HTML模板)之间的链接,它会监控$location.url()并试图对此路径及对应的路由配置进行映射,使用时需要注入安装ngroute模块。
var someModule = angular.module('someModule',['ngRoute']);
举个详细的栗子
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/other', {
controller: 'otherCtrl',
templateUrl: 'content/views/other.html',
publicAccess: true
})
.when('/', {
controller: 'homeCtrl',
templateUrl: 'content/views/home.html'
})
.when('/other/:id', {
controller: 'otherDetailCtrl',
templateUrl: 'content/views/otherDetail.html',
publicAccess: true
})
.otherwise({
redirectTo: '/'
});
}
app.controller('homeCtrl',function($scope,$http){
console.log('i am home page');
$scope.title = 'i am home page';
});
app.controller('otherCtrl',function($scope){
console.log('i am other page');
$scope.title = 'i am other page';
});
app.controller('otherDetailCtrl',function($scope, $routeParams, $location){
var id = $routeParams.id;
if(id == 0) {
$location.path('/other');
}
console.log('i am otherDetailCtrl page');
$scope.title = 'i am otherDetailCtrl page';
});
在$route(路由)中,提供了两个依赖性服务:$location、$routeParams。
$location、$routeParams均可在controller中使用,如上otherDetailCtrl中,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。
angularJS $routeProvider的更多相关文章
- 一篇入门AngularJS
目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- 7_nodejs angularjs
webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...
- [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- AgularJS中Unknown provider: $routeProvider解决方案
最近在学习AgularJS, 做到http://angularjs.cn/A00a这一步时发现没有办法执行路由功能, 后来翻看控制台日志,发现提示Unknown provider: $routePro ...
- [渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS
原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/ 我们最近发布 ...
- routeProvider
In a previous post about testing I mentioned that route resolves can make authoring unit tests for a ...
- 【js类库AngularJs】web前端的mvc框架angularjs之hello world
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- JS框架~Angularjs
无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...
- 拥抱AngularJS
文中一些地方AngularJS简称ng 简介: ng诞生于2009年,由Misko Hevery等创建,后被Google收购,为克服HTML在构建应用上的不足而设计. 是一款优秀的前端JS框架,核心特 ...
随机推荐
- JS实现前端将数据导出excel
点击此跳到原文,原文有效果动图. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但 ...
- 09_Java面向对象_第9天(类、封装)_讲义
今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 A: 面向过程与面向对 ...
- mybati内sql查询语句在两个日期内
装载自: http://blog.csdn.net/u010442302/article/details/72902441?locationNum=9&fps=1 <select i ...
- 安装centos6及安装redhat6后的配置
一.安装centos6 在引导到镜像后,选择: 我选择第二个,使用基本的显卡驱动安装系统 #第一个也是可以选的(安装或升级现有的系统) 之后,与 RHEL5 同样,使用光盘引导安装,系统会提示我们是否 ...
- 用户数以及psp
小组名称:好好学习 小组成员:林莉 王东涵 胡丽娜 宫丽君 项目名称: 记账本 alpha发布48小时以后用户数如何,是否达到预期目标,为什么,是否需要改进,如何改进(或理性估算). 首先我 ...
- vue开发 ES5——> ES6设置
- SpringBoot(十一)_springboot热部署
在开发中,后台修改了代码就要重新启动服务,很是费劲,现在我们可以让SpringBoot自动编译 热启动就需要用到我们在一开始引入的另外一个组件:devtools.它是 Spring Boot 提供的一 ...
- using关键字
声明导入名称空间 处理实现了IDisposeable的对象,并在作用域末尾调用Dispose方法
- 调用webservice超时问题的解决[转]
1.web.config配置,<system.web></system.web>里面增加:<httpRuntime maxRequestLength="1024 ...
- 【uoj#213】[UNR #1]争夺圣杯 单调栈+差分
题目描述 给出一个长度为 $n$ 的序列,对于 $1\sim n$ 的每一个数 $i$ ,求这个序列所有长度为 $i$ 的子区间的最大值之和,输出每一个 $i$ 的答案模 $998244353$ 后异 ...