溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹angular-utils-ui-breadcrumbs怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
angular-utils-ui-breadcrumbs是一個用來自動生成面包屑導航欄的一個插件，需要依賴angular、UIRouter和bootstrap3.css。生成的界面截圖如下，點擊相應的面包屑會跳轉(zhuǎn)到相應的路由，點擊相應的路由也會自動生成相應的面包屑：
安裝：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模塊已經(jīng)依賴了ui.router模塊，我們不需要在這里重復引入。
文件目錄結(jié)構(gòu)如下：
<!--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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 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.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: '<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指令的模版，如果不指定，將默認使用以下目錄，以下是源碼的內(nèi)容：
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到該狀態(tài)的。因此我們就不能夠展示該狀態(tài)的面包屑，因為當點擊一個abstract state將會導致一個異常，所以為了解決這種情況，我們可以讓abstract-proxy-property指向一個state config屬性，該屬性的值是某個state.name,即某個路由，當需要顯示abstract state的面包屑的時候，將會尋找該state.name來代替該abstract state，如以上例子，我們指定了home.info這個狀態(tài)。
以上是“angular-utils-ui-breadcrumbs怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼