如何使用 uirouterextras

为了使用ui-router创建tabs构架，使用ui-router-extras

使用方法：

0. 安装包

bower install ui-router-extras --save-dev

1. 引入js文件

<script type="text/javascript" src="{% static 'bower_components/angular-ui-router/release/angular-ui-router.min.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/ui-router-extras/release/ct-ui-router-extras.min.js' %}"></script>

2. 在app.js中

    angular.module('****',[ 'ct.ui.router.extras' ]);

    angular.module('****').run(run);

    run.$inject = ['$rootScope','$state']

    function run($rootScope, $state){

　　    $rootScope.$state = $state;

    }

3. 在index.html中，需要几个并列的ui-view，拥有不同命名，每个route 的state定位到一个ui-view。使用ng-show来控制显示哪个ui-view

　　<div ui-view='tab1' ng-show="$state.includes('tab1')></div>

　　<div ui-view='tab2' ng-show="$state.includes('tab2')></div>

4. 在app.route.js中

    

var searchState = {

        name: 'tab1',

        url: '/tab1',

        sticky: true,

        dsr: true,

        views: {

            'tab1': {

                     templateUrl: '/path/to/template'

             }

         },

    }

            

　　tab2类似。

---

注：

1. 只须引入ui-router的js文件，在app.js中无须依赖ui-router，改成ct.ui.router.extras即可

2. 需要sticky的ui-view一定需要命名。若有不需要sticky的ui-view或者tab，需要预留一个无命名的ui-view

3. 一个named ui-view只能被target一回。

未完待续，随时补充修改。