原文：20UsefulAngular.jsTools，參與譯者：wancheng,Iam魔方,葉秀蘭,shirleywong,成熟的毛毛蟲(chóng)

喜歡Angular.js？我們?yōu)殚_(kāi)發(fā)者編寫(xiě)了一份最佳a(bǔ)ngular.js工具和資源清單，這可讓使用angular開(kāi)發(fā)應(yīng)用程序變得高效。

對(duì)于大多數(shù)想要設(shè)計(jì)動(dòng)態(tài)Web應(yīng)用的開(kāi)發(fā)者而言，Angular.js成為了一個(gè)可以選擇的框架。angularjs開(kāi)發(fā)者如果想開(kāi)始一個(gè)AngularJS工程，為了采取成熟的方式開(kāi)發(fā)網(wǎng)頁(yè)，他們或許需要很多工具。

為了減輕使用AngularJS開(kāi)發(fā)Web應(yīng)用的負(fù)擔(dān)，這里列出了幾個(gè)出色的工具，包括測(cè)試、前端開(kāi)發(fā)、編輯、函數(shù)庫(kù)、擴(kuò)展、模塊、代碼生成器、網(wǎng)格工具。

Angular.js開(kāi)發(fā)最佳IDE

Angular.js需要的大部分集成開(kāi)發(fā)環(huán)境（IDE）和輕量級(jí)的編輯器列在了下面。

Webstorm

Webstorm是一個(gè)出色的代碼編輯器，它完全理解工程，可以為任何類型的網(wǎng)站提供高質(zhì)量的代碼。它支持所有最流行最新的網(wǎng)站開(kāi)發(fā)技術(shù)。使用這個(gè)工具開(kāi)發(fā)網(wǎng)站，可以很好地集成單點(diǎn)或流程。

Aptana

Aptana是一具集成開(kāi)發(fā)環(huán)境，可以幫助你優(yōu)雅地創(chuàng)建網(wǎng)站應(yīng)用。使用它做為AngularJS的集成開(kāi)發(fā)工具，你需要在Eclipse商店激活A(yù)ngularJSEclipse擴(kuò)展。

文本編輯器Sublime

對(duì)AngularJSWeb開(kāi)發(fā)者來(lái)說(shuō)，方便的文本編輯工具是Sublime。它幫助程序員使用快捷方式或幾個(gè)按鍵實(shí)現(xiàn)編碼。它具有很強(qiáng)的適應(yīng)性，可以定制任何類型的編程環(huán)境。它也可以按照你的意愿分塊編輯。它還可以輕松地在項(xiàng)目之間切換，所有的修改都將自動(dòng)保存在各自的項(xiàng)目中。

Angular.js的專用測(cè)試工具

測(cè)試是開(kāi)發(fā)的重要組成部分，無(wú)論對(duì)于使用Angular.js還是任何其他軟件都是如此。下面的工具可以幫助你簡(jiǎn)化采用Angular.js開(kāi)發(fā)的應(yīng)用程序的測(cè)試。

這些工具都是在線JavaScript測(cè)試工具的好伴侶。

Protractor

Protractor是一個(gè)端到端的測(cè)試框架，貫穿于AngularJS，是一個(gè)完全自動(dòng)化的測(cè)試工具。它可以運(yùn)行在真實(shí)的瀏覽器中測(cè)試你的應(yīng)用程序。它使用了WebDriver，Mocha,jasmine,Node.js,selenium和cucumber等都使用的偉大的技術(shù)。

當(dāng)所有的待處理網(wǎng)頁(yè)任務(wù)完成時(shí)，它會(huì)自動(dòng)使用AngularJS的應(yīng)用進(jìn)行通信。所以，你在測(cè)試時(shí)不需要使用等待或睡眠命令。

Jasmine

Jasmine是一個(gè)行為驅(qū)動(dòng)開(kāi)發(fā)框架，專為Javascript用戶創(chuàng)建。它提供了基本的測(cè)試框架，并且可以持續(xù)維護(hù)。所有測(cè)試都可以使用一個(gè)all-in-one的包完成，這是Jasmine的主要特點(diǎn)，高效測(cè)試你的應(yīng)用。

這個(gè)框架的一個(gè)缺點(diǎn)是它不能感知運(yùn)行平臺(tái)（瀏覽器）。如果配合Karma使用這個(gè)問(wèn)題很容易避免。

Karma可以做為測(cè)試運(yùn)行者配合Jasmine使用。它是一個(gè)測(cè)試框架幫且你高效地測(cè)試應(yīng)用。

CodeOrchestra

它是一個(gè)絕對(duì)意義上的前端開(kāi)發(fā)工具幫助你創(chuàng)建和測(cè)試網(wǎng)站應(yīng)用。你可以實(shí)時(shí)寫(xiě)代碼，根據(jù)建議修改代碼，以同樣的格式保存代碼。通過(guò)這個(gè)工具修改后的代碼會(huì)自動(dòng)布署到運(yùn)行中的應(yīng)用。

最好的Angular.js函數(shù)庫(kù)

下面是一些有用的庫(kù)，它們可以增強(qiáng)angular.js框架的能力，對(duì)開(kāi)發(fā)者有所幫助。沒(méi)有必要從頭構(gòu)建那些可能已經(jīng)成為開(kāi)放源碼的函數(shù)庫(kù)。

CodePen

對(duì)于所有HTML，CSS和JavaScript的前端開(kāi)發(fā)者，CodePen是一款完美的編輯工具。這個(gè)工具可以最大限度地減少對(duì)網(wǎng)站的創(chuàng)建、測(cè)試和完善的繁瑣的網(wǎng)頁(yè)開(kāi)發(fā)工作。它是一個(gè)協(xié)作的在線編程環(huán)境。

Web開(kāi)發(fā)人員可以清晰地跨平臺(tái)實(shí)時(shí)查看。它有一個(gè)瀏覽器中的代碼編輯器，可以自動(dòng)地迅速地上傳多個(gè)文件。這個(gè)功能可協(xié)助Web開(kāi)發(fā)人員在幾秒的時(shí)間內(nèi)創(chuàng)建一個(gè)新的代碼。

AngularFire

使用AngularFire，可以輕松地幫助你開(kāi)發(fā)AngularJS的應(yīng)用后臺(tái)。AngularJS綁定的Firebase已經(jīng)正式被AngularFire支持。Firebase是一個(gè)基于云計(jì)算的平臺(tái)，可以很容易地集成實(shí)時(shí)應(yīng)用和快速創(chuàng)建后臺(tái)。

當(dāng)Firebase和AngularFire組合在一起，它們有助于以更快的速度同步數(shù)據(jù)和提供良好的用戶管理服務(wù)。它還提供了一個(gè)三向的數(shù)據(jù)綁定、用戶身份驗(yàn)證和靜態(tài)托管。

AngularUI

AngularJS以高效率創(chuàng)建單頁(yè)面應(yīng)用而出名.創(chuàng)建這些單頁(yè)面應(yīng)用時(shí)候，我們需要一個(gè)靈活的路由，這個(gè)優(yōu)秀的AngularJS框架是構(gòu)建一個(gè)全面的UI組件俗稱ui-router。它能根據(jù)應(yīng)用程序的狀態(tài)提供一個(gè)簡(jiǎn)單的導(dǎo)航和改變視圖,而不僅僅是基于URL。

AngularUI還包含非常多的UI組件，這些組件是使用原生指令像ui—maps,ui-calendar，ui-Bootstrap創(chuàng)建的。這些UI組件和指令可以更快建設(shè)Angular網(wǎng)站

UIBootstrap

UIBootstrap是一個(gè)不同尋常的AngularUI組件，它能幫助你創(chuàng)建基于智能手機(jī)的web應(yīng)用程序，而且用戶體驗(yàn)不錯(cuò)。這個(gè)UI組件提供的AngularJS原生指令完全兼容TwitteBootstrap。

Angular.js有用的擴(kuò)展和工具

下面是一些Angular.js擴(kuò)展，可以滿足一些特殊應(yīng)用之需。

Ng-Inspector

Ng-Inspector是一個(gè)優(yōu)秀的瀏覽器插件，支持Firefox，Chrome和Safari,復(fù)用它可以創(chuàng)建一個(gè)探測(cè)控制面板，方便開(kāi)發(fā)，調(diào)試AngularJS應(yīng)用，它提供了完整的輔助功能。

使用它可以更方便的和你的應(yīng)用交互，還可以實(shí)時(shí)更新。它還可以看到全部范圍內(nèi)的層次結(jié)構(gòu)，模型，類型和值。點(diǎn)擊你關(guān)注的一個(gè)范圍，它會(huì)高亮顯示相應(yīng)的DOM結(jié)點(diǎn)。

AngularJSBatarang

你可以使用AngularJSBatarang來(lái)調(diào)試你的AngularJS應(yīng)用，它是一個(gè)專為Chrome提供的插件。它幫助你改善應(yīng)用性能。還可能衡量調(diào)節(jié)性能的進(jìn)度。

Restangular

AngularJS獨(dú)有的一個(gè)服務(wù)是Restangular，它可以幫助您輕松應(yīng)對(duì)各種要求，例如獲娶發(fā)送、刪除以及把數(shù)據(jù)存入數(shù)據(jù)庫(kù)。它對(duì)于所有從RESTfulAPI中大規(guī)模存取數(shù)據(jù)的AngularJS應(yīng)用都很有必要。

GeneratorAngular-一個(gè)有用的工具

YeomenGenerator

你可以很容易地開(kāi)始一個(gè)具有合理的默認(rèn)值和最好的用例的項(xiàng)目。建立這樣的Angular應(yīng)用，這款Yeomengenerator工具是非常有用的。它只需幾條終端的命令，便加速了AngularJS應(yīng)用的開(kāi)發(fā)過(guò)程。這個(gè)工具是非常有用的。這些專用的生成工具將有助于應(yīng)用了解項(xiàng)目的有關(guān)信息，并有助于開(kāi)發(fā)和測(cè)試應(yīng)用程序。

AngularDeckgrid

AngularDeckgrid可以為你提供響應(yīng)度和顏值俱高的應(yīng)用，可以適配不同的移動(dòng)終端。輕量級(jí)類磚石結(jié)構(gòu)易于創(chuàng)建靈活的表格，高效創(chuàng)建圖片展示。

Radian

Radian是一個(gè)優(yōu)秀的框架，使用它只需要少量的設(shè)置就可以開(kāi)啟AngularJS項(xiàng)目。在多人開(kāi)發(fā)項(xiàng)目中它是一個(gè)理想的選擇。

Lumx

Lumx以快速簡(jiǎn)單的方式幫助你創(chuàng)建簡(jiǎn)單而優(yōu)雅的應(yīng)用。這個(gè)可響應(yīng)式前端框架是基于AngularJS和Google材料設(shè)計(jì)規(guī)范。這個(gè)工具可嵌入最新的技術(shù)，如Sass預(yù)處理器，AngularJS和JQuery，能極大地提高web應(yīng)用的性能。

AngularGettext

你可以用英語(yǔ)編碼，在編碼需要被翻譯的地方加上注解。AngularGettext工具就會(huì)自動(dòng)翻譯那些獨(dú)立的部分。這是AngularJS非常簡(jiǎn)單而強(qiáng)大的翻譯支持工具。

NgDocs

AngularJS框架內(nèi)置ngDocs工具可以簡(jiǎn)化你項(xiàng)目文檔和參考手冊(cè)的相關(guān)工作。這款基于Android的工具也能提供給所有新手一些容易跟進(jìn)的教程。

NgTables

無(wú)論是簡(jiǎn)單還是復(fù)雜的Web應(yīng)用，在AngularJS框架中很容易創(chuàng)建一個(gè)表格，然后通過(guò)實(shí)用的ngTables工具進(jìn)行高效的管理。ngTable是AngularJS表格指令，支持排序，過(guò)濾和分頁(yè)，在編譯步驟中自動(dòng)生成帶有標(biāo)題和過(guò)濾器的標(biāo)題行。

ngTable支持定制過(guò)濾選項(xiàng)，表格分組，表格外部數(shù)據(jù)控制等等功能。

總的來(lái)說(shuō)，這些都是創(chuàng)建任意AngularJSWeb應(yīng)用的，最有用的工具集合。用好這些工具可以幫助你輕松高效的創(chuàng)建AngularJS項(xiàng)目。今日?qǐng)D靈、

請(qǐng)聯(lián)系網(wǎng)站客服，了解詳細(xì)的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心