Angular js 經常使用插件

圖片視頻類

  • angular-maxonry 圖片牆效果插件,能夠將圖片組織成相似於瀑布流的效果,依賴於jQuery、imageloadedMasonry
  • angular-deckgrid 另外一個照片瀑布流解決方案
  • ngImgCrop 圖片剪裁工具
  • ngVideo 播放器,直接播放指定地址的mp4,控制按鈕美觀度遠甩朝內99.99%的視頻站
  • angular-image-404 當 img 元素的圖片沒法正常獲取時,使用這個指令能夠顯示佔位圖片,能夠自定義佔位圖,也可使用默認的佔位圖

輸入控件類

  • ngDraggable 控制元素拖動的控件,Demo
  • ui-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中方便的以指令的方式使用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等等。
相關文章
相關標籤/搜索