您的當(dāng)前位置：首頁基于angular-utils-ui-breadcrumbs使用心得(分享)

基于angular-utils-ui-breadcrumbs使用心得(分享)

來源：九壹網(wǎng)

angular-utils-ui-breadcrumbs是一個(gè)用來自動(dòng)生成面包屑導(dǎo)航欄的一個(gè)插件，需要依賴angular、UIRouter和bootstrap3.css。生成的界面截圖如下，點(diǎn)擊相應(yīng)的面包屑會(huì)跳轉(zhuǎn)到相應(yīng)的路由，點(diǎn)擊相應(yīng)的路由也會(huì)自動(dòng)生成相應(yīng)的面包屑：

安裝：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模塊，因?yàn)樵搖iBreadcrumbs依賴于$stateChangeSuccess事件，而uiRouter在1.x版本之后推薦使用Transition鉤子，為了兼容原來的版本，將不被推薦的state events事件封裝到了stateEvent.js文件中，該文件在UIRouter包中，所以我們需要引入該文件，angularUtils.directives.uiBreadcrumbs模塊已經(jīng)依賴了ui.router模塊，我們不需要在這里重復(fù)引入。

文件目錄結(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  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
 }]
 }
 })
}]);

下面詳細(xì)說明一下該插件的使用方法：

<ui-breadcrumbs displayname-property="data.displayName"
 [template-url=""]
 [abstract-proxy-property=""]>
</ui-breadcrumbs>

dispalyname-property：（必須的），該屬性指向了你聲明路由時(shí)候的state配置對(duì)象的某個(gè)屬性，該屬性的值就是在該路由下面包屑會(huì)展示的值，如果沒有指定，將會(huì)展示state的name屬性。

template-url: （可選）指定uiBreadcrumbs.tpl.html的路徑，該文件是ui-breadcrumbs指令的模版，如果不指定，將默認(rèn)使用以下目錄，以下是源碼的內(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: （可選），當(dāng)使用abstract state的時(shí)候，我們是不能夠transition到該狀態(tài)的。因此我們就不能夠展示該狀態(tài)的面包屑，因?yàn)楫?dāng)點(diǎn)擊一個(gè)abstract state將會(huì)導(dǎo)致一個(gè)異常，所以為了解決這種情況，我們可以讓abstract-proxy-property指向一個(gè)state config屬性，該屬性的值是某個(gè)state.name,即某個(gè)路由，當(dāng)需要顯示abstract state的面包屑的時(shí)候，將會(huì)尋找該state.name來代替該abstract state，如以上例子，我們指定了home.info這個(gè)狀態(tài)。

以上這篇基于angular-utils-ui-breadcrumbs使用心得(分享)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

基于angular-utils-ui-breadcrumbs使用心得(分享)