AngularUI Router

UI-Router是一个让开发者能够根据URL状态或者说是‘机器状态’来组织和控制界面UI的渲染，而不是仅仅的只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多视图（View）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面，使用多个视图、让多个视图控制某个视图等更多的功能。

在页面引用：

<script src="framework/angular/angular.min.js"></script>
<script src="framework/angular-ui-router.js"></script>

将UI-Router注入到住主程序：

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

使用方法：

设置模板A

<nav ui-view="A"></nav>

在路由中定义：默认页面

  $urlRouterProvider.otherwise("/index");

模板A：加载的页面是

  templateUrl: 'components/header/header.html',

A模板控制器：不需要再去A模板页面定义控制器，可以实现切换控制器

controller: 'headerCtrl'

完整代码：

angular.module('myRouters', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider) {
            $urlRouterProvider.otherwise("/index");
            $stateProvider
                .state('index', {
                    url: '/index',
                    title: ' | ！',
                    views: {
                        'A': {
                            templateUrl: 'components/header/header.html',
                            controller: 'headerCtrl'
                        }
                    }
                })
             
        }]);

UI-Router支持视图嵌套：比如在index页面加载A（页面），A（页面）加载B（页面）视图

index.html:

在index页面加载一个视图A（页面）

<nav ui-view="A"></nav>

视图A（页面）：A视图嵌入了B页面

<div>内容</div>
<nav ui-view="页面"></nav>

路由写法：

.state('index', {
    url: '/index',
    title: ' | ！',
    views: {
        'A': {
            templateUrl: 'components/header/header.html',
            controller: 'headerCtrl'
        } ,
        'B@index': {
            templateUrl: 'components/header/h1.html',
            controller: 'H2Ctrl'
        }
    }
})