ngRoute 模块中包含以下内容，
| 名称 | 所属 | 作用 |
|---|---|---|
ngView |
DIRECTIVE | 提供不同路由模板插入的视图层 |
$routeProvider |
PROVIDER | 提供路由配置 |
$route |
SERVICE | 用于构建各个路由的url、view、controller这三者的关系 |
$routeParams |
SERVICE | 解析返回路由中带有的参数 |
- 在主模板中使用
ngView定义一个路由模板的视图层。不同路由对应的模板将会插入到这个ngView所在的dom元素下。 - 使用
$routeProvider进行路由配置，包括每一个路由对应的url，template以及controller。除了这些基本的配置之外，还会有一些额外的配置，比如resolve配置等。 - 在每个路由的controller中完成对应的业务逻辑。
- 可以通过注入
$routeParams服务来获取路由url上的参数；还可以通过$rootScope来监控$routeChangeStart和$routeChangeSuccess事件。
<body ng-app="demo001" ng-controller="Demo">
<h1>Angular Route Demo</h1>
<hr>
<div>
<a href="#/home">home</a>
<a href="#/post">post</a>
<a href="#/about">about</a>
</div>
<hr>
<div ng-view></div>
</body>
angular.module(‘demo001‘, [‘ngRoute‘])
.config([
‘$routeProvider‘,
function ($routeProvider) {
$routeProvider
.when(‘/home‘, {
templateUrl: ‘home.html‘,
controller: ‘HomeController‘
})
.when(‘/post‘, {
templateUrl: ‘post.html‘,
controller: ‘PostController‘
})
.when(‘/about‘, {
templateUrl: ‘about.html‘,
controller: ‘AboutController‘
})
.otherwise(‘/home‘)
}
])
调用 $routeProvider.when 来配置不同路由的具体信息。 $routeProvider.when 方法接受2个参数，第一个是路由的url。第二个路由的具体配置，包括对应的模板地址，控制器名称等.$routeProvider.otherwise 可以用于设置默认路由地址。简单来说就是将未设置的url自动重定向到此url。
路由参数
angular.module(‘Module.Post‘, [‘ngRoute‘])
.config([
‘$routeProvider‘,
function ($routerProvider) {
$routerProvider
.when(‘/post‘, {
templateUrl: ‘post.html‘,
controller: ‘PostController‘
})
.when(‘/post/:postId‘, {
templateUrl: ‘post-id.html‘,
controller: ‘PostIdController‘
})
}
])
.controller(‘PostController‘, [
‘$scope‘,
function ($scope) {
$scope.posts = [
{
name: ‘post1‘,
id: ‘post-001‘
}, {
name: ‘post2‘,
id: ‘post-002‘
}
]
}
])
.controller(‘PostIdController‘, [
‘$scope‘,
‘$routeParams‘,
function ($scope, $routeParams) {
$scope.msg = ‘post id: ‘ + $routeParams.postId;
}
]);
路由中的 /:postId 其实是一个参数，它将匹配类似 /post/001 这种url，其中001 就是这个 :postId 的值。
我们在路由对应的控制器中，可以通过 $routeParams 参数来获取这个url参数。依次类推，我们可以为路由的url设置多个参数，比如 /post/:year/:month/:day/:postName 这样的路由，它将匹配 /post/2015/12/15/angular-router-demo 这样的路径。控制器中注入的 $routeParams 服务将会得到类似下面的对象，
{
"year": 2015,
"month": 12,
"day": 15,
"postName": "angular-router-demo"
}
http://www.tuicool.com/articles/jqMveaB
时间： 2024-10-12 20:45:37