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


Posted in Javascript onNovember 03, 2017

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

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

<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使用心得(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 #Javascript
微信小程序实现图片放大预览功能
Oct 22 #Javascript
极简主义法编写JavaScript类
Nov 02 #Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
拼音码表的生成
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript prototype原型操作笔记
2009/12/07 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python调用shell的方法
2013/11/20 Python
python访问系统环境变量的方法
2015/04/29 Python
python os用法总结
2018/06/08 Python
python实现图片批量压缩程序
2018/07/23 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
关于毕业的广播稿
2014/01/10 职场文书
运动会广播稿150字
2014/02/19 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
爱情寄语大全
2014/04/09 职场文书
致运动员赞词
2015/07/22 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js