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框架,核心特 ...
随机推荐
- VS提示“无法启动IIS Express Web服务器”的解决方法
有时在使用Visual Studio运行项目时,会提示“无法启动IIS Express Web服务器”,如图: 可以依次尝试以下方法(我的情况使用第一种就解决了): 1.可能原因:误操作执行了:Sc ...
- 为phpstorm安装右侧代码预览工具
打开设置界面,进入到plugins页面,然后再搜索codeglance,然后点击安装即可.
- Java 反射 调用 demo
基础类.供demo反射练习 package fanshe; public class Person { public String name; private String age; private ...
- 使用pyquery是遇到的一个403的问题
在网上爬虫时,本地windows下运行pyquery代码正常,但是在linux下运行时一直报错 403 Forbidden.刚开始的代码如下 from pyquery import PyQuery a ...
- 【译】关于vertical-align你应知道的一切
原文地址:Vertical-Align: All You Need To Know 通常我们需要垂直对齐并排的元素. CSS提供了一些可实现的方法:有时我用浮动float来解决,有时用position ...
- UVA11324_The Largest Clique
极大团.即求一个最大点集,使得点集中的任意两个点u,v至少存在u->v,或者v->u的路径. 是这样做的,求出所有的联通分量,然后整个图就变成了无环图,把原来若干个点缩点,点权为分量的点数 ...
- HDU4240_Route Redundancy
题目很简单.给一个有向图,求两点间的最大流量与任意一条路中的最大流量的比值. 最大流不说了,求出单条流量最大的路径可以用类似Spfa的方法来搞,保存到达当前点的最大流量,一直往下更新即可. 召唤代码君 ...
- linq 获取实体列表中的某个字段返回ilist<string>
var list = list.Select(t => t.Field<string>("列名")).ToList(); var list = list.Se ...
- 【刷题】BZOJ 2190 [SDOI2008]仪仗队
Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是 ...
- 【2018CCPC秦皇岛】
递推式的线段树可以用矩阵维护.