本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：
● ● ● ●
AngularJS路由系列包括：1、2、3、4、5、6、
项目文件结构
node_modules/
public/.....app/..........bower_components/...............toastr/....................toastr.min.css....................toastr.min.js...............jquery/....................dist/.........................jquery.min.js...............angular/....................angular.min.js...............angular-ui-router/....................release/.........................angular-ui-router.min.js...............angular-route/.........................angular-route.min.js..........controllers/...............HomeController.js...............AllSchoolsController.js...............AllClassroomsController.js...............AllActivityiesController.js...............ClassroomController.js...............ClassroomSummaryController.js...............ClassroomMessageController.js..........css/...............bootstrap.cerulean.min.css..........filters/...............activityMonthFilter.js..........services/...............dataServices.js...............notifier.js..........templates/...............home.html...............allSchools.html...............allClassrooms.html...............allActivities.html...............classroom.html...............classroomDetail.html...............classroom_parent.html..........app.js.....index.html.....favicon.icoserver/.....data/.....routes/.....views/.....helpers.jspackage.jsonserver.js
有时候我们需要刷新路由而不是整个页面。该如何做呢？ngRoute这个module为我们准备了$route服务的reload()方法可以实现。
■ HomeController.js， 添加刷新路由功能，$route.reload
(function(){
angular.module('app')
.controller('HomeController',['dataService','notifier', '$route', '$log', HomeController]);
function HomeController(dataService, notifier, $route, $log){
var vm = this;
vm.message = 'Welcome to School Buddy!';
//重新刷新路由
vm.refresh = function(){
$route.reload();
dataService.getAllSchools()
.then(function(schools){
vm.allSchools =
vm.schollCount = schools.
.catch(showError);
dataService.getAllClassrooms()
.then(function(classroom){
vm.allClassrooms =
vm.classroomCount = classrooms.
.catch(showError);
dataService.getAllActivities()
then(function(activities)){
vm.allActivities =
vm.activityCount = activities.
■ home.html, 添加刷新路由的按钮
{{home.message}}{{home.schoolCount}}{{home.activityCount}}
&button ng-click="home.refresh()"&刷新&/button&
当点击"刷新"按钮，刷新的只是路由，不是整个页面。
查看当前路由以及所有路由
$route服务提供了current和routes属性。
■ HomeController.js， 查看当前路由以及所有路由，使用$route的current和routes属性
(function(){
angular.module('app')
.controller('HomeController',['dataService','notifier', '$route', '$log', HomeController]);
function HomeController(dataService, notifier, $route, $log){
var vm = this;
vm.message = 'Welcome to School Buddy!';
//重新刷新路由
vm.refresh = function(){
$log.debug($route.current);
$log.debut($route.routes);
$route.reload();
dataService.getAllSchools()
.then(function(schools){
vm.allSchools =
vm.schollCount = schools.
.catch(showError);
dataService.getAllClassrooms()
.then(function(classroom){
vm.allClassrooms =
vm.classroomCount = classrooms.
.catch(showError);
dataService.getAllActivities()
then(function(activities)){
vm.allActivities =
vm.activityCount = activities.
$route.current相关的如下：
$route.routes相关如下：
路由触发事件
$route服务提供以下几个事件：
● $routeChangeStart ● $routeChangesSuccess● $routeChangeError● $routeUpdate使用$on来调用事件
这些事件是在路由发生变化、路由成功、路由异常、路由更新时被触发。谁来做这些事件的载体呢？我们可以使用$on方法把这些事件注册到$rootScope上去，这样，在全局范围内触发这些事件。
■ app.js，为$rootScope添加路由事件
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html',
promise: function(){
throw 'error transitioning to classrooms';
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
以上，使用resolve在controller初始化之前定义一个promise方法故意抛出一个异常。
在localhost:3000/#/下刷新浏览器，即触发了$rootScope的$routeChangeSuccess事件。
可见，event用来存放当前触发事件；current用来存放当前路由，previous用来存放上一个路由。
清空控制台记录，点击导航栏上的Activities
previous显示了上一个路由。
清空控制台记录，点击导航栏上的Classroom,即我们故意在该路由中设置了一个异常。
获取路由参数
有时候我们需要获取路由中的参数，ngRoute为我们提供了$routeParams服务。
.when('/classrooms/:id',{
在控制器中大致这样：
function ClassroomController($routeParams){
var classroomID = $routeParams.
//使用classroomID获取相关Classroom
■ app.js，针对Classroom添加一个带参数的路由
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
.when('/classrooms/:id',{
templateUrl: '/app/templates/classroom.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
■ ClassroomController.js
(function(){
angular.module('app',[])
.controller('ClassroomController', ['dataService','notifier', '$routeParams', ClassroomController]);
function ClassroomController(dataService, notifier, $routeParams){
var vm = this;
dataService.getClassroom($routeParams.id)
.then(function(classroom){
vm.currentClassroom =
.catch(showError);
function showError(message){
notifier.error(message);
在浏览器中输入localhost:3000/#/classrooms/1
■ app.js，针对Classroom添加带更多参数的路由
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
.when('/classrooms/:id',{
templateUrl: '/app/templates/classroom.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.when('/classroom/:id/detail/:month?',{
templateUrl: '/app/templates/classroomDetail.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
■ ClassroomController.js
(function(){
angular.module('app',[])
.controller('ClassroomController', ['dataService','notifier', '$routeParams', ClassroomController]);
function ClassroomController(dataService, notifier, $routeParams){
var vm = this;
vm.month = $routeParams.
dataService.getClassroom($routeParams.id)
.then(function(classroom){
vm.currentClassroom =
//判断路由中是否有month这个参数
if($routeParams.month){
//集合或数组是否为空
if(classroom.activities.length & 0){
vm.timePeriod = dataService.getMonthName($routeParams.month);
vm.timePeriod = 'No activities this month';
vm.timePeriod = 'All activities';
.catch(showError);
function showError(message){
notifier.error(message);
■ AllActivitiesController.js
(function(){
angular.module('app')
.controller('AllActivitiesController', ['dataService', 'notifier', '$location', AllActivitiesController]);
function AllActivitiesController(dataService, notifier, $location){
var vm = this;
vm.seletedMonth = 1;
//搜索过滤
vm.search = function(){
var classroom_detail_url = '/classrooms/' + vm.selectedClassroom.id + '/detail/' +vm.seletedM
$location.url(classroom_detail_url);
dataService.getAllClassrooms()
.then(function(classrooms){
vm.allClassrooms =
vm.seletedClassroom = classrooms[0];
.catch(showError);
dataService.getAllActivities()
.then(function(activities)){
vm.allActivities =
.catch(showError);
function showError(message){
notifier.error(message);
可见，使用$location.url(route)方法可以轻松转到任何路由。
路由的Resolve属性
在配置路由的时候有一个Resolve属性，接受一个Object对象，对象的每一个属性接收一个函数，resolve中的事件发生在controller初始化之前，最终也将被注入到controller中。
.when('/activities', {
controller: 'AllActivitiesController',
controllerAd: 'activities',
templateUrl: '/app/tempaltes/allActivities.html',
resolve: {
activities: function(dataService){
return dataService.getAllActivities();
以上，dataService.getAllActivities方法返回一个promise,必须要被resolved之后才会转到相应的视图页。接着，activities可以被注入到AllActivitiesController中。
■ app.js, 在/activities路由下加上resolve属性
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html',
resolve: {
activities: function(dataService){
return dataService.getAllActivites();
.when('/classrooms/:id',{
templateUrl: '/app/templates/classroom.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.when('/classroom/:id/detail/:month?',{
templateUrl: '/app/templates/classroomDetail.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
■ AllActivitiesController.js,把路由resolve属性中的activities注入到控制器中来
(function(){
angular.module('app')
.controller('AllActivitiesController', ['dataService', 'notifier', '$location', 'activities', AllActivitiesController]);
function AllActivitiesController(dataService, notifier, $location, activities){
var vm = this;
vm.seletedMonth = 1;
//这里的activites中路由的resolve中来
//原先的getAllActivities方法就不需要存在了
vm.allActivities =
//搜索过滤
vm.search = function(){
var classroom_detail_url = '/classrooms/' + vm.selectedClassroom.id + '/detail/' +vm.seletedM
$location.url(classroom_detail_url);
dataService.getAllClassrooms()
.then(function(classrooms){
vm.allClassrooms =
vm.seletedClassroom = classrooms[0];
.catch(showError);
function showError(message){
notifier.error(message);
使用resolve的好处是：当视图页向$scope要数据的时候，由于在controller实例化之前已经准备好了数据，所以页面延迟时间大大缩短。
路由URL格式
● Hashbang格式: localhost:3000/#/classrooms/1/detail/12，默认的就是这种格式● HTML5格式：localhost:3000/classrooms/1/detail/12，需要使用$locationProvider配置，如果使用这种格式，但浏览器不支持HTML5的历史API，Angular就会使用Hashbang格式。
■ app.js, 引用$locationProvider配置自定义url格式
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', '$locationProvider', function($logProvider,$routeProvider, $locationProvider){
$logProvider.debugEnabled(true);
//使用自定义url格式
$locationProvider.hasPrefix('!');
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html',
resolve: {
activities: function(dataService){
return dataService.getAllActivites();
.when('/classrooms/:id',{
templateUrl: '/app/templates/classroom.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.when('/classroom/:id/detail/:month?',{
templateUrl: '/app/templates/classroomDetail.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
■ index.html,为了配合以上的自定义url格式需要做些改变
&a href="#!/"&School Buddy&/a&
&a href="#!/schools"&Schools&/a&
&a href="#!/classrooms"&Classrooms&/a&
&a href="#!/activities"&Activities&/a&
■ app.js, 引用$locationProvider配置HTML5的url格式
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', '$locationProvider', function($logProvider,$routeProvider, $locationProvider){
$logProvider.debugEnabled(true);
//使用HTML5格式
$locationProvider.html5Mode({
enabled: true,
requireBase: true, //需要配置基地址
rewriteLinks: true //遇到旧版本的浏览器会使用默认的Hashbang模式
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html',
resolve: {
activities: function(dataService){
return dataService.getAllActivites();
.when('/classrooms/:id',{
templateUrl: '/app/templates/classroom.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.when('/classroom/:id/detail/:month?',{
templateUrl: '/app/templates/classroomDetail.html',
controller: 'ClassroomController',
controllerAs: 'classroom'
.otherwise('/');
app.run(['$rootScope', '$log', function($rootScope, $log){
//通过$on为$rootScope添加路由事件
$rootScope.$on('$routeChangeSuccess',function(event, current, previous){
$log.debug('successfully changed routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
$log.debug('error changing routes');
$log.debug(event);
$log.debug(current);
$log.debug(previous);
$log.debug(rejection);
■ index.html,为了配合URL的HTML5格式需要做些改变
&base href="/"&
&a href="/"&School Buddy&/a&
&a href="/schools"&Schools&/a&
&a href="/classrooms"&Classrooms&/a&
&a href="/activities"&Activities&/a&
但是url使用HTML5格式有一个不好的地方，当输入一个不存在的url就会报一个404的错。
未完待续~~
阅读(...) 评论()
我的公众号：新语新世界，欢迎关注。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&div ng-controller="MainCtl"&
如何通过MainCtl的scope获取div这个节点的对象？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这是一个DOM操作。
Angular不会帮助你获得DOM的某个属性。
你需要使用的是DOM选择器，不管是原生的也好或者像jQuery这样的库也好。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Angular的设计理念不需要获取DOM，需要想其他的方法解决。
可以看一下这篇博客
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
angular提供轻版jquery - jqlite, angular.element(selector)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
获取ID的目标地是为了操作DOM, Angular的设计思想不是这样的, 你应该用directive代替.
directive的link函数已经把作用域,元素,属性数组注入到link函数调用的参数当中了.
link(scope,element,attrs)
关于directive的详细解释,请参考:
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
jqLite in angularjs
angular.element("#element-id")
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：& & 自定义指令中还可以定义controller属性，是一个function，可以在其中定义数据和方法，可以提供给该指令的link内的方法使用。
示例的html:
&div ng-app=&myApp&&
&div ng-controller=&firstController&&
&div book-list&&/div&
angular.module('myApp',[])
.directive('bookList',function(){
restrict:'ECAM',
//此处定义了该指令的controller属性
controller:function($scope){
$scope.books=[
{name:'php'},
{name:'javascript'},
{name:'java'}
this.addBook=function(){
//或者 scope.addBook=...
alert('test');
controllerAs:'bookListController', //给当前controller起个名称
template:'&ul&&li ng-repeat=&book in books&&{{ book.name }}&/li&&/ul&',
replace:true,
//link中注入 bookListController ，就可以使用它的方法了
link:function(scope,iElement,iAttrs,bookListController){
iElement.on('click',bookListController.addBook);
.controller('firstController',['$scope',function($scope){
}])执行结果：
点击则触发了link定义的点击事件:
本文已收录于以下专栏：
相关文章推荐
Angular Controller as 声明
全局提示框使用了angular的一个插件lx-angular-alert，下载地址lx-angular-alert。在使用该插件时，为了更适合我的需要，我对插件做了一些小的修改，具体的在下面代码中会贴...
参考原文：/angular-ui/ui-router/wiki
ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。
荐 Angular2.0视频教程来了！（视频和PPT的链接都在底部）
发表于 3个月前 阅读 43092 收藏 482 点赞 5...
假如我们要展示一个用户list，使用angularJS，可以这样做：先在控制器中定义用户列表的数组，再在html中写上相应的dom元素，如下：
angular.module('myApp',[...
学历：大学本科
毕业时间：
参加工作：
单位：北京 某国企下属单位
职位：程序员
        今年，我终于毕业了，毫不犹...
指令，很重要
AngularJS与JQuery最大的区别在哪里？我认为，表现在数据双向绑定，实质就是DOM的操作形式不一样。
JQuery通过选择器找到DOM元素，再赋予元素的行为；
...
angular controller通信
查询类型：
  全   部  
自定义指令的各种属性详解
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)