配置

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
});