基于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 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
Express框架之connect-flash详解
May 31 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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
php.ini中文版
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Mac安装python3的方法步骤
2019/08/09 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
大学生实习思想汇报
2014/01/12 职场文书
班长自荐书范文
2014/02/11 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
离职感谢信
2015/01/21 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android