angular ui router tabs 挺实用的一个标签路由组件

大佬教程收集整理的这篇文章主要介绍了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',params:  {
                 accountId: account.id
               },options: {}
    }

5.然后就是在页面上写标签啦,

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

很骚,推荐使用哦,记得网上有个在线案例的,一下找不到了,

好困,都11点半了,睡觉了.....

大佬总结

以上是大佬教程为你收集整理的angular ui router tabs 挺实用的一个标签路由组件全部内容，希望文章能够帮你解决angular ui router tabs 挺实用的一个标签路由组件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。