angular-utils-ui-breadcrumbs使用心得
angular-utils-ui-breadcrumbs是一个用来自动生成面包屑导航栏的一个插件，需要依赖angular、UIRouter和bootstrap3.css。生成的界面截图如下，点击相应的面包屑会跳转到相应的路由，点击相应的路由也会自动生成相应的面包屑：
安装：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模块，我们不需要在这里重复引入。
文件目录结构如下：
<!--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使用心得的更多相关文章
- 开始学习Angular Mobile UI
介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...
- 阿里云 Angular 2 UI框架 NG-ZORRO介绍
说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...
- 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 ...
- Angular第三方UI组件库------ionic
一.Angular UI组件库 ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...
- angular中ui calendar的一些使用心得
ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...
- 容器化分布式日志组件ExceptionLess的Angular前端UI
写在前面 随着微服务架构的流行,日志也需要由专门的分布式日志组件来完成这个工作,我们项目使用的是 ExceptionLess 这个组件,它是前后端分离的:这篇文章我们就来实践容器化 Exception ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Domino Angular 前端UI开发
因为如今前端的要求越来越专业化,不少企业已经有前端的专业职位了.当然我们dominio软件企业.有些也在特意招一些前端的project师. 比方如今流程的多平台(之前我的有教程).就必需要有专业的UI ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- Angular Mobile UI API文档
这个是angular-mobile-ui的主要模块 应用这个模块你也将同时获取到mobile-angular-ui.core和mobile-angular-ui.components的特性 他不在需要 ...
随机推荐
- 离线安装 Cloudera Manager 5 和 CDH5.10
关于CDH和Cloudera Manager CDH (Cloudera's Distribution, including Apache Hadoop),是Hadoop众多分支中的一种,由Cloud ...
- 软件工程个人第二小项目——wc
github源码和工程文件地址:https://github.com/HuChengLing/wc 基本要求:要实现wc的基本功能即文件中字符数.单词数.行数的统计. 主要功能:文件中字符数.单词数. ...
- XML（二）之DTD——XML文件约束
前面介绍了XML的作用和基本的格式,今天我给大家分享的是关于XML的约束.废话不多说,我们直接来正题! 一.DTD简介 1.1.DTD概述 DTD(Document Type Definition,文 ...
- 翻译 | 使用A-Frame打造WebVR版《我的世界》
原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是 Kevin Ngo,一名就职于 Moz ...
- css常用属性2
1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...
- 基于NIO和BIO的两种服务器对比
基于BIO的服务器,服务端可能要同时保持几百万个HTTP连接,而这些连接并不是每时每刻都在传输数据,所以这种情况不适合使用BIO的服务器:而且需要保证共享资源的同步与安全,这个实现起来相对复杂.这时候 ...
- mysql技能提升篇 - Sqlyog高级应用
mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...
- bzoj1051（明星奶牛）
这道就是明星奶牛,A了一次又一次了,(⊙o⊙)-(⊙o⊙)- 去年pas就打了不下5次,就是强联通缩点,然后求出度为0的块 判断有多个的话就无解,一个就输出块的大小. #include<cstd ...
- Ubuntu 14.04 安装 Sublime Text 3
1. 实验环境 Ubuntu 14.04 + Sublime text 3 2. sublime text介绍 ublime Text 是一款流行的文本编辑器软件,有点类似于TextMate,跨平台, ...
- 将图标LOGO之类的图形图像转换成字体调用方法大全
借鉴百度对此标题的评价: 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载 ...