angular js权威指南笔记五--模块加载、多重视图和路由

配置

angular.module('myApp', [])
.config(function($provide) {
});

运行块

运行块通常用来注册全局的事件监听器。例如，我们会在 .run() 块中设置路由事件的监听器以及过滤未经授权的请求

angular.module('myApp', ['ngRoute'])
.run(function($rootScope, AuthService) {
$rootScope.$on('$routeChangeStart', function(evt, next, current) {
// 如果用户未登录
if (!AuthService.userLoggedIn()) {
if (next.templateUrl === "login.html") {
// 已经转向登录路由因此无需重定向
} else {
$location.path('/login');
}
}
});
});

路由

需要在 AngularJS 之后引用 angular-route ：
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>

要把 ngRoute 模块在我们的应用中当作依赖加载进来：
angular.module('myApp', ['ngRoute']);

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {
user: function(SessionService) {
return SessionService.getCurrentUser();
}
}
})
.otherwise({
redirectTo: '/'
});
}]);

可以用 when 方法来添加一个特定的路由。这个方法可以接受两个参数（ when(path, route) ）

第一个参数是路由路径，这个路径会与 $location.path 进行匹配， $location.path 也就是当前 URL 的路径。如果路径后面还有其他内
容，或使用了双斜线也可以正常匹配。我们可以在 URL 中存储参数，参数需要以冒号开头（例如 :name ）

第二个参数是配置对象，决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包
括 controller 、 template 、 templateURL 、 resolve 、 redirectTo 和 reloadOnSearch 。

redirectTo
redirectTo: '/home'
// 或者
redirectTo: function(route,path,search)
如果 redirectTo 属性的值是一个字符串，那么路径会被替换成这个值，并根据这个目标路径触发路由变化。
如果 redirectTo 属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目标路径触发路由变化。
如果 redirectTo 属性的值是一个函数， AngularJS 会在调用它时传入下面三个参数中：
1. 从当前路径中提取出的路由参数；
2. 当前路径；
3. 当前 URL 中的查询串

$routeParams
前面提到如果我们在路由参数的前面加上 : ， AngularJS 就会把它解析出来并传递给 $routeParams 。例如，如果我们设置下面这样的路由：

$routeProvider
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
});

AngularJS 会在 $routeParams 中添加一个名为 name 的键，它的值会被设置为加载进来的 URL 中的值。

如果想要在控制器中访问这些变量，需要把 $routeParams 注入进控制器：
app.controller('InboxController', function($scope,$routeParams) {
// 在这里访问 $routeParams
});