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

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

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

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

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

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

Webstorm

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

Aptana

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

文本編輯器Sublime

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

Angular.js的專用測試工具

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

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

Protractor

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

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

Jasmine

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

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

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

CodeOrchestra

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

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

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

CodePen

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

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

AngularFire

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

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

AngularUI

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

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

UIBootstrap

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

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

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

Ng-Inspector

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

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

AngularJSBatarang

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

Restangular

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

GeneratorAngular-一個有用的工具

YeomenGenerator

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

AngularDeckgrid

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

Radian

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

Lumx

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

AngularGettext

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

NgDocs

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

NgTables

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

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

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

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

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