angular-utils-ui-breadcrumbs使用心得

時間 2019-12-13

標籤 angular utils breadcrumbs 使用心得欄目 AngularJS 简体版

原文原文鏈接

angular-utils-ui-breadcrumbs是一個用來自動生成麪包屑導航欄的一個插件，須要依賴angular、UIRouter和bootstrap3.css。生成的界面截圖以下，點擊相應的麪包屑會跳轉到相應的路由，點擊相應的路由也會自動生成相應的麪包屑：css

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

github：https://github.com/michaelbromley/angularUtils/tree/master/src/directives/uiBreadcrumbsgit

模塊依賴：github

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模塊，咱們不須要在這裏重複引入。npm

文件目錄結構以下：bootstrap

<!--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="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
                }]
            }
        })
}]);

下面詳細說明一下該插件的使用方法:app

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

dispalyname-property：（必須的），該屬性指向了你聲明路由時候的state配置對象的某個屬性，該屬性的值就是在該路由下面包屑會展現的值，若是沒有指定，將會展現state的name屬性。ide

template-url: （可選）指定uiBreadcrumbs.tpl.html的路徑，該文件是ui-breadcrumbs指令的模版，若是不指定，將默認使用如下目錄，如下是源碼的內容：ui

 　 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這個狀態。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。