基于angular

基于angular

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

安装：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模块，我们不需要在这里重复引入。

文件目录结构如下：

//index.js

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

app.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) =>{

$urlRouterProvider.otherwihttp://se('/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: `

}

}

})

.state('home.production.fruits.detail', {

url: '/:type',

data: {

displayName: 'detail'

},

views: {

'content@home': {

template: '

}

},

resolve: {

fruit: ['$stateParams', $stateParams =>{

return $stateParams.type

}]

}

})

}]);

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

[template-url=""]

[abstract-proxy-propertyswazbB=""]>

[template-url=""]

[abstract-proxy-propertyswazbB=""]>

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，如以上例子，swazbB我们指定了home.info这个状态。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。