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.html--><!DOCTYPE html><html lang="en" ng-app="myapp" ng-strict-di><head> <meta charset="UTF-8"> <title>angular-utils-ui-breadcrumbs</title> <link rel="external nofollow" rel="stylesheet"></head><body><ui-breadcrumbs displayname-property="data.displayName" abstract-proxy-property="data.proxy" template-url="./uiBreadcrumbs.tpl.html"></ui-breadcrumbs><ui-view name="home"></ui-view></body><script src="https://cdn.bootcss.com/angular.js/1.6.0/angular.min.js"></script><script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script><script src="stateEvents.js"></script><script src="uiBreadcrumbs.js"></script><script src="index.js"></script></html>
//index.jsvar 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: '<div ui-view="content"></div>' } } }) .state('home.info', { url: '/info', data: { displayName: 'home' }, views: { 'content@home': { template: '<a ui-sref="^.production">production</a>' } } }) .state('home.production', { url: '/production', data: { displayName: 'production' }, views: { 'content@home': { template: '<a ui-sref=".fruits">fruits</a>' } } }) .state('home.production.fruits', { url: '/fruits', data: { displayName: 'fruits' }, views: { 'content@home': { template: `<ul> <li><a ui-sref=".detail({type: 'apple'})">apple</a></li> <li><a ui-sref=".detail({type: 'banane'})">banane</a></li> <li><a ui-sref=".detail({type: 'pear'})">pear</a></li> </ul>` } } }) .state('home.production.fruits.detail', { url: '/:type', data: { displayName: 'detail' }, views: { 'content@home': { template: '<div>{{$resolve.fruit}}</div>' } }, resolve: { fruit: ['$stateParams', $stateParams =>{ return $stateParams.type }] } })}]);下面詳細說明一下該插件的使用方法：
<ui-breadcrumbs displayname-property="data.displayName" [template-url=""] [abstract-proxy-property=""]></ui-breadcrumbs>
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使用心得(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
