Yeoman官方教程：用Yeoman和AngularJS做Web應用
預計完成時間：60分鐘
在這期的Code Lab中，你將會使用Yeoman和AngularJS搭建一個功能完整的應用，示例應用將會簡短地介紹一些關於Yeoman、Grunt和Bower的特點。如果你有一些程式設計經驗的話，這期的CodeL Lab會很適合你。
認識YEOMAN
Yeoman的logo是一個戴帽子的男人。Yeoman通過集成了三種工具來提升你的工作效率：
- yo是一個用於構建特定框架的生態系統的程式碼工具，我們稱之為生成器(generator)。在以前的文章裡我提過一些繁瑣的任務，使用yo就能處理一些那樣的任務。
- 多虧了Yeoman團隊和grunt-contrib的幫助，在專案的建立、預覽以及測試可以使用grunt。
- bower用於依賴管理，使用它以後你再也不用手動地去一個個下載你的前端庫了。
只需要一兩個命令，Yeoman就能給你的應用提供一個程式碼模板（或者一個像模組一樣的獨立的程式碼片段）、編譯Sass以及在當前的目錄啟動一個簡易的伺服器。它還能做單元測試，壓縮以及合併你的CSS、JS、HTML還有圖片等等功能。 你能使用npm安裝生成器，現在可用的生成器數量已經超過了450，這其中很多都是由開源社群主持編寫的。比較受歡迎的有generator-angular、generator-backbone、generator-ember。
今日YEOMAN應用：使用AngularJS構建的Todo應用
AngularJS是一個用於開發動態Web應用的JavaScript框架。如果要開發一個Web應用，AngularJS能夠操作HTML使之動態地發生改變，而不是一個單純的靜態文件，它提供了像資料繫結和依賴注入(DI)這樣的高階特定來簡化應用的開發。 如果想要了解更多關於AngularJS的資訊，請看文件。 現在讓我們開始著手做下面這個Todo應用吧。
專案原始碼
這個練習的原始碼你可以在http://bit.ly/yoangular的’angular-localStorage-todos’資料夾下找到。記住！你需要在目錄下執行
Shell| 12 | $npm install$bower install |
後再測試這個應用。如果你覺得這些步驟太麻煩了，這裡有幾個指向’angular-localStorage-todos/app’’目錄中的檔案的連結，你可以使用直接它們:)
設定
在安裝Yeoman之前，你需要確認以下配置：
- Node.js 版本在0.10以上
- npm 版本在1.3.7以上
安裝好Node之後，你就可以用命令列來安裝Yeoman了。 注意：大部分情況下Yeoman是要通過命令列來操作的，不同的系統執行以下命令的地方不太一樣：Mac下請使用終端，Linux下使用shell，Windows下使用Cygwin。
Shell| 1 | $npm install--global yo |
如果你看到了’permission errors’或者’access errors’，你需要在這條命令前面加上’sudo’。通過
Shell| 1 | $yo--version&&bower--version&&grunt--version |
命令來檢查是不是所有東西都已經安裝好了。在執行完上述命令後，你應該會看到有四個版本號會被打印出來：
- Yeoman
- Bower
- Grunt
- Grunt CLI（Grunt的命令列介面）
適用本教程的Yeoman, Bower和Grunt版本
現在的版本迭代太快了，這個教程的測試還是在Yeoman1.1.2, Bower1.2.8以及grunt-cli v0.1.11和grunt0.4.2下完成的。如果你在新的版本上做這個教程的時候出現了問題，就開一個issue來討論，請不要有什麼顧慮。
安裝Yeoman生成器
在傳統的Web開發流程中，你可能會花很多時間在配置程式碼模板、下載依賴還有手動元件專案檔案結構上。而Yeoman就是來簡化這個流程的！前面說的那些繁重的工作都會被交給Yeoman來完成。讓我們來試試用Yeoman來建立一個AngularJS專案吧！ 用下面這行命令進入Yeoman的選單：
Shell| 1 | $yo |
用鍵盤的上下鍵來操作選單，當選項’install a generator’被高亮的時候按下回車鍵。 接下來我們需要尋找一個合適的生成器。搜尋’angular’的話，你會得到很多搜尋結果。這些生成器都是由許多Yeoman開源社群貢獻的。在這個例子裡，我們使用的是’generator-angular’。當選中了’generator-angular’後，按下回車執行安裝，它所依賴的Node包就會開始被下載了。
如果你知道要安裝的生成器的名字，你可以直接用npm來安裝：
Shell| 1 | $npm install-ggenerator-angular |
下面是一張預覽圖：
這個例子使用的generator-angular版本
技術更新的如此之快！這個教程是在generator-angular 0.7.1環境下測試的。在安裝完Yeoman和Angular生成器後，在命令列中執行’yo’你就可以檢視版本號了。如果你在新版本的generator-angular做這個教程時候出現了問題，請開一個issue，我們很樂意幫助你。或者你可以直接安裝0.7.1這個版本：
Shell| 1 | $npm install-ggenerator-angular@0.7.1 |
使用生成器搭建你的應用
你可以在Yeoman的選單中操作已經安裝好的生成器：
Shell| 1 | $yo |
等一下！不要直接就執行生成器了。重新建立一個新的專案目錄，生成器會在這個目錄下生成出你的專案檔案的。
Shell| 12 | $mkdirmytodo$cdmytodo |
執行’yo’，選中’Run the Angular generator’，執行生成器。當你比較熟悉Yo的時候，就可以不通過選單直接執行生成器：
Shell| 1 | $yo angular |
一些生成器也會提供一些有共同開發庫（common developer libraries）的可選配置來定製你的應用，能夠加速初始化你的開發環境。 generator-angular會詢問你需不需要使用Sass和/或者Bootstrap，使用’n’和’y’進行選擇。
然後你需要選擇你需要使用的Angular模組。Angular模組是一些帶有特定功能的獨立的JS檔案。舉個例子，ngResource模組（angular-resource.js）提供了RESTful服務。你可以使用空格鍵來取消專案。下面來看一看預設值。(當你在試用空格的效果時，確保所有的模組都被標記為綠色)
好的，現在按下回車鍵。Yeoman將會自動構建你的應用、拉取需要的依賴並在你的工作流中建立一些有幫助的Grunt任務（Grunt Tasks）。幾分鐘後，我們就能正式開始啦！ 
由Yeoman構建的檔案目錄結構
開啟’mytodo’目錄，你會看到下面的檔案結構：
- app/：Web應用的父級目錄。
- index.html： Angular應用的基準HTML檔案（base html file）
- 404.html、favicon.ico和robots.txt：通用的Web檔案，Yeoman已經將它創建出來了，你不需要再手動去建立
- bower_components：存放專案相關的JavaScript或Web依賴，由bower安裝的
- scripts：我們的JS檔案
- app.js：主程式
- controllers：Angular控制器
- styles：我們的CSS檔案
- views：Angular模板
- Gruntfile.js、package.json 以及node_modules：Grunt需要使用的依賴以及配置。
- test和karma.conf.js/karma-e2e.conf.js：測試框架以及針對這個專案的單元測試，包括了為控制器寫的樣板測試（boilerplate tests）。
在瀏覽器中檢視你的應用
要在瀏覽器中檢視應用，就要將grunt server執行起來：
Shell| 1 | grunt serve |
執行命令後本地會啟動一個基於Node的http服務。通過瀏覽器訪問http://localhost:9000就可以看到你的應用了。
現在可以開啟編輯器開始更改應用。每次儲存更改後，瀏覽器將會自動重新整理，就是說你是不需要手動再重新整理瀏覽器了。這個被稱作‘live reloading’，這提供了一個很好的方式來實時檢視應用的狀態。它是通過一系列的Grunt任務來監視你的檔案的更改情況，一旦發現檔案被改動了，’live reloading’就會自動重新整理應用。在這個例子中，我們編輯了views/main.html，通過’live reload’我們從下面的狀態：
馬上到了這個狀態：
現在讓我們開始編寫我們的AngularJS應用吧
在app/mytodo目錄中的檔案你都可以在瀏覽器中訪問到，所有要更改的檔案也都在app目錄下。如果你不確定你的檔案建構是否正確，請檢視上文的截圖。
- 建立新模板展現Todo列表
先將views/main.html中除了class是jumbotron的div以外的內容都刪除，然後把’jumbotron’替換成’container’：
XHTML| 1 | <div class="container"></div> |
更改Angular控制器模板（即scripts/controller/main.js），將’awesomeThings’改為’todos’：
JavaScript| 12345 | 'use strict';angular.module('mytodoApp').controller('MainCtrl',function($scope){$scope.todos=['Item 1','Item 2','Item 3'];}); |
然後更改檢視（views/main.html）來顯示我們的Todo事項：
XHTML| 123456 | <div class"container"><h2>My todos</h2><p ng-repeat="todo in todos"><input type="text"ng-model="todo"></p></div> |
在p標籤中的ng-repeat屬性是一個Angular指令(directive)，當獲取到一個集合(collection)中的項時，它將項例項化。在我們的例子中，你可以想象一下，每個p標籤和它的內容都帶著這個’ng-repeat‘屬性。對於每個在todos陣列中的項，Angular都會生成一組新的
XHTML| 1 | <p><input></p> |
ng-model是另一個Angular指令，它主要是和input、select、textarea標籤和一些自定義控制元件一起使用，達到資料雙向繫結的效果。在我們的例子中，它用於顯示一系列帶有’todo‘的值的文字輸入域。 在瀏覽器中檢視ng-repeat和ng-model動態變化的效果。在儲存之前，我們的應用看起來應該是下圖這個樣子的：
- 新增一個Todo事項
我們將要實現新增新的Todo事項的功能。現在需要修改views/main.html：在h2元素和p元素之間加上一個form元素。現在你的views/main.html應該是下面這個樣子：
XHTML| 123456789101112131415161718192021 | <div class="container"><h2>My todos</h2><!-- Todos input --><form role="form"ng-submit="addTodo()"><div class="row"><div class="input-group"><input type="text"ng-model="todo"placeholder="What needs to be done?"class="form-control"><span class="input-group-btn"><input type="submit"value="Add"class="btn btn-primary"></span></div></div></form><p></p><!-- Todos list --><p ng-repeat="todo in todos"class="form-group"><input type="text"ng-model="todo"class="form-control"></p></div> |
這一步裡我們在頁面頂部增加了一個帶有提交按鈕的表單。這個表單使用了另一個Angular指令：ng-submit。返回檢視你的瀏覽器，現在的UI應該是下面這個這樣子的：
如果現在點選’Add’按鈕，什麼事情都不會發生—— 我們接下來要實現新增的效果： ng-submit是將一個Angular表示式繫結到表單的onsubmit事件上。如果form上沒有繫結任何動作，它也會阻止瀏覽器的預設行為。在我們的例子中，我們添加了一個’addTodo()’表示式。 下面的addTodo方法是實現將新增的Todo事項新增入已有的事項列表中，然後清空頂部的文字輸入域：
| 1234 | $scope.addTodo=function(){ $scope.todos.push($scope.todo); $scope.todo=''; }; |
將addTodo()方法加到scripts/controllers/main.js的MainCtrl控制器的定義中，現在你的控制器程式碼應該如下所示：
JavaScript| 12345678910 | 'use strict';angular.module('mytodoApp') .controller('MainCtrl',function($scope){ $scope.todos=['Item 1','Item 2','Item 3']; $scope.addTodo=function(){ $scope.todos.push($scope.todo); $scope.todo=''; }; }); |
注意：你可能會在在終端/命令列中看到很多linting errors，這可能是因為jshint檢查出程式碼縮排有問題，所以丟擲了警告，事實上這個Todo應用是可以正常工作的。不過，建議還是要看看jshint給你的建議，然後調整你的程式碼讓它更乾淨更有可讀性。 再次在瀏覽器中檢視，然後在頂部的輸入框中輸入新的Todo事項按下’Add’按鈕。新增的這個事項就會立刻出現在你的Todo列表中！
注意：如果你添加了一個空的Todo事項，或者一個重名的事項，你的Todo應用就會罷工哦。:( 不過作為一個小練習，你可以加強一下addTodo()方法來避免上述的錯誤
- 移除一個Todo事項
現在我們來新增一個移除事項的功能，先在列表中每一個Todo事項的的邊上加上一個“移除”按鈕。回到我們的檢視模板（views/main.html），在現有的ng-repeat指令上新增一個按鈕。然後確認我們的輸入框和移除按鈕是對齊的，將p標籤的class從’form-group’改成’input-group’。 再改動之前程式碼是這樣的：
XHTML| 1234 | <!-- Todos list --><p ng-repeat="todo in todos"class="form-group"><input type="text" |