你的第一個AngularJS應用--教程二：基架、創建和測試的工具

介紹

有不少可用的工具能夠幫助你開發AngularJS 應用，那些很是複雜的框架不在個人討論範圍之中，這也是我開始這系列教程的緣由。
在第一部分，咱們掌握了AngularJS框架的基本結構，開發了第一應用。這篇博文是爲那些初學者寫到。若是你是一個經驗豐富的AngularJS開發者，你可能對揭祕指令或者AngularJS在創業公司的使用更感興趣。
在這一部分，咱們將把應用的邏輯層放在一邊，而是去學習如何組織正確的AngularJS項目。包括：腳手架、依賴管理、準備測試（包括單元測試和端到端測試）。咱們用來開發AngularJS的工具備：Yeoman, Grunt, and Bower。下面咱們將從新看一下寫代碼和用 Karma 測試的過程。

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

若是你使用JavaScript來工做，有很大的可能性你已經知道了他們其中的一些工具，即便你是剛接觸Angular。可是爲了確保一個共同的基準，我將不會使用任何假設。讓咱們簡單地回顧一下這些技術和他們的用途吧。

• Karma（以前的名字是Testacular），是Google的JavaScript測試器，因此它也是測試Angular的天然選擇。另外也容許你在真實的瀏覽器運行你的測試（包括手機/平板電腦的瀏覽器），它也支持測試無關的框架。這意味着你可使用它結合其餘框架，好比 Jasmine, Mocha, 或者 QUnit。
• Jasmine也是咱們測試框架的一個選擇，至少在這裏。若是你曾經用它工做過，你會發現它的語法和Rspec很是相近。若是沒有也不用擔憂，咱們將在本教程裏詳細地講解。
• Grunt是一個測試器，能夠幫助咱們自動處理一些重複的任務，好比：壓縮、編譯、測試和創建一個簡單的AngularJS應用。
• Bower是一個包管理器，可以幫助你找到並安裝你應用所依賴的包，好比CSS框架，JavaScript庫，等等。它運行在git上，十分像Rails，避免了須要手動下載和更新的依賴關係。
• Yeoman是一個工具集，包含3個核心組件：Grunt，Bower，和腳手架工具Yo。Yo在generators（也是腳手架模版）的幫助下生產代碼樣板文件，爲你的項目自動配置Grunt和Bower。你能夠幾乎在任何JavaScript框架（好比：Angular，Backbone，Ember等）中發現generators，可是由於咱們如今講Angular，咱們將使用generator-angular項目。

因此，咱們從這裏開始

很好，咱們須要作的第一件事是安裝咱們須要的工具
1. 若是你沒有安裝git，node.js和npm，那麼要先安裝它們。
2. 而後，咱們將進入命令行輸入下面的命令來安裝Yeomen工具。

npm install -g yo grunt-cli bower

噢，不要忘了，咱們將使用AngularJS generator。因此你也須要安裝它。

npm install -g generator-angular

好的如今咱們準備好了。

生成咱們的AngularJS應用

上一次，咱們從angular-seed項目手動地複製了咱們的基本文件。這一次，咱們將使用yo（結合generator-angular）來爲咱們作這些。
now，咱們須要作的就是建立咱們新項目的文件，瀏覽並運行

yo angular

咱們將展現一些選擇項，好比是否包括Bootstrap和Compass，此時，讓咱們對Compass說no，對Bootstrap說yes。而後，當提示包含哪個模塊的時候(resource, cookies, sanitize and route)，咱們將只選擇

angular-route.js

咱們項目的基本文件應該會在一分鐘以內建立出來。集成了Karma和一些預配置的。
提示：必須牢記咱們要限制這裏的模塊。
當你正在作本身的一個項目時，使用哪些模塊將取決於你本身。
如今，因爲咱們正在使用Jasmine，讓咱們把它的適配器加入到咱們的項目

npm install karma-jasmine --save-dev

在這個例子中，咱們但願測試可以在瀏覽器裏執行。讓咱們再次添加

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

ok，若是咱們所作的每一件事都是正確的，咱們的項目文件結構應該是這樣的：

咱們應用代碼應該在 app/ 這個目錄下。 test/ 這個目錄固然是測試文件。在根目錄下咱們看到那些是項目的配置文件。他們中的每個都有不少須要學習的，可是如今咱們只是堅持了默認配置。那麼讓咱們運行一次咱們的項目吧，咱們能夠用下面的命令執行

grunt serve

瞧，咱們的app如今應該跳出在咱們面前了。

上一篇譯文在這裏：http://segmentfault.com/blog/news/1190000000347412
原文連接：http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing