angular-utils-ui-breadcrumbs使用心得

时间：2021-11-26 06:19:05

angular-utils-ui-breadcrumbs是一个用来自动生成面包屑导航栏的一个插件，需要依赖angular、UIRouter和bootstrap3.css。生成的界面截图如下，点击相应的面包屑会跳转到相应的路由，点击相应的路由也会自动生成相应的面包屑：

angular-utils-ui-breadcrumbs使用心得

安装：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模块已经依赖了ui.router模块，我们不需要在这里重复引入。

文件目录结构如下：

angular-utils-ui-breadcrumbs使用心得

<!--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

                }]

            }

        })

}]);

下面详细说明一下该插件的使用方法:

<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使用心得的更多相关文章

  1. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

  2. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  3. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  4. Angular第三方UI组件库------ionic

    一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...

  5. angular中ui calendar的一些使用心得

    ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...

  6. 容器化分布式日志组件ExceptionLess的Angular前端UI

    写在前面 随着微服务架构的流行,日志也需要由专门的分布式日志组件来完成这个工作,我们项目使用的是 ExceptionLess 这个组件,它是前后端分离的:这篇文章我们就来实践容器化 Exception ...

  7. angular路由——ui&period;route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. Domino Angular 前端UI开发

    因为如今前端的要求越来越专业化,不少企业已经有前端的专业职位了.当然我们dominio软件企业.有些也在特意招一些前端的project师. 比方如今流程的多平台(之前我的有教程).就必需要有专业的UI ...

  9. angular 的ui&period;router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  10. Angular Mobile UI API文档

    这个是angular-mobile-ui的主要模块 应用这个模块你也将同时获取到mobile-angular-ui.core和mobile-angular-ui.components的特性 他不在需要 ...

随机推荐

  1. Win8&period;1密钥

    Win8.1 在线永久激活密钥一枚!  78BHN-M3KRH-PCP9W-HQJYR-Q9KHD [剩余次数:7K多+] 继续增加 [Key]:HPCJW-VGYW4-CR7W2-JG6Q7-K4Q ...

  2. SQL Server里等待统计（Wait Statistics）介绍

    在今天的文章里我想详细谈下SQL Server里的统计等待(Wait Statistics),还有她们如何帮助你立即为什么你的SQL Server当前很慢.一提到性能调优,对我来说统计等待是SQL S ...

  3. 使用 tox flake8 pytest 规范 python 项目

    使用 tox flake8 pytest 规范 python 项目 python 中有些很好的工作来规范整个项目的开发,而其中使用较多的就是使用 tox . flake8 . pytest . tox ...

  4. python参考手册--第1章python简介

    1.if __name__ == '__main__': 直接运行myModel.py时,当前模块的名字是main:import myModel然后运行的时候当前模块的名字是myModel. 2.ev ...

  5. 如何让ubuntu启动时打印字符信息----字符启动

    一.概述 要想实现字符启动,需要修改grub.cfg(启动配置文件),将“静态启动”改为“字符启动”. 但是grub.cfg通常只作为只读文件,修改它时实际上修改的是其他的文件然后再通过update- ...

  6. JS &amp&semi; JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  7. spark MLLib的基础统计部分学习

    参考学习链接:http://www.itnose.net/detail/6269425.html 机器学习相关算法,建议初学者去看看斯坦福的机器学习课程视频:http://open.163.com/s ...

  8. &period;Net IOC框架入门之二 CastleWindsor

    一.简介 Castle是.net平台上的一个开源项目,为企业级开发和WEB应用程序开发提供完整的服务,用于提供IOC的解决方案.IOC被称为控制反转或者依赖注入(Dependency Injectio ...

  9. lintcode 在O&lpar;1&rpar;时间复杂度删除链表节点

    题目要求 给定一个单链表中的一个等待被删除的节点(非表头或表尾).请在在O(1)时间复杂度删除该链表节点. 样例 Linked list is 1->2->3->4, and giv ...

  10. JDK--box和unbox

    目录 什么是装箱.拆箱 基本类型和包装类型 为什么会有基本类型? 为什么还要有包装类型 两者区别 两者互转 源码分析(JDK1.8版本) valueOf方法 1.Integer.Short.Byte. ...

相关文章