首頁 > 文章 > web前端 > 實例詳解基於angular-utils-ui-breadcrumbs使用心得

實例詳解基於angular-utils-ui-breadcrumbs使用心得

小云云原創: 2017-12-28 11:24:151498瀏覽

angular-utils-ui-breadcrumbs是一個用來自動產生麵包屑導覽列的插件，需要依賴angular、UIRouter和bootstrap3.css。產生的介面截圖如下，點選對應的麵包屑會跳到對應的路由，點選對應的路由也會自動產生對應的麵包屑：本文主要為大家帶來一篇基於angular-utils-ui-breadcrumbs使用心得(分享)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

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

模組依賴：

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 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: '<p ui-view="content"></p>'
    }
   }
  })
  .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: &#39;apple&#39;})">apple</a></li>
      <li><a ui-sref=".detail({type: &#39;banane&#39;})">banane</a></li>
      <li><a ui-sref=".detail({type: &#39;pear&#39;})">pear</a></li>
     </ul>`
    }
   }
  })
  .state('home.production.fruits.detail', {
   url: '/:type',
   data: {
    displayName: 'detail'
   },
   views: {
    'content@home': {
     template: '<p>{{$resolve.fruit}}</p>'
    }
   },
   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使用心得

相關文章