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框架,核心特 ...
随机推荐
- Good Time 冲刺 六
一.今日完成任务情况 第六天 日期:2018.6.19 王怡镔:今天完善了页面,对部分不足进行改进. 于鑫宇:对界面进行完善. 胡雅馨:今天完成前端页面,并改善后端,完善项目. 黄 鹤:做完最后的打卡 ...
- 【转】Verilog HDL常用建模方式——《Verilog与数字ASIC设计基础》读书笔记(四)
Verilog HDL常用建模方式——<Verilog与数字ASIC设计基础>读书笔记(四) Verilog HDL的基本功能之一是描述可综合的硬件逻辑电路.所谓综合(Synthesis) ...
- 网页访问过程(基于CDN)
1. 全局负载均衡(基于DNS) 如果有多台 WEB 服务器同时为一个域名提供服务时,即一条 URL 对应多个 IP 地址,那么该 URL 的权威域名服务器可能会根据该 URL 解析出多个 IP 地址 ...
- 笔记之分布式文件系统(DFS)
不知何故,老外都挺喜欢使用DFS,但是国内公司用这个的不多.一个具体的需求就是,备份服务器在国外,所以启用DFS把国内的数据同步一份到国外进行备份.最近有机会接触DFS,把一些心得体会记录一下. 1. ...
- sublinme 快捷键格式
{"keys": ["ctrl+shift+f"], "command": "reindent" , "arg ...
- springMVC 访问静态资源
问题描述 使用SpringMVC时遇到静态资源无法加载的问题,报404 问题原因 如果SpringMVC的映射模式采用的是后缀名匹配,如[*.do]或者[*.action]则不会出现该问题,因为静态资 ...
- 【uoj#280】[UTR #2]题目难度提升 对顶堆+STL-set
题目描述 给出 $n$ 个数 $a_1,a_2,...,a_n$ ,将其排为序列 $\{p_i\}$ ,满足 $\{前\ i\ 个数的中位数\}$ 单调不降.求字典序最大的 $\{p_i\}$ . 其 ...
- unix常用命令记录
1. ls 命令:列出文件及文件夹 ls -a 列出目录下的所有文件,包括以 . 开头的隐含文件.ls -b 把文件名中不可输出的字符用反斜杠加字符编号(就象在C语言里一样)的形式列出.ls -c 输 ...
- Barricade HDU - 5889(最短路+最小割)
Barricade Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- Nginx 线上配置实例
1 /etc/nginx/nginx.conf,在主配置下设置 /etc/nginx/conf.d/*.conf user nginx;worker_processes 1; error_log /v ...