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点半了,睡觉了.....