绵阳梓潼网站制作公司

angular-utils-ui-breadcrumbs怎么用

这篇文章主要介绍angular-utils-ui-breadcrumbs怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

在商南等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、成都网站建设 网站设计制作按需策划设计,公司网站建设,企业网站建设,品牌网站设计,成都营销网站建设,外贸网站建设,商南网站建设费用合理。

angular-utils-ui-breadcrumbs是一个用来自动生成面包屑导航栏的一个插件，需要依赖angular、UIRouter和bootstrap3.css。生成的界面截图如下，点击相应的面包屑会跳转到相应的路由，点击相应的路由也会自动生成相应的面包屑：

angular-utils-ui-breadcrumbs怎么用

安装：npm install angular-utils-ui-breadcrumbs

github：https://github.com/michaelbromley/angularUtils/tree/master/src/directives/uiBreadcrumbs

模块依赖：

var app = angular.module('myapp', ['ui.router.state.events','angularUtils.directives.uiBreadcrumbs']);

这里使用了ui.router.state.events模块，因为该uiBreadcrumbs依赖于$stateChangeSuccess事件，而uiRouter在1.x版本之后推荐使用Transition钩子，为了兼容原来的版本，将不被推荐的state events事件封装到了stateEvent.js文件中，该文件在UIRouter包中，所以我们需要引入该文件，angularUtils.directives.uiBreadcrumbs模块已经依赖了ui.router模块，我们不需要在这里重复引入。

文件目录结构如下：

angular-utils-ui-breadcrumbs怎么用





 
 angular-utils-ui-breadcrumbs
 











//index.js
var app = angular.module('myapp', ['ui.router.state.events','angularUtils.directives.uiBreadcrumbs']);

app.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) =>{
 $urlRouterProvider.otherwise('/home/production');
 $stateProvider
  .state('home', {
   abstract: true,
   url: '/home',
   data: {
    proxy: 'home.info'
   },
   views: {
    'home@': {
     template: '
'     }    }   })   .state('home.info', {    url: '/info',    data: {     displayName: 'home'    },    views: {     'content@home': {      template: 'production'     }    }   })   .state('home.production', {    url: '/production',    data: {     displayName: 'production'    },    views: {     'content@home': {      template: 'fruits'     }    }   })   .state('home.production.fruits', {    url: '/fruits',    data: {     displayName: 'fruits'    },    views: {     'content@home': {      template: `
          
  • apple
    •       
  • banane
    •       
  • pear
    •      
`     }    }   })   .state('home.production.fruits.detail', {    url: '/:type',    data: {     displayName: 'detail'    },    views: {     'content@home': {      template: '
{{$resolve.fruit}}
'     }    },    resolve: {     fruit: ['$stateParams', $stateParams =>{      return $stateParams.type     }]    }   }) }]);

下面详细说明一下该插件的使用方法：

dispalyname-property：（必须的），该属性指向了你声明路由时候的state配置对象的某个属性，该属性的值就是在该路由下面包屑会展示的值，如果没有指定，将会展示state的name属性。

template-url: （可选）指定uiBreadcrumbs.tpl.html的路径，该文件是ui-breadcrumbs指令的模版，如果不指定，将默认使用以下目录，以下是源码的内容：

　 var moduleName = 'angularUtils.directives.uiBreadcrumbs';
 var templateUrl = 'directives/uiBreadcrumbs/uiBreadcrumbs.tpl.html';

 /**
  * Module
  */
 var module;
 try {
  module = angular.module(moduleName);
 } catch(err) {
  // named module does not exist, so create one
  module = angular.module(moduleName, ['ui.router']);
 }

abstract-proxy-property: （可选），当使用abstract state的时候，我们是不能够transition到该状态的。因此我们就不能够展示该状态的面包屑，因为当点击一个abstract state将会导致一个异常，所以为了解决这种情况，我们可以让abstract-proxy-property指向一个state config属性，该属性的值是某个state.name,即某个路由，当需要显示abstract state的面包屑的时候，将会寻找该state.name来代替该abstract state，如以上例子，我们指定了home.info这个状态。

以上是“angular-utils-ui-breadcrumbs怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


名称栏目：angular-utils-ui-breadcrumbs怎么用
文章源于：http://myzitong.com/article/jcogih.html

其他资讯