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: '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: '<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這個狀態。
相關推薦:
AngularJS中controller控制器繼承的方法教程
實例分享angular中ui calendar的一些使用心得
#以上是實例詳解基於angular-utils-ui-breadcrumbs使用心得的詳細內容。更多資訊請關注PHP中文網其他相關文章!