介紹
有非常多可用的工具能夠幫助你開發(fā)AngularJS 應(yīng)用，那些非常復(fù)雜的框架不在我的討論范圍之中，這也是我開始這系列教程的原因。
在第一部分，我們掌握了AngularJS框架的基本結(jié)構(gòu)，開發(fā)了第一應(yīng)用。這篇博文是為那些剛開始學(xué)習(xí)的人寫到。假設(shè)你是一個經(jīng)驗豐富的AngularJS開發(fā)人員，你可能對揭秘指令或者AngularJS在創(chuàng)業(yè)公司的使用更感興趣。
在這一部分，我們將把應(yīng)用的邏輯層放在一邊，而是去學(xué)習(xí)怎樣組織正確的AngularJS項目。包含：腳手架、依賴管理、準備測試（包含單元測試和端到端測試）。我們用來開發(fā)AngularJS的工具有：Yeoman, Grunt, and Bower。以下我們將又一次看一下寫代碼和用 Karma 測試的過程。

3Karma, Jasmine, Grunt, Bower, Yeoman…這些工具是什么？

如果你使用JavaScript來工作，有非常大的可能性你已經(jīng)知道了他們當中的一些工具，即使你是剛接觸Angular。可是為了確保一個共同的基準，我將不會使用不論什么如果。讓我們簡單地回想一下這些技術(shù)和他們的用途吧。

- Karma（之前的名字是Testacular），是Google的JavaScript測試器，所以它也是測試Angular的自然選擇。另外也同意你在真實的瀏覽器執(zhí)行你的測試（包含手機/平板電腦的瀏覽器），它也支持測試無關(guān)的框架。這意味著你能夠使用它結(jié)合其它框架，比方 Jasmine, Mocha, 或者 QUnit。
- Jasmine也是我們測試框架的一個選擇，至少在這里。假設(shè)你以前用它工作過，你會發(fā)現(xiàn)它的語法和Rspec很相近。假設(shè)沒有也不用操心，我們將在本教程里具體地解說。
- Grunt是一個測試器，能夠幫助我們自己主動處理一些反復(fù)的任務(wù)，比方：壓縮、編譯、測試和建立一個簡單的AngularJS應(yīng)用。
- Bower是一個包管理器，可以幫助你找到并安裝你應(yīng)用所依賴的包，比方CSS框架，JavaScript庫，等等。它執(zhí)行在git上，十分像Rails，避免了須要手動下載和更新的依賴關(guān)系。
- Yeoman是一個工具集，包括3個核心組件：Grunt，Bower，和腳手架工具Yo。Yo在generators（也是腳手架模版）的幫助下生產(chǎn)代碼樣板文件，為你的項目自己主動配置Grunt和Bower。你能夠差點兒在不論什么JavaScript框架（比方：Angular，Backbone，Ember等）中發(fā)現(xiàn)generators，可是由于我們?nèi)缃裰vAngular，我們將使用generator-angular項目。

所以，我們從這里開始
非常好，我們須要做的第一件事是安裝我們須要的工具
1. 假設(shè)你沒有安裝git，node.js和npm，那么要先安裝它們。
2. 然后，我們將進入命令行輸入以下的命令來安裝Yeomen工具。

npm install -g yo grunt-cli bower

噢，不要忘了，我們將使用AngularJS generator。所以你也須要安裝它。

npm install -g generator-angular

好的如今我們準備好了。

?

生成我們的AngularJS應(yīng)用
上一次，我們從angular-seed項目手動地復(fù)制了我們的基本文件。這一次，我們將使用yo（結(jié)合generator-angular）來為我們做這些。
now，我們須要做的就是創(chuàng)建我們新項目的文件，瀏覽并執(zhí)行

yo angular

我們將展示一些選擇項，比方是否包括Bootstrap和Compass，此時，讓我們對Compass說no，對Bootstrap說yes。然后，當提示包括哪一個模塊的時候(resource, cookies, sanitize and route)，我們將僅僅選擇

angular-route.js

我們項目的基本文件應(yīng)該會在一分鐘之內(nèi)創(chuàng)建出來。集成了Karma和一些預(yù)配置的。
提示：必須牢記我們要限制這里的模塊。
當你正在做自己的一個項目時，使用哪些模塊將取決于你自己。
如今，因為我們正在使用Jasmine，讓我們把它的適配器增加到我們的項目

npm install karma-jasmine --save-dev

在這個樣例中，我們希望測試可以在瀏覽器里運行。讓我們再次加入

npm install karma-chrome-launcher --save-dev

ok，假設(shè)我們所做的每一件事都是正確的，我們的項目文件結(jié)構(gòu)應(yīng)該是這種：

我們應(yīng)用代碼應(yīng)該在 app/ 這個文件夾下。 test/ 這個文件夾當然是測試文件。在根文件夾下我們看到那些是項目的配置文件。他們中的每個都有非常多須要學(xué)習(xí)的，可是如今我們僅僅是堅持了默認配置。那么讓我們執(zhí)行一次我們的項目吧，我們能夠用以下的命令執(zhí)行

grunt serve

瞧，我們的app如今應(yīng)該跳出在我們面前了。

?

上一篇譯文在這里：http://segmentfault.com/blog/news/1190000000347412

原文鏈接：http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing

?

轉(zhuǎn)載于:https://www.cnblogs.com/zfyouxi/p/4320708.html

總結(jié)

以上是生活随笔為你收集整理的你的第一个AngularJS应用--教程二：基架、建立和測试的工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。