如何使用 ui-router-extras

为了使用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一回。

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