面向AngularJS開發人員的21款實用工作流工具

　　最近一段時間以來，AngularJS已經成為Web領域人氣最高的技術方案，而這要歸功於其在簡化Web應用程式開發方面所起到的良好收效。目前，AngularJS已經成為開發人員與技術愛好者社群當中最炙手可熱的名頭之一。在AngularJS的幫助下，我們可以構建起一系列Web應用程式及網站方案。

　　AngularJS應用程式也能夠被整合到其它現有系統或者專案當中。它同時也是一套強大的前端框架，可用於設計富使用者介面（簡稱UI）。目前人氣較高的AngularJS應用程式包括Ghost（一款部落格平臺，可不是與蕃茄花園並駕齊驅那款）、Goodfilms移動站點（一個電影回顧站點）以及CVsIntellect（一款簡歷製作應用）。

　　好了，如果大家已經身為一名AngularJS應用程式開發人員，那麼肯定需要各類輔助工具幫自己更高效地進行專案建立。因此在今天的文章中，我們將共同瞭解二十一款極具實用性的AngularJS工具。這份清單當中包含有多款程式碼編輯器、測試工具以及擴充套件方案等等。下面一起來看。

　　AngularJS框架

　　1) Ionic

　　Ionic是一套開源前端框架，旨在利用HTML、CSS以及JavaScript實現移動應用程式開發。大家可以藉此為AngularJS帶來多種更為強大的能力，例如UI互動、手勢操作與動畫效果等等。此外，大家還可以生成動畫與漸變系統，併為自己的應用程式設計啟動畫面與圖示。Mallzee與Chef Steps就是兩款利用Ionic開發而成的知名應用產品。

　　2) Supersonic

　　Supersonic是一款前端框架，專門用於開發資料驅動型混合應用程式以及面向移動裝置的酷炫使用者介面。除了大量CSS元件之外，大家還能夠在Supersonic中以原生方式實現UI元件，例如導航欄、標籤欄、抽屜、資訊卡以及網格系統等等。

　　3) LumX

　　Lumx是一款基於AngularjS與谷歌Material設計原則的響應式前端框架。它是一款強大的JavaScript MVC框架，能夠以輕鬆快捷的方式建立出單頁面應用程式。大家還可以利用LumX在開發成果中加入流暢動畫、日期選擇、通知、下拉選單、文字欄位、滾動條以及其它多種功能。

　　4) Radian

　　Radian是一套AngularJS框架，合適處理多種開發專案。在Radian的幫助下，大家可以將一款AngularJS應用程式拆分成多個可管理的去耦元件，從而將程式碼的抽象及模組化水平提升到新的層面。Radian基於AMD架構（即非同步模組定義）且允許大家將其用於應用程式測試。

　　5) Mobile Angular UI

　　Mobile Angular UI是一款前端框架，旨在利用Bootstrap 3與AngularJS構建HTML 5移動應用程式。這套框架提供大量Bootstrap 3移動元件，其中包括開關、覆蓋、側邊欄以及導航欄等等。目前利用Mobile Angular UI開發的熱門應用程式包括Hotelier News以及Good Doctor。

　　AngularJS程式碼編輯器

　　6) Sublime Text

　　Sublime Text是一款面向程式碼、標記與內容整理等工作的跨平臺文字編輯器。它提供多種可定製選項，幫助大家進行按鍵繫結、程式碼補全、片段、巨集以及其它常見操作。在Sublime Text的支援下，我們可以實現變更縮排設定、在編輯過程中進行多重內容選定並變更語法等等。

　　7) CodePen

　　CodePen是一款面向前端Web開發工作的HTML、CSS以及JavaScript程式碼編輯器。它提供多種功能，具體包括程式碼審查、除錯、實時程式碼編輯以及協作等。

　　8) JS Fiddle

　　JS Fiddle是一款線上程式碼編輯工具。大家可以利用各自獨立的皮膚分別執行JavaScript、CSS、HTML以及輸出程式碼。大家還可以利用JS Fiddle實現程式碼片段共享、程式碼審查、測試、除錯以及實時協作等功能。

　　AngularJS IDE

　　9) WebStorm

　　Webstorm是一款極具人氣的JavaScript整合開發環境（簡稱IDE），允許使用者利用Node.js實現客戶端/伺服器端開發工作。這款工具還內建一款程式碼編輯器，支援Compass、AngularJS、HTML以及CSS等等。它亦能夠實現一系列功能，例如錯誤檢查、重構與程式碼補全等。

　　10) Aptana

　　Aptana是一款開源的Web應用整合開發環境（簡稱IDE）。這款工具允許大家構建、測試、編輯、審查並除錯HTML、CSS以及JavaScript程式碼。這款工具基於雲環境且擁有高度可定製特性。

　　11) Appery

　　Appery是一款基於雲的平臺，旨在利用公有/私有云選項開發移動及響應式應用程式。大家可以利用它構建起多種iOS、HTML 5以及Android應用程式。這套整合開發環境（簡稱IDE）還提供視覺化編輯器，幫助大家通過簡單的拖拽操作利用jQuery Mobile、Angular JS、HTML 5以及Bootstrap元件構建起富使用者介面。

　　AngularJS測試工具

　　12) Protractor

　　Protractor是一款專門面向AngularJS應用程式的Node.js測試框架。在Protractor當中，其提供一套利用JSON Webdriver Wire協議控制的瀏覽器，能夠以非同步方式執行查詢及DOM元素互動等操作。因此，它允許大家對各類執行在真實瀏覽器之內的應用程式進行測試——正如使用者的實際使用過程一樣。

　　13) Mocha

　　Mocha是一套面向Node.js與該瀏覽器的JavaScript框架。它同時支援行為驅動與測試驅動兩類開發方式。Mocha使得非同步程式碼測試變得非常便捷，而且支援使用任意斷言庫。Mocha還提供多項定義功能，例如：

　　•  元生成套件與測試用例

　　•  將未捕獲異常對映至正確測試用例

　　•  可擴充套件報告

　　•  測試特定超時

　　•  支援節點除錯工具

　　14) Code Orchestra

　　Code Orchestra是一款用於對移動/Web應用程式進行測試及構建的開發工具。它以程式方式起效，允許使用者實時編寫程式碼。當大家編輯程式碼並點選儲存時，相關修改內容會被直接交付至執行中的應用程式。它同時可與AngularJS等多種主流Web技術協作，且支援全部IDE方案。

　　AngularJS擴充套件

　　15) ng-inspector

　　ng-inspector提供一套監督控制皮膚，用於對AngularJS應用程式進行開發與除錯。它屬於一款面向Chrome、Safari以及火狐等平臺的瀏覽器外掛。該擴充套件提供DOM高亮顯示、層次範圍檢視、範圍模式檢視等，且完全以實時方式更新。

　　16) angular-gettext

　　Angular-gettext是一款面向AngularJS應用程式的翻譯工具。它支援超過130種不同種類的語言。

　　17) Angular JS Eclipse Plugin

　　Eclipse是一套面向Java開發人員的整合開發環境（簡稱IDE）。不過我們可以利用各類外掛輕鬆對其進行擴充套件，從而支援多種程式語言，包括JavaScript、Python以及Ruby。AngularJS Eclipse外掛能夠對Eclipse WTP（即Web工具平臺）進行擴充套件，從而將其轉化成一套支援AngularJS表達與命令、Angular Explorer檢視的HTML編輯器外加JavaScript編輯。

　　AngularJS庫

　　18) Angular Fire

　　Angular Fire是一套AngularJS程式碼捆綁方案，用於將Firebase後端與AngularJS應用程式相對接。Firebase是一套Web應用程式開發框架，其主要產品就是Angular Fire——AngularJS的一套開源庫。Firebase SDK與Angular Fire能夠提供三向資料繫結、快速資料同步、內建驗證與使用者管理服務以及免費託管等功能。

　　19) Polymer

　　Polymer是一套用於擴充套件HTML詞彙的庫。它提供一套宣告式語法，能夠便捷地對定製化元素進行定義。除此之外，它還提供其它多種功能，例如模板、雙向資料繫結以及屬性觀察等。因此，它能幫助大家以更為精簡的程式碼構建起可以重複利用的Web技術元素。

　　20) UI Bootstrap

　　Twitter Bootstrap是一款高人氣HTML、CSS以及JS框架，主要用於面向移動裝置的Web應用程式開發任務。UI Bootstrap通過提供一系列基於Bootstrap標記與CSS元件的原生Angular JS命令發揮出Twitter Bootstrap的強大能力，其中包括Accordion、Alert、Carousel、Cooapse、Timepicker以及Dropdown等等。

　　21) Angular UI Router

　　Angular UI Router是一款面向Angular JS命令的原生庫。它作為Angular JS的路由框架起效，能夠將介面拆分成一套狀態機。它的主要優勢體現在強大的狀態與檢視摺疊能力。

　　總結

　　我已經把自己整理出的一切有價值資訊都囊括在了文章當中。但是可以肯定，目前大家常用的AngularJS工具、擴充套件及測試方案還有很多。如果各位在實踐過程中積累到了其它出色的選項，請在評論欄中與我們分享。

　　原文連結：http://codecondo.com/useful-workflow-tools-for-angularjs-developers/