本博客停止更新，請訪問新個人博客：owenchen.net
前言
博客遷移到了BAE上，http://owenchen.net/，以后的文章會首發在自己的博客上，隨后在博客園發布。
很久沒有寫文章了，一是項目比較忙，二來自己在嘗試一些互聯網新的產品，以微信平台開發為主，看看能不能掙點零花錢以緩解目前的經濟壓力，也順便了解和學習一下為什么這東西這么火。最終錢還沒掙到，到把自己累個半死。當然收獲也是有的，發現了一些掙錢的路子，以后有時間有機會嘗試嘗試。也在短時間內玩了不少東西，比如PHP的mvc框架thinkphp，比如如何使用jQuery fileupload上傳、接收存放文件，以及百度的ueditor的使用。這些都是不錯的互聯網工具，以后興許會用到。
簡介
好了，切入今天的正題，使用Yeoman快速啟動AngularJS項目的開發。這里出現了兩個新詞，AngularJS和Yeoman，而這些也正是我最近幾個月看的最多的東西。
AngularJS我就不多說了，我跟別人介紹的時候都是這樣說的：“我覺得這是當下最火，最有前途的前端框架。” 說這話我也是有理由的，從之前看到的美國AngularJS的職位增長速度，以及StackOverflow上Angular的討論統計，以及自己所在Angular群里每天幾千條的對話，都可以感覺到，Angualr很快就會成為風靡的前端框架。或許jQuery那波爆發我沒有趕上，但我絕不能錯過AngularJS。
YEOMAN，Moden workflows for modern webapps，現代web應用開發的工作流程。Yeoman是一個web應用開發部署的工具，但同時它也規范了現代web應用開發流程。它是一組工具（Yo，Grunt，Bower）的組合，也是一套讓web開發過程更加規范輕松的最佳實踐。我的理解Yeoman提供給前端開發的功能就如同JAVAEE的ant和maven。
好了，不扯概念，不講大話。我們來看看，Yeoman到底能做什么。其實Yeoman是由三個工具組成的，yo（腳手架），grunt（build工具），和Bower（package管理）：
- Yo 新應用的腳手架，編寫你自己的grunt配置文件，並且獲取你項目build過程當中可能使用到的grunt tasks。
- Grunt 主要用來build，預覽和測試你的項目，已經內置了很多由Yeoman團隊和grunt-contrib提供的task。功能就是前端的ant。
- Bower 主要用於依賴管理，開發人員不需要手動去管理和下載相應的包，以及處理他們之間的依賴關系。我的理解，就是前端的maven。
接下來的能容主要參考（准確的說翻譯）了下面這篇文章，看英文的同學可以直接跳過去看原版的。當然，我會在翻譯過程中加入自己的實踐的內容和想法。
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
正式開始我們的項目
這次AngualrJS教程中會包括如下的內容：
1、使用Yeo搭建一個AngularJS項目的基本框架
2、使用Grunt加速項目開發和執行相關的任務
3、使用Bower來添加第三方的插件/框架
4、對我們AngularJS添加內容
環境要求：
在開始和運行我們的項目之前，你最好已經有如下的一些知識儲備和環境的准備：
1、了解控制台和命令行的一些基本知識
2、安裝了NodeJS和NPM
3、基礎的JS，CSS和HTML知識
安裝Yeoman！
好了，讓我們從安裝Yeoman開始我們的項目。在命令行輸入以下的命令，來安裝Yeoman，包括yo，Grunt，和Bower。npm install -g yo grunt-cli bower
命令執行完之后我們就擁有了yeoman的強大工具包。下面會依次介紹和使用這些工具來進行項目的搭建。
Yo
Yo是用來生成項目的腳手架。它會迅速幫助我們創建基本的目錄結構，配置文件等讓你迅速有一個可用的項目基礎。當然除了最基礎的目錄項目結構之外，還有一些非常強大的定制化的生成器，來為你搭建基於特定框架的項目結構。接下來我們會使用AngularJS的生成器來為我們生成AngularJS的項目結構。
在使用AngularJS的生成器之前，我們需要安裝它。運行下面的腳本：
npm install -g generator-angular
然后使用它來生成AngularJS應用的基礎結構。我們來到一個空的項目目錄中，我用的項目名字叫 YeoAngular。在目錄中運行下面的命令：yo angular
生成器會一問問題的方式來幫你設置項目中可能會使用的一些其他框架或者庫，如bootstrap，ngResource等。
這里，我們在項目中需要使用bootstrap，故回答Y。后面的對ngResource、ngCookie等插件的詢問使用了類似圖形化的方式。在回答完所有的問題之后，yo就開始幫助我們創建、下載和配置項目。需要花一點時間，尤其是在網絡不好的情況下。但是在完成之后，你將得到一個滿意的結果。最佳實踐的目錄結構，配置文件，以及所有需要的依賴包。
我們一起來過一下這些文件（夾）
app
這個目錄存放了你的項目的靜態資源，html,css,javascrip。這個目錄也是AngularJS開發最主要的場所。
package.json
相信使用過node的同學都會很熟悉，pakcage.json幫助npm去識別和認定我們項目需要的依賴包。里面也可以包含項目其他的元數據，如項目描述，項目版本等。
node_modules
這里存放了項目所要用到的所有 node模塊。
Gruntfile.js
這個文件是提供給Grunt使用的，它是一個js文件，負責配置項目中要使用的Grunt task或者插件。舉例來說，在gruntfile中，你可能去指定項目使用Uglify插件，並且希望build的時候在一個特定的目錄中去運行uglify任務。這些就需要在gruntfile中配置。可以看作是ant的build.xml文件。后面會有更多詳細的介紹。
Bower.js
Bower.js用來告訴Bower項目中的包依賴關系，以及一些元數據。可以看作是maven的pom.xml文件。后面會有詳細介紹。
Karma相關文件
Karma是一個測試框架，在我們Angular項目中，會使用它進行一些測試的工作。
在ls -a之后，我們還能看到一些隱藏的文件：
我們稍微提一下：
.gitattributes,.gitignore
使用git的同學應該不陌生，都是git相關的配置文件。ignore文件用的也較多，比如對於node_modules中的文件，可以加入ignore列表，就沒有必要把這么多的模塊文件放到代碼庫，可以讓開發人員使用npm自行下載。
.jshintrc
使用jshint相關的配置，檢查js代碼規范和語法上的錯誤。
眼睛亮的同學肯定發現，它連404頁面都幫我們創建好了，那該是多么周到啊。
怎么樣，Yo已經幫我們把一個AngularJS應用的基礎全部搭建好了，剩下的就是往里面添加內容了。一旦你對這些生成的結構熟悉了之后，相信你會更加愛上這個工具。因為它提供的都是業界最佳的結構和開發模式。
Bower——web應用的包管理器
Bower幫助我們迅速找到並且安裝我們想要的CSS框架，javascript庫，而我們要做的只是輸入幾個簡單的命令。
首先我們看一下bower.js文件里的內容：
[javascript]
{
"name": "YeoAngular",
"version": "0.0.0",
"dependencies": {
"angular": "~1.0.7",
"json3": "~3.2.4",
"jquery": "~1.9.1",
"bootstrap-sass": "~2.3.1",
"es5-shim": "~2.0.8",
"angular-resource": "~1.0.7",
"angular-cookies": "~1.0.7"
},
"devDependencies": {
"angular-mocks": "~1.0.7",
"angular-scenario": "~1.0.7"
}
}
[/javascript]
從Bower的文件中我們可以到清楚的看到我們應用的依賴關系。上面已有的東西其實是在yo generate的時候調用Bower幫我們下載的。接下來我們要手動調用Bower去加入我們想要的另外的庫：Angular UI。Angular UI是Angular實現的一套Bootstrap組件，包含了手風琴，日期選擇起，輪播等常用控件。接下來我們運行下面的命令來安裝Angular UI。
bower install angular-bootstrap --save
--save的參數告訴Bower在bower.json文件中添加對這個組件的依賴。於是我們的bower文件中就多了下面的這一行："angular-bootstrap": "~0.6.0"
就是這簡單，你可以輕松的添加任何你想要的前端框架。
Angular
終於到的Angular的代碼部分了，不過今天這篇文章我不准備詳細的介紹AngularJS相關的知識點，重點還是放在Yeoman搭建Angular項目的基礎架構上。讓大家能夠迅速的開始一個Angular項目，后面再寫幾篇Angular特點的專題，一點點深入。
我們來看一下Yeoman Angular generator幫我們生成好的東西：一個module，一個controller和一個view。
Module：app/scripts/app.js
這里首先定義了一個叫YeoAngularApp的module，並且配置了一些路由的信息。針對路由，后面會在介紹AngularJS的文章中詳細介紹，這里簡單提一下，就是對特定的url配置相應的controller和template。有點像javaee中的web.xml中配置的servlet-mapping。
Controller：app/script/controllers/main.js
這里為YeoAngularApp模塊配置了一個叫“MainCtrl”的controller，並且在這個controller中設置了一個名叫awesomeThings的變量數組。后面在view中會使用到。
View：app/views/main.html
view中是大家熟悉的html代碼片段，只是在代碼中我們加入了一些Angular特有的標簽和屬性。 主要在第五行代碼中：
[html]
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
[/html]
這里用到了ng-repeat的指令，以及雙花括號的表示方式。ng-repeat大家從名字里可以看出應該是遍歷。那這句話的意思就是，遍歷aswesomeThings數組中的元素，賦值給thing變量，並以顯示在li標簽里。
上面的幾個文件已經基本展示了Angular的MVC模式相關的內容：
View：main.html中定義的頁面的顯示
Controller：main.js中定義的MainCtr模塊
Model：MainCtrl中定義的awesomeThings數組數據。
下面我們來看一下Yeoman為我們生成的這些文件的運行情況。Grunt作為一個功能豐富的打包、測試和部署工具，為我們提供了非常方便的查看預覽項目的方式。
運行命令：grunt server
它會幫我們打開一個瀏覽器，並在瀏覽器中顯示我們應用的頁面。
Grunt
Grunt是一個強大的功能豐富的javascript任務執行工具。它幫助我們自動運行我們設定的任務，如便宜coffeescript，壓縮css，代碼檢查等。在我們開發和部署應用過程中的所有任務都可以由Grunt幫我們完成。對於開發人員來說，它會實時監控我們對代碼的改動，幫助我們自動更新頁面的內容。如果你在配置文件中配置了壓縮、打包、測試等任務，它都可以在你代碼修改的同時幫你自動運行。這樣你就隨時隨地測試和查看自己代碼的改動。
實時刷新
我們試着在main.js中的awesomeThings添加一些新的條目，在保存之后，可以很快發現頁面上的內容也自動更新了。這省去了很多前端開發手動刷新查看更新的操作。
測試
前端代碼的測試一直是一個非常頭疼的事情。很多項目中，大家都想對前端代碼，尤其是js代碼進行單元測試，對於頁面的內容頁希望有一些自動化的測試。但是經常苦於找不到方便的方式而又受限於項目的進度，都作罷。Grunt配合Karma框架，為我們提供了非常便利的前端測試流程。
我們首先看一下yeoman為我們生成好的測試文件的例子。打開文件test/spec/controllers/main.js
簡單看一下，這個測試文件是用來測試我們的MainCtrl控制器，利用了Angular的inject機制，我們可以在測試環境中，是controller擁有運行時的狀態。這里主要是測試在awesomeThings中是否存在3個元素。我們來看一下運行的結果。
運行命令：grunt test
我在運行的時候遇到了一些錯誤，首先是關於/test/mock/**/*.js does not match相關的問題，查了一下，由於我們目前沒有模擬數據，所以在karma.js文件中，注釋掉下面這一行'test/mock/**/*.js',
接下來運行沒有問題，但是打開的瀏覽器中顯示的是 no data received。看了一下，發現了端倪，測試打開的url使用的是8080端口，而我機器中的apache一直處於開的狀態，所以肯定是端口被apache占用了。所以將karma.js中的port設置改成9080，運行成功。
使用Angular-bootstrap修改頁面
前面我們已經在代碼中添加了angular-bootstrap的插件，下面我們來用它稍微修改一下我們的頁面。
首先在index.html中添加對ui-bootstrap.js的引用：
[javascript]
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
[/javascript]
然后在app.js的controller中添加對 ui.bootstrap模塊的依賴：
[javascript]
angular.module('testYeoApp', ['ui.bootstrap'])
[/javascript]
接下來，將main.html中的內容換成使用dropdown的方式來顯示之前asesomeThings變量中的內容。
[html]
<ul>
<li class="dropdown">
<a class="dropdown-toggle">
Click me to see some awesome things!
</a>
<ul class="dropdown-menu">
<li ng-repeat="thing in awesomeThings">
<a>{{thing}}</a>
</li>
</ul>
</li>
</ul>
[/html]
可以在運行了grunt server之后再進行修改，這樣就可以實時看到更新的頁面：
OK，到這里今天要介紹的內容都講完了。是不是一切看起來都很簡單。希望大家能從中對Yeoman以及Angular產生一定的認識和好感。
后面會找時間寫一些Angular相關的系列文章，會在現有的這個代碼結構中不斷加入新的內容以做演示。代碼先放到github上，有時間在bae上搭一個基於nodejs的環境供演示用。
代碼：https://github.com/owenXin/YeoAngular
參考：
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
http://yeoman.io/
本博客停止更新，請訪問新個人博客：owenchen.duapp.com