有用的插件

悠悠 2022-06-05 03:55 272阅读 0赞

# [angular好用的插件集合（持续更新中）][angular] #

*  [angular.js][]

[dreamapplehappy][] 2015年10月14日发布

*  赞  |   20已收藏  |  358
 *  77.6k 次浏览

> 首先介绍两个学习`Angular`的学习资源[AngularJS-Learning][]还有[recipes-with-angular-js-examples][]。   
> 两个编写`Angular`的代码规范，分别是[angularjs-styleguide][]和[angular-styleguide][]

*  项目文件结构生成的插件（一般要配合[`yeoman`][yeoman]等使用）
    
     *  [generator-angular][] 这种生成器生成的文件结构是按照类型来划分的，就是`controller`放在一起，`service`放在一起，`directive`放在一起，`route`文件只有一个。这种结构适合不是很大的项目，一旦项目大了起来使用这种方式就使项目变得不太容易维护。
     *  [generator-hottowel][] 这种生成器生成的文件结构是按照模块功能来划分的；举个例子，你的项目中可能有许多模块，可能是`user`模块，`home`模块等等；每个模块都包含下面这几种文件：`module`，`controller`，`route`，`service`等；`module`用来声明这个模块，`route`是这个模块的路由文件，`service`是这个模块的服务。详情还需到`github`上面仔细了解一下。
     *  [generator-angularfire][] Yeoman Generator for AngularFire。
     *  [angular-seed][]
 *  结合一些后端的工作流
    
     *  [ngular-laravel4-workflow][]。
     *  [fullstack-demo][]。
 *  关于`Angular`的一些`UI`框架或者库
    
     *  [ionic][] 相当不错的移动应用UI框架，它自己本身就有着很出色的表现，配合`Angular`以及`ngCordova`，再加上`firebase`可以快速的打造一个`hybrid mobile app`，强烈推荐看一看。关于[`ng-cordova`][ng-cordova]可以看看[这里][Link 1]，相当不错，也是强烈推荐大家看看。
     *  [mobile-angular-ui][] 结合`Bootstrap 3`的一个移动UI。
     *  [Angular Material][] 符合[`material`][material]规范的使用`Angular`实现的一个前端框架，效果相当不错。
     *  [AngularStrap][] 一些结合`Bootstrap 3`的指令，帮助你更快的打造你的应用。
     *  [AngularUI][] 一个关于Angular的超大豪华套餐。
        
         *  [UI.Ace][]
         *  [alias][]
         *  [UI Bootstrap][]
         *  [UI Calendar][]
         *  [UI Chart][]
         *  [UI Codemirror][]
         *  [UI Date][]
         *  [UI Event][]
         *  [Angular Google Maps][]
         *  [Angular UI Grid][]
         *  [UI Indeterminate][]
         *  [UI Layout][]
         *  [UI Map][]
         *  [UI Mask][]
         *  [UI Router][] 基本是使用`Angular`必用的。
         *  [UI Scroll][]
         *  [UI Scrollpoint][]
         *  [UI Select][]
         *  [UI Slider][]
         *  [UI Sortable][]
         *  [UI Tinymce][]
         *  [UI Tour][]
         *  [UI Uploader][]
         *  [UI Validate][]
         *  [IDE Plugins][]
     *  [famous-angular][]这里顺便可以了解一下[famous][]，也是非常不错的一个关于动画的一个类库，推荐看一下。
     *  [ui-grid][] 很不错，观看[示例][Angular UI Grid]
 *  Web开发组件
    
     *  [restangular][] 开发中基本都会用到的。
     *  [ngDialog][] 非常不错的弹出窗插件，很轻量，但是功能却很强大，可以看看[示例][Link 2]。
     *  [ngMeditor][] 观看[示例][Link 3]
     *  [angular-atomic-notify][]
     *  [ngSweetAlert][] 这个弹出框插件做的也是相当不错，推荐大家去看看[示例][Link 4]，[ng-sweet-alert][]是这个插件的`ng`版本，可以查看[示例][Link 5]。
     *  [v-button][] 类似`material`规范的一个按钮组件，很不错推荐看看[示例][Link 6]。
     *  [v-modal][] 类似`material`规范的一个模态框组件，很不错推荐看看[示例][Link 7]。
     *  [ng-file-upload][] 一个上传文件的组件，很不错[示例][Link 8]。
     *  [angular-file-upload][] 观看[示例][Link 9]。
     *  [ng-iScroll][] 结合iScroll 5.x。
     *  [angular-iscroll][] 观看[示例][Link 10]
     *  [angular-toastr][] 非常不错的消息提示插件，观看[示例][Link 11]
     *  [angular-slider][] 观看[详解][Link 12]
     *  [angular-slider][angular-slider 1] 观看[示例][Link 13]
     *  [angular-hammer][] 要结合hammer.js使用。
     *  [angular-gestures][] 也要结合hammer.js来使用。
     *  [ng-material-floating-button][] 观看[示例][Link 14]。
     *  [angular-deckgrid][] A lightweight masonry-like grid for AngularJS.观看[示例][Link 15]
     *  [angular-busy][] 一个加载提示插件，观看[示例][Link 16]。
     *  [ng-polymer-elements][] 观看[示例][Link 17]。
     *  [angular-growl][]
     *  [ngAutocomplete][] 观看[示例][Link 18]。
     *  [ngImgCrop][] 相当不错的截图插件，观看[示例][Link 19] 点击预览。
     *  [angular-masonry][] 观看[示例][Link 20]。
     *  [angular-loading-bar][] 极力推荐的一个加载提示插件，观看[示例][Link 21]。
     *  [angular-umeditor][] 百度 umeditor 富文本编辑器 angularjs 插件。
     *  [ngInfiniteScroll][] 观看[示例][Link 22]。
     *  [angular-chart.js][] 很不错的图表插件要借助Chart.js，观看[示例][Link 23]。
     *  [angularUtils][] 一位外国人写的许多可以重用的组件。只里面可能会有你喜欢的，有一个分页插件。
     *  [nprogress][] 观看[示例][Link 24]。
     *  [ngProgress][] 观看[示例][Link 25]。
     *  [angular-dialog-service][] 观看[示例][Link 26] 点击预览。
 *  与云服务交互
    
     *  [angularfire][] [AngularJS bindings for Firebase][]这也也是推荐大家去看看，firebase是一个A powerful platform for your mobile or web application，类似于国内的leancloud，国外是很流行的。
 *  一些服务插件
    
     *  [angular-sortable-view][] 拖拽排序插件，非常不错，观看[示例][Link 27]。
     *  [ngRepeatReorder][] 需要依赖`angular-hammer`和`hammer.js`，也是一个`reorder`的插件。
     *  [ngDraggable][] 一个拖拽插件，观看[示例][Link 28]。
     *  [checklist-model][] 观看[示例][Link 29]。
     *  [ng-readingtime][]
     *  [object-table][] 观看[示例][Link 30]。
     *  [angularjs-pubsub][]
     *  [angular-socket-io][]
     *  [angular-local-storage][] 观看[示例][Link 31]。
     *  [angular-cookies][]
     *  [angularWebglDirective][]
 *  测试，模拟数据的插件
    
     *  [karma][] Spectacular Test Runner for JavaScript [文档protractor][protractor]
     *  [protractor][protractor 1] E2E test framework for Angular apps [文档][Link 32]。
     *  [mock-angular][] 观看[示例][Link 33]。

也希望大家能够把一些好的插件分享出来，或者在这片文章下面留言，我会把它加到这片文章里面，让大家都可以看到^\_^

--------------------

以下部分是更新内容：

*  [bindonce (Zero watches binding for AngularJS)][bindonce_Zero watches binding for AngularJS] 来自[xmchyabi][]的分享 2016-1-28 更新
 *  [at-promise (promise directive for angular)][at-promise_promise directive for angular] 来自[axetroy][]的分享 2016-3-19 更新

[angular]: https://segmentfault.com/a/1190000003858219
[angular.js]: https://segmentfault.com/t/angular.js/blogs
[dreamapplehappy]: https://segmentfault.com/u/dreamapplehappy
[AngularJS-Learning]: https://github.com/jmcunningham/AngularJS-Learning
[recipes-with-angular-js-examples]: https://github.com/fdietz/recipes-with-angular-js-examples
[angularjs-styleguide]: https://github.com/toddmotto/angularjs-styleguide
[angular-styleguide]: https://github.com/johnpapa/angular-styleguide
[yeoman]: http://yeoman.io/
[generator-angular]: https://github.com/yeoman/generator-angular
[generator-hottowel]: https://github.com/johnpapa/generator-hottowel
[generator-angularfire]: https://github.com/Jon-Biz/generator-angularfire
[angular-seed]: https://github.com/angular/angular-seed
[ngular-laravel4-workflow]: https://github.com/Foxandxss/angular-laravel4-workflow
[fullstack-demo]: https://github.com/DaftMonk/fullstack-demo
[ionic]: http://ionicframework.com/
[ng-cordova]: https://github.com/driftyco/ng-cordova
[Link 1]: http://ngcordova.com/
[mobile-angular-ui]: https://github.com/mcasimir/mobile-angular-ui
[Angular Material]: https://material.angularjs.org/0.11.2/#/
[material]: https://www.google.com/design/spec/material-design/introduction.html
[AngularStrap]: http://mgcrea.github.io/angular-strap/#
[AngularUI]: http://angular-ui.github.io/
[UI.Ace]: https://angular-ui.github.io/ui-ace/
[alias]: https://github.com/angular-ui/alias
[UI Bootstrap]: https://angular-ui.github.io/bootstrap/
[UI Calendar]: https://angular-ui.github.io/ui-calendar/
[UI Chart]: http://angular-ui.github.io/ui-chart/
[UI Codemirror]: https://angular-ui.github.io/ui-codemirror/
[UI Date]: https://angular-ui.github.io/ui-date/
[UI Event]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-event/master/demo/index.html
[Angular Google Maps]: http://angular-ui.github.io/angular-google-maps/
[Angular UI Grid]: http://ui-grid.info/
[UI Indeterminate]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-indeterminate/master/demo/index.html
[UI Layout]: https://angular-ui.github.io/ui-layout/
[UI Map]: http://angular-ui.github.io/ui-map/
[UI Mask]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
[UI Router]: https://angular-ui.github.io/ui-router/site/#/api/ui.router
[UI Scroll]: http://angular-ui.github.io/ui-scroll/demo/
[UI Scrollpoint]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-scrollpoint/master/demo/index.html
[UI Select]: https://github.com/angular-ui/ui-select
[UI Slider]: https://angular-ui.github.io/ui-slider/demo/demo.html
[UI Sortable]: https://angular-ui.github.io/ui-sortable/
[UI Tinymce]: https://github.com/angular-ui/ui-tinymce
[UI Tour]: https://angular-ui.github.io/ui-tour/demo/demo.html
[UI Uploader]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-uploader/master/demo/index.html
[UI Validate]: https://htmlpreview.github.io/?https://github.com/angular-ui/ui-validate/master/demo/index.html
[IDE Plugins]: http://angular-ui.github.io/#ide-plugins
[famous-angular]: https://github.com/Famous/famous-angular
[famous]: http://famous.org/
[ui-grid]: https://github.com/angular-ui/ui-grid
[restangular]: https://github.com/mgonto/restangular
[ngDialog]: https://github.com/likeastore/ngDialog
[Link 2]: http://likeastore.github.io/ngDialog/
[ngMeditor]: https://github.com/icattlecoder/ngMeditor
[Link 3]: http://icattlecoder.github.io/ngmeditor/
[angular-atomic-notify]: https://github.com/maxigimenez/angular-atomic-notify
[ngSweetAlert]: https://github.com/oitozero/ngSweetAlert
[Link 4]: http://t4t5.github.io/sweetalert/
[ng-sweet-alert]: https://github.com/tushariscoolster/ng-sweet-alert
[Link 5]: http://tushariscoolster.github.io/ng-sweet-alert/
[v-button]: https://github.com/LukaszWatroba/v-button
[Link 6]: http://lukaszwatroba.github.io/v-button/
[v-modal]: https://github.com/LukaszWatroba/v-modal
[Link 7]: http://lukaszwatroba.github.io/v-modal/
[ng-file-upload]: https://github.com/danialfarid/ng-file-upload
[Link 8]: https://angular-file-upload.appspot.com/
[angular-file-upload]: https://github.com/nervgh/angular-file-upload
[Link 9]: http://nervgh.github.io/pages/angular-file-upload/examples/simple/
[ng-iScroll]: https://github.com/ibspoof/ng-iScroll
[angular-iscroll]: https://github.com/mtr/angular-iscroll
[Link 10]: http://mtr.github.io/core-layout/examples/#/
[angular-toastr]: https://github.com/Foxandxss/angular-toastr
[Link 11]: http://foxandxss.github.io/angular-toastr/
[angular-slider]: https://github.com/Venturocket/angular-slider
[Link 12]: http://venturocket.github.io/angular-slider/
[angular-slider 1]: https://github.com/prajwalkman/angular-slider
[Link 13]: http://prajwalkman.github.io/angular-slider/
[angular-hammer]: https://github.com/randallb/angular-hammer
[angular-gestures]: https://github.com/wzr1337/angular-gestures
[ng-material-floating-button]: https://github.com/nobitagit/ng-material-floating-button
[Link 14]: http://nobitagit.github.io/ng-material-floating-button/
[angular-deckgrid]: https://github.com/akoenig/angular-deckgrid
[Link 15]: http://andrekoenig.info/angular-deckgrid/#/
[angular-busy]: https://github.com/cgross/angular-busy
[Link 16]: http://cgross.github.io/angular-busy/demo/
[ng-polymer-elements]: https://github.com/GabiAxel/ng-polymer-elements
[Link 17]: https://gabiaxel.github.io/ng-polymer-elements/
[angular-growl]: https://github.com/marcorinck/angular-growl
[ngAutocomplete]: https://github.com/wpalahnuk/ngAutocomplete
[Link 18]: http://plnkr.co/edit/GE34ojss9xMGm0024FvM?p=preview
[ngImgCrop]: https://github.com/alexk111/ngImgCrop
[Link 19]: http://jsfiddle.net/alexk111/rw6q9/
[angular-masonry]: https://github.com/passy/angular-masonry
[Link 20]: http://passy.github.io/angular-masonry/
[angular-loading-bar]: https://github.com/chieffancypants/angular-loading-bar
[Link 21]: https://chieffancypants.github.io/angular-loading-bar/
[angular-umeditor]: https://github.com/YinChangSheng/angular-umeditor
[ngInfiniteScroll]: https://github.com/sroze/ngInfiniteScroll
[Link 22]: http://sroze.github.io/ngInfiniteScroll/
[angular-chart.js]: https://github.com/jtblin/angular-chart.js
[Link 23]: http://jtblin.github.io/angular-chart.js/
[angularUtils]: https://github.com/michaelbromley/angularUtils
[nprogress]: https://github.com/rstacruz/nprogress
[Link 24]: http://ricostacruz.com/nprogress/
[ngProgress]: https://github.com/VictorBjelkholm/ngProgress
[Link 25]: http://victorbjelkholm.github.io/ngProgress/
[angular-dialog-service]: https://github.com/m-e-conroy/angular-dialog-service
[Link 26]: http://codepen.io/m-e-conroy/pen/rkIqv
[angularfire]: https://github.com/firebase/angularfire
[AngularJS bindings for Firebase]: https://www.firebase.com/docs/web/libraries/angular/
[angular-sortable-view]: https://github.com/kamilkp/angular-sortable-view
[Link 27]: http://kamilkp.github.io/angular-sortable-view
[ngRepeatReorder]: https://github.com/SimeonC/ngRepeatReorder
[ngDraggable]: https://github.com/fatlinesofcode/ngDraggable
[Link 28]: http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html
[checklist-model]: https://github.com/vitalets/checklist-model
[Link 29]: http://vitalets.github.io/checklist-model/
[ng-readingtime]: https://github.com/jiin/ng-readingtime
[object-table]: https://github.com/ekokotov/object-table
[Link 30]: http://ekokotov.github.io/object-table/
[angularjs-pubsub]: https://github.com/lavinjj/angularjs-pubsub
[angular-socket-io]: https://github.com/btford/angular-socket-io
[angular-local-storage]: https://github.com/grevory/angular-local-storage
[Link 31]: http://gregpike.net/demos/angular-local-storage/demo/demo.html
[angular-cookies]: https://github.com/ivpusic/angular-cookie
[angularWebglDirective]: https://github.com/winkerVSbecks/angularWebglDirective
[karma]: https://github.com/karma-runner/karma
[protractor]: http://karma-runner.github.io/0.13/index.html
[protractor 1]: https://github.com/angular/protractor
[Link 32]: http://www.protractortest.org/#/
[mock-angular]: https://github.com/think2011/mock-angular
[Link 33]: http://think2011.github.io/mock-angular/
[bindonce_Zero watches binding for AngularJS]: https://github.com/Pasvaz/bindonce
[xmchyabi]: http://segmentfault.com/u/xmchyabi
[at-promise_promise directive for angular]: https://github.com/axetroy/at-promise
[axetroy]: https://github.com/axetroy