如何使用 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一回。

未完待續，隨時補充修改。