AngularJS常用插件与指令收集
2016-06-26 18:47
471 查看
使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出。有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中。
angular-deckgrid 另一个照片瀑布流解决方案
ngImgCrop 图片剪裁工具
ngVideo 播放器,直接播放指定地址的mp4,控制按钮美观度远甩朝内99.99%的视频站
angular-image-404 当
ui-sortable 以拖动的方式调整数组中元素的索引和位置,依赖 jQuery 和 jQuery-ui。Demo
ngAutocomplete 喜闻乐见的自动补完
textAngular 文本编辑器,更简洁,更漂亮
ngTagsInput 以标签的方式来组织输入
Angular-slider 以拖动方式输入值的控件
Angular Slidezilla 与Angular-slider功能一样,只不过设计风格不一样
Checklist-model AngularJS 多选框输入的值处理得并不好,通过这个指令,可以方便的将多选框的值直接组织成数组
Angular Froala 非常好用的另外一个 HTML 编辑器,而且支持 inline 编辑,比 textAngular 漂亮,Github
angular-umeditor 百度umeditor的AngularJS扩展,umeditor从界面上讲并不够现代化,但却总有人喜欢它
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 的时候,使用这个插件可以将其替换为另外的占位图
Satellizer 可以方便的在AngularJS中集成第三方账号登陆,支持国际主流社交网站账号,支持协议有OAuth 1.0/2.0
ngStorage 本在存储插件,用于处理localStorage和sessionStorage
ng-csv 导出csv的扩展
angular-once 双向绑定虽然方便,但如果数据太多,会造成一些性能问题。
图片视频类
angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、imageloaded和Masonryangular-deckgrid 另一个照片瀑布流解决方案
ngImgCrop 图片剪裁工具
ngVideo 播放器,直接播放指定地址的mp4,控制按钮美观度远甩朝内99.99%的视频站
angular-image-404 当
img元素的图片无法正常获取时,使用这个指令可以显示占位图片,可以自定义占位图,也可以使用默认的占位图
输入控件类
ngDraggable 控制元素拖动的控件,Demoui-sortable 以拖动的方式调整数组中元素的索引和位置,依赖 jQuery 和 jQuery-ui。Demo
ngAutocomplete 喜闻乐见的自动补完
textAngular 文本编辑器,更简洁,更漂亮
ngTagsInput 以标签的方式来组织输入
Angular-slider 以拖动方式输入值的控件
Angular Slidezilla 与Angular-slider功能一样,只不过设计风格不一样
Checklist-model AngularJS 多选框输入的值处理得并不好,通过这个指令,可以方便的将多选框的值直接组织成数组
文本编辑器
textAngular 在 Github 中排名第一的 HTML 编辑器, Demo(需FQ)Angular Froala 非常好用的另外一个 HTML 编辑器,而且支持 inline 编辑,比 textAngular 漂亮,Github
angular-umeditor 百度umeditor的AngularJS扩展,umeditor从界面上讲并不够现代化,但却总有人喜欢它
界面类
ui-bootstrap 官方扩展,在AngularJS中方便的以指令的方式使用Bootstrapui-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-text、
once-src等等。
相关文章推荐
- 带你初识Angular中MVC模型
- 《AngularJS权威教程》
- Angular2 (One framework 概要)
- AngularJS表单验证开发案例
- Jquery input valeu 改变 AngularJS ng-model 值同步 值改变
- Num60 (p2p项目简介,环境搭建,angularjs)
- Protractor(angular定制的e2e)的简易入门
- 《AngularJS》-----手机页面滚动条滑动到底端实现加载更多
- AngularJS控制器
- AngularJS简单介绍
- Angularjs 跨域请求
- AngularJS 简介
- Angularjs 跳转页面并传递参数的方法总结
- 关于angularJS绑定数据时自动转义html标签
- AngularJS入门的一个web开发实例
- angular 1与angular2区别
- angularjs 菜鸟教程 版本1.4.6
- AngularJS数据绑定
- Using the D3.js Visualization Library with AngularJS
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖