Angular学习之ui-router
2016-02-26 | heke

Angular有自己的内置路由模块：ngRoute。ngRoute对于小型应用来说挺ok，但面对复杂型应用便会有些力不从心，所以有了ui-route这个第三方路由模块，它允许你通过状态机组织接口，而不是简单的URL路由。

ui-router提供哪些指令和服务

指令和服务

  • $urlRouterProvider(服务提供者) //用来配置路由重定向
  • $urlRouter(服务)
  • $stateProvider(服务提供者) //用来配置路由
  • $state(服务) //用来显示当前路由状态信息，以及一些路由方法（如：跳转）
  • $stateParams(服务) // 用来存储路由匹配时的参数
  • ui-view(指令) // 路由模板渲染，对应的dom相关联
  • ui-sref(指令)//给对应的dom添加click事件，然后根据state.name直接跳转到对应的state

要定义路由，可以使用.config方法，和常见的方式一样，不过ui-route是讲状态设置在$stateProvider上。

1
2
3
4
5
6
7
8

.config(function($stateProvider,$urlRouteProvider){
$stateProvider
    .state('index',{
     url:'/index',
     templateUrl:'index.html'
})
)};

这一步给状态配置对象分配了一个名为index的状态。这个状态也有一些与路由配置对象相似的选项，来配置应用程序的状态

1.template、templateUrl、templateProvider

在每个视图上设置模板的方式有三种。

  • template：一个HTML内容字符串或者返回HTML的函数
  • templateUrl:一个模板URL路径字符串或者是返回URL路径字符串的函数（如上述例子）
  • templateProvider:一个返回HTML内容字符串的函数

2.controller，resolve

和ngRoute一样，可以给一个已经注册好的控制器关联一个URL，也可以创建一个控制器函数作为状态控制器

我们还可以使用resolve功能解析要注入到控制器中得依赖列表。这个resolve选项就是一个对象，其中键就是要注入到控制器中得依赖名称，而其值就是待解析的factories。

3.url

url选项可以给应用程序的状态分配一个唯一的URL，例如在上述的例子中，当用户导航到/index时，应用会转到inbox状态，然后使用模板中得内容填充到ui-view指令。

URL可以接受一系列不同的选项，还可以在url中设置基本的参数

1
2
3
4
5
6
7
8
9
10

$stateProvider
    .state('index',{
        url:'/index/:id',
        templateUrl:'index.html',
        controller:function($scope,$stateParams){
        $scope.id=$stateParams.id
    }
})
)};

应用会捕获作为URL第二个组成部分的：id。例如如果用户跳转到、index/1，$stateParams.id就是1.

4.嵌套路由

可以使用url参数以插入路由的方式提供嵌套路由。这样可以在页面或者模板内包含多个ui-views。这个方面也是比起ngRoute更加强大的地方之一让我们可以实现嵌套视图（页面某个动态变化区块中，嵌套着另一个可以动态变化的区块）。例如：

1
2
3
4
5
6
7
8
9
10
11

$stateProvider
    .state('parent', {
        abstract: true,
        url: '/parent',
        template: 'I am parent <div ui-view></div>'
    })
    .state('parent.child', {
        url: '/child',
        template: 'I am child'
});

现在/parent匹配第一个状态，而/parent/child匹配第二个状态。使用这种语法，可以在父路由中嵌套URL。父视图中得ui-view会解析子路由的视图。

5.views

ui-router的另一个强大的地方是可以在一个状态内设置多个命名视图。在独立的视图内，你可以在独立模板中定义多个要引用的视图。

如果设置了views参数，那么状态的template那些就会被忽略。如果你像在路由中包含父模板，就需要创建一个包含模板的抽象状态。（abstract）

比方说有一个视图：

1
2
3
4
5
<div>
<div ui-view="filters"></div>
<div ui-view="mailbox"></div>
<div ui-view="priority"></div>
</div>

现在，可以创建命名视图来填充每个独立的模板。每个子视图都可以包含它自己的模板、控制器和resolve

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$stateProvider
        .state('home', {
            url: '/',
            views: {
              'filters': {
                    templateUrl: 'filters.html',
                    controller:function($scope){}
            },
              'mailbox': {
                    templateUrl: 'mailbox.html'
            },
              'priority': {
                    templateUrl: 'priority.html'
            }
}
});

6.abstract

可以使用抽象模板提供一个模板包装器来包裹多个命名视图，或者传递$scope对象给子节点。可以在同一url下嵌套多个路由（比如所以路由都在/index下）例如嵌套路由下得例子。抽象模板永远不能直接激活，但是可以设置被激活的子节点。