angular ui router tabs 挺實用的一個標籤路由組件

前段時間在項目中用了一個蠻好玩的angular-ui-router組件這裏推薦一下,

angular-ui-router-tabs,下面是git地址

https://github.com/rpocklin/ui-router-tabs

下面介紹一下怎麼用,我的感受仍是蠻騷的

1.固然是把它down到你的angular項目中嘍,

bower install angular-ui-router-tabs --save

2.而後不要忘了把它加到你的angular項目模塊中,還有要引入文件哦

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

<script src="bower_components/angular-ui-router-tabs/src/ui-router-tabs.js"></script>

3.而後在入口文件的路由配置中,要這麼寫

$stateProvider.state('user', {
      url:         '',
      controller: 'UserCtrl',
      templateUrl: 'example.html'
    }).state('user.settings', {
      url:         '/user/settings',
      templateUrl: 'user/settings.html'
    }).state('user.accounts', {
      url:         '/user/accounts',
      templateUrl: 'user/accounts.html'
    });

4.在主控制器中,也就是UserCtrl控制器中,記得加上標籤組

$scope.tabData   = [
      {
        heading: 'Settings',
        route:   'user.settings'
      },
      {
        heading: 'Accounts',
        route:   'user.accounts',
        disable: true
      }
    ];

固然,也能夠在這個上面加上參數路由,好比這樣

{
      heading: 'Accounts',
      route:   'user.accounts',
      params:  {
                 accountId: account.id
               },
      options: {}
    }

5.而後就是在頁面上寫標籤啦,

<div ng-controller="UserCtrl">
 <tabs data="tabData" type="tabs"></tabs>
</div>

很騷,推薦使用哦,記得網上有個在線案例的,一下找不到了,

好睏,都11點半了,睡覺了.....