文档章节

AngularJS常用插件与指令收集

执剑天涯-诗酒作伴
 执剑天涯-诗酒作伴
发布于 2017/09/01 19:14
字数 1051
阅读 5
收藏 0
点赞 0
评论 0

使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出。有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中。

图片视频类

  • angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、imageloadedMasonry
  • angular-deckgrid 另一个照片瀑布流解决方案
  • ngImgCrop 图片剪裁工具
  • ngVideo 播放器,直接播放指定地址的mp4,控制按钮美观度远甩朝内99.99%的视频站
  • angular-image-404img 元素的图片无法正常获取时,使用这个指令可以显示占位图片,可以自定义占位图,也可以使用默认的占位图

输入控件类

  • ngDraggable 控制元素拖动的控件,Demo
  • ui-sortable 以拖动的方式调整数组中元素的索引和位置,依赖 jQuery 和 jQuery-ui。Demo
  • ngAutocomplete 喜闻乐见的自动补完
  • textAngular 文本编辑器,更简洁,更漂亮
  • ngTagsInput 以标签的方式来组织输入
  • Angular-slider 以拖动方式输入值的控件
  • Angular Slidezilla 与Angular-slider功能一样,只不过设计风格不一样
  • Checklist-model AngularJS 多选框输入的值处理得并不好,通过这个指令,可以方便的将多选框的值直接组织成数组

文本编辑器

  • textAngular 在 Github 中排名第一的 HTML 编辑器, Demo(需翻墙)
  • Angular Froala 非常好用的另外一个 HTML 编辑器,而且支持 inline 编辑,比 textAngular 漂亮,Github
  • angular-umeditor 百度umeditor的AngularJS扩展,umeditor从界面上讲并不够现代化,但却总有人喜欢它

界面类

  • ui-bootstrap 官方扩展,在AngularJS中方便的以指令的方式使用Bootstrap
  • ui-map 用于在页面中集成Google Maps
  • NG-Grid 官方提供的表格插件,支持表格的主题、排序、直接编辑、多行选择等操作,而且使用非常简单,只需要一行HTML代码,但是,比较难看,适合于不讲究外观但要求功能强大的场合,像后台工具、管理系统之类
  • angular-table 第三方表格工具,适合于需要对表格进行高度定制的场合
  • ng-table 在易用性和外观上对上面两个进行折衷的解决方案
  • AngularUI 上面的ui-bootstrap、ui-map就是它的一部分,官方提供的常用扩展集,除了这两个,还有ui-router、ui-select等,注意,它使用的是Bootstrap 2.x
  • Adapt-Strap 第三方Bootstrap插件,而且是基于扁平化的Bootstrap 3,更美观
  • ng-polymer-elements Polymer风格的AngularJS指令,Material Design设计,值得尝试
  • Angular Loading Bar 可用于在页面顶部增加一个漂亮的进度条
  • angular-busy 与Angular Loading Bar有点类似,主要用于处理$http通信时候的动画
  • ngInfiniteScroll 从名字可以看出来,它是一个用于组织瀑布流和时间线的扩展
  • ngScrollTo 页内滚动工具,可以将页面滚动到指定id的元素位置
  • ngDialog 比Bootstrap更简单,更好用,更漂亮的网页对话框
  • Angular Treeview 树状目录组织扩展,使用相当方便,而且不依赖于jQuery
  • angular-growl 用于在页面上显示警告框,可以设置显示时间,还可以直接显示$http中收到的警告
  • angular-truncate 当文字过多过长时,显示部分文字的插件,可以按文字总长度来控制,也可以按单词数量来控制
  • angular-fallback-image 当你的图片地址返回的是 404 的时候,使用这个插件可以将其替换为另外的占位图

其它工具类

  • angular-translate AngularJS的i18n扩展
  • Satellizer 可以方便的在AngularJS中集成第三方账号登录,支持国际主流社交网站账号,支持协议有OAuth 1.0/2.0
  • ngStorage 本在存储插件,用于处理localStorage和sessionStorage
  • ng-csv 导出csv的扩展
  • angular-once 双向绑定虽然方便,但如果数据太多,会造成一些性能问题。angular-once的解决方案是,对于不涉及到修改的数据,不要使用双向绑定,而是使用angular-once提供的once-textonce-src等等。

本文转载自:https://chensd.com/2015-06/AngularJS-popular-Plugins-and-Directive.html

共有 人打赏支持
执剑天涯-诗酒作伴
粉丝 0
博文 12
码字总数 5924
作品 0
乌鲁木齐

暂无文章

Spring Boot 整合 MyBatis/通用Mapper/PageHelper分页插件

整合MyBatis 整合通用Mapper 1. POM依赖配置 <properties><mapper.starter.version>2.0.3-beta1</mapper.starter.version></properties><!-- 通用Mapper --><dependency><groupId>t......

OSC_fly
12分钟前
0
0
CentOS7 双网卡绑定

环境 操作系统 CentOS7.5,禁用 NetworkManager 服务 网卡 eth0 网卡 eth1 绑定网卡 bond0 网卡 eth0 配置 修改 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=EthernetBOOTPROTO=noneD......

Colben
14分钟前
0
0
zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
30分钟前
10
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
30分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
33分钟前
4
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
39分钟前
1
0
《射雕英雄传》书摘

1. 我虽是个飘泊江湖的贫家女子,可不是低三下四、不知自爱之人。你如真心爱我,须当敬我重我。我此生决无别念,就是钢刀架颈,也决意跟定了你。将来……将来如有洞房花烛之日,自然……自能...

k91191
49分钟前
0
0
解决:modal中datePicker 选中时,会触发modal的hidden.bs.modal事件

最近项目中发现了一个bug,具体表现为选中模态框上datepicker组件上的日期时,会触发模态框的关闭事件,导致数据编辑无法正常进行。网上搜索了下,解决方法如下: $('.datepicker').on('hid...

Funcy1122
53分钟前
0
0
Redis分布式锁的正确实现方式

前言 分布式锁一般有三种实现方式: 1.数据库乐观锁 2.基于Redis的分布式锁; 3.基于Zookeeper的分布式锁。本篇博客将介绍第二种方式,基于Redis实现分布式锁。虽然网上已经有各种介绍Redis...

大海201506
今天
2
0
ClassNotFoundException: javax.el.ELManager

这个是因为tomcat7中的el-api2.2,有些版本太低,建议升级tomcat到8.0,利用el-api3.0就会解决这个问题。

无语年华
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部