ngRoute

ngRoute 模块中包含以下内容，

名称所属作用
ngView DIRECTIVE 提供不同路由模板插入的视图层
$routeProvider PROVIDER 提供路由配置
$route SERVICE 用于构建各个路由的url、view、controller这三者的关系
$routeParams SERVICE 解析返回路由中带有的参数
  1. 在主模板中使用 ngView 定义一个路由模板的视图层。不同路由对应的模板将会插入到这个 ngView 所在的dom元素下。
  2. 使用 $routeProvider 进行路由配置，包括每一个路由对应的url，template以及controller。除了这些基本的配置之外，还会有一些额外的配置，比如 resolve 配置等。
  3. 在每个路由的controller中完成对应的业务逻辑。
  4. 可以通过注入 $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

 

posted @ 2016-08-21 12:16  爆炒小黄鸡  阅读(256)  评论(0)    收藏  举报