angular路由好伙伴儿ui-router-白红宇

angular路由好伙伴儿ui-router

阅读量：4626 次

发布时间：2019-06-09

本文共 2341 字，大约阅读时间需要 7 分钟。

在用angular实际开发中能意识到路由对于单页面应用的重要。

哎呀，怎么写好纠结啦~

ui-router的优点
相对于angular内置的ngRoute路由模块，ui-router还是有很多优势的，在多视图和路由嵌套中表现优异（此处可以有掌声），而在实际开发中我们需要多视图和嵌套视图来使页面具有多个动态变化的不同区块。相比于ngRoute视图没有名字进行唯一标志，路由配置只有一个模板，无法配置多个。ui-router无疑强大很多
```
       
       
　
```
```
$stateProvider    .state('home', {        url: '/',        views: {            '': {                template: 'hello world'            },            'status': {                template: 'home page'            }        }    });
```
　　　
1. 可以给视图命名，如：ui-view="status"。
2. 可以在路由配置中根据视图名字(如：status)，配置不同的模板（其实还有controller等）。
3. 最常用的功能无疑是试图嵌套啦，在业务场景中我们会需要页面一个主区块显示主内容，主内容中的部分内容要求根据路由变化而变化，这时就需要另一个动态变化的区块嵌套在主区块中。
  在ui-router中可以有一种父子层级关系，通过父子关系将子路由的模板最终也将被插入到父路由模板的div[ui-view]中去，从而达到视图嵌套的。
```
$stateProvider    .state('parent', {        abstract: true,        url: '/',        template: 'I am parent 
         
'    })    .state('parent.child', {        url: '',        template: 'I am child'    });
```

引入ui-router

angular.module("myApp", ["ui.router"]);

配置路由

ui-router的路由配置是基于状态的。我觉得呢配置路由的过程就是定义状态的过程。

一个状态可以有哪些配置项呢？

状态的名称
```
state('stateName', {})
```
例如上面父子关系例子里面parent和 parent.child都是状态名称

状态的视图

可以看一个例子，一个应用一般都会有header ，footer，以及导航栏。

$stateProvider            	.state('root', {                url: '/',                templateUrl: '/app/root.html',            })            .state('root.home', {                url: 'home',                views: {                    'navView': {                        templateUrl: '/app/layout/navigation/navigation.html',                        controller: 'NavigationController',                        controllerAs: 'Navigation'                    },                    'siderView': {                        templateUrl: '/app/layout/sider/sider.html',                        controller: 'SiderController',                        controllerAs: 'Sider'                    },                    '': {                        templateUrl: '/app/home/home.html',                        controller: 'HomeController',                        controllerAs: 'Home'                    }                }            })

可以看到先定义了一个root的状态，对应根路径，以及模板‘/app/root.html’

然后在root下定义了一个root.home的子状态。多视图~

差不多就是这个样子啦，你还可以根据具体的情况去定义root.biz, root.biz.aa 啦balabala的状态去实现路由的切换视图模板的变化