使用Yeoman快速啓動AngularJS項目開發

本博客中止更新，請訪問新我的博客：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教程中會包括以下的內容：
一、使用Yeo搭建一個AngularJS項目的基本框架
二、使用Grunt加速項目開發和執行相關的任務
三、使用Bower來添加第三方的插件/框架
四、對咱們AngularJS添加內容

環境要求：
在開始和運行咱們的項目以前，你最好已經有以下的一些知識儲備和環境的準備：
一、瞭解控制檯和命令行的一些基本知識
二、安裝了NodeJS和NPM
三、基礎的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