前臺開發是個非常神奇,充滿冒險,且樂趣十足的領域。我們很高興的看到,團隊對前臺的認識從 做做網頁,PP圖,引入幾個成型框架 到 前端工程師。
本節中,讓我們共同來深入的認識前臺開發系統軟件與工具,以及他們之間的關系。并最終使用它們來搭建前臺的ANGULARJS開發環境。
# git-shell
git相信大家并不陌生,它是我們一直在使用的版本控制工具。在前臺中,我們使用GIT,一方面是進行團隊的協作開發。另一方面,我們安裝完GIT后,可以得到一個git-shell的東西。我們可以在git-shell中運行一些類UNIX命令,成功的實現了命令的跨平臺。
# nodejs
node.js是個生態系統,如果我們想詳細理解的話,可以認為他是個跑在虛擬機的操作系統。這個操作系統與unix有點類似,我們除了那個命令行,看不到任何的圖型界面。
既然node.js是操作系統,那么我們的確是可以這樣和windows來對比的:
1.windows

2.node.js

和windows安裝后,微軟自動為我們安裝ie瀏覽器一樣。node.js安裝后,它為我們自動的安裝了一個叫做npm的軟件。所以,安裝完node.js后,我們得到的是這樣一個系統。

npm和我們windows中的360軟件管家有些類似,在windows中,我們可以使用360軟件管家進行軟件的安裝、卸載、更新;在NODE.JS中,我們同樣可以使用npm對運行在node.js中的軟件進行安裝、卸載、更新。
在我們的前臺開發中,所需要的bower grunt-cli yoman 三個主要的需要手動安裝的軟件,就是通過npm這個軟件管家來安裝的。

> nodejs官網:[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)
## bower
bower是node.js系統中的包(項目)管理工具,和我們在windows使用GITHUB進行項目管理一樣。bower可以自動的為我們下載我們所需要的包。比如jquery, bootstrap等。
安裝方法:
`$ npm install -g bower`
> tips,如果你是非windows系統,你可能需要這樣使用:`$ sudo npm install -g bower`, sudo可以使用npm擁有更高的權限。
`$`表示以上語句,需要在命令行輸入。比如上述語句,我們需要打開命令行(git-shell), 并輸入`npm install -g bower`.
> bower官網:[https://bower.io/](https://bower.io/)
## yoman
yoman譯為『腳手架』。『腳手架』廣泛的應用于建筑領域。


和它的表面意思一致,yoman是我們前臺開發的腳手架。它為我們的開發做了有效的支撐。它可以為我們自動的生成目錄結構,HTML,CSS,JS示例代碼。指明我們在開發過程所需依賴的node.js軟件及第三方包。是yoman,讓我們與世界大牛的距離又近了一層.
安裝方法:`$ npm install -g yo`
> yoman 官網: [http://yeoman.io/](http://yeoman.io/)
正如我們看到的一樣,yoman為我們提供了Angular, Backbone, React, Polymer等框架的開發支持。支持的總數已經超過了3900個,而且如果你愿意,也可以打造自己的yoman工程。
> yoman: generator-angular > [https://github.com/yeoman/generator-angular](https://github.com/yeoman/generator-angular)
## grunt-cli
grunt是個強大的自動化工作,它有很多個插件支持,可以自動的我們開啟一個http服務;監測代碼文件是否發生變動;在代碼文件發生變動時,自動我們刷新瀏覽器;自動的我們提示JS語法錯誤;自動的為我們指出不合規范的JS語法;當我們添加新的包時,自動的為我們添加引用;當我們發布項目時,自動的進行JS文件的合并與壓縮。。。grunt能用的,當然遠遠不止這些。如果別人問我們為什么使用grunt,我們可以回答:自動;如果別人問我們什么是GRUNT,我們還可以回答:自動。grunt已經成為了自動的代名詞。
我們接解grunt,就避免不了接觸grunt-cli,這兩者有什么關系呢?
如果你明白mysql與navicat之間的關系,那么恭喜你,因為grunt與grunt-cli的關系和前者一致。mysql提供服務,navicat調用mysql的服務,實現建表建庫數據的CURD等操作;grunt同樣提供服務,grunt-cli調用grunt服務,實現了自動化操作。沒錯,僅此而已。
安裝: `$ npm install -g grunt-cli`
grunt中文網:[http://www.gruntjs.net/](http://www.gruntjs.net/), 在此,我們要感謝[Bootstrap中文網](http://www.bootcss.com/)為維護gruntjs.net做出的努力。
使用NPM安裝完上述3款軟件后,我們大體得到了這樣的一個node.js操作系統

## 使用yoman構建angularjs開發架構
yoman在官網中,詳細的說明了如何使用yoman來構建其它的應用。我們在構建其它應用前,打開官網來進行應用的搜索。
>官網: [http://yeoman.io/generators/](http://yeoman.io/generators/)
我們輸入angular,得到如下結果:

我們看到angular前面有個 胡須 的標志,凡是有這種標志的,表示yoman官方出品。沒錯,官方出品,必屬精品。我們就選它。
到這,我們以使用yoman創建angular應用來看看yoman是怎么工作的。

在使用yoman創建angular應用前,我們首先需要使用npm來安裝配合yoman工作的generator-angular。有了generator-angular后,我們便可以使用`yo angular`命令來初始化angular項目了。
實際上,我們還可以使用yoman來安裝generator-angular。在此,我們保持與官方文檔一致,使用第一種,即使用npm來安裝.
> 官方文檔: [https://github.com/yeoman/generator-angular#readme](https://github.com/yeoman/generator-angular#readme)
安裝: `npm install -g grunt-cli bower yo generator-karma generator-angular`
執行上述命令后,實際上相當于分別執行了:
npm install -g grunt-cli
npm install -g bower
npm install -g yo
npm install -g generator-karma
npm install -g generator-angular
由于我們在前面已經執行過前面的三行命令,所以在這,我們也可以這樣執行:
`npm install -g generator-karma generator-angular`
`generator-karma`是angular的單元測試工具。
## 小試牛刀
我們在打開我們在項目javaee所在的目錄,并新建WebApp目錄。
執行:`$ yo angular`
```
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
// 除了最后一個用于手機的不選擇外,其它的全部選上吧。
? Which modules would you like to include?
? angular-animate.js
? angular-aria.js
? angular-cookies.js
? angular-resource.js
? angular-messages.js
? angular-route.js
? angular-sanitize.js
?? angular-touch.js
...
```
然后,如果你是第一次安裝,視網絡的不同,你可能會經過漫長的等待。不過,只要安裝成功一次,下次就好了。
如果你等上了半小時,還是停留在這個頁面:
```
Receiving...
```
那么我想,你是時候啟用團隊為你準備好的VPN了。
> tips:如果提示我們正在下載什么軟件到什么位置的時候,我們是可以使用ctrl+c來中斷程序,然后手動去下載安裝包,并放入到指定位置后再重新執行yo angular命令的。
如果你恰恰需要這個文件,請找到我們教程對應的github地址,并找到resoucre文件夾中的phantomjs-2.1.1-macosx.zip,復制到上面提示的位置,然后中斷程序后重新執行即可。
最后,如果你成功的出現了如下界面:

就不要傻等著了,因為已經顯示:完成,沒有出錯。
此時按回車鍵繼續,等待任務執行完畢。
此時,yoman已經為我們創建好了angularjs開發所需要的一切。
下一節,我們來共同學習。如果在yoman的基礎上進行開發。
<hr />
問題匯總:
1. 使用yo angular后,自動生成的文件夾并沒有安裝到當前文件夾。
原因:yoman在生成目錄時,會自當前文件夾往上今次查找Gruntfile.js,如果找到了,就會把擁有Gruntfile.js的文件夾做為項目文件夾。
解決辦法:1.如果在此文件夾中的父級文件夾中,已經有了yoman項目,那么是無法再其子文件夾中再建立yoman項目的。所以,一定要不在D,E盤的根目錄下建立yoman項目,否則,你的D盤下就只能有一個yoman項目了。2.如果實在有需求,刪除父文件夾中的Gruntfile.js吧。
> 官方文檔:[https://github.com/yeoman/yeoman/issues/635](https://github.com/yeoman/yeoman/issues/635)
- README
- 第一章:準備
- 第二章:Hello World!
- 第一節:查看工程文件
- 第二節:JDK、JRE與環境變量
- 第三節:index.jsp
- 第三章:Hello Struts
- 第一節:Web.xml
- 第二節:單入口
- 第三節:Hello Struts
- 第四節:觸發C層
- 第四章:建立數據表
- 第一節:建立實體類
- 第二節:測試一
- 第三節:測試二
- 第四節:引入Hibernate
- 第五節:配置Hibernate
- 第六節:建立連接
- 第七節:實體類映射數據表
- 第八節:完善數據表
- 第五章:教師管理
- 第一節:增加數據--add
- 第二節:增加數據--save
- 1 獲取傳入數據數據
- 2 數據寫入測試
- 3 對接C層
- 第三節:數據列表
- 1 獲取數據
- 2 重構代碼
- 3 C層對接--初始化
- 4 C層添加數據
- 5 V層顯示數據
- 6 獲取數據庫中數據
- 7 顯示性別
- 8 分頁
- 9 條件查詢
- 第四節:修改數據
- 1 edit
- 2 update
- 第五節:刪除數據
- 第六節:總結
- 第六章:重構C層
- 第一節:繼承ActionSupport類
- 第二節:數據驗證
- 第七章:前臺分離(前臺)
- 第一節:環境搭建
- 第二節:運行環境
- 第三節:共享開發環境
- 第四節:生產環境
- 第八章:前臺開發(前臺)
- 第一節:本地化
- 第二節:教師列表
- 1 引入M層
- 2 模擬后臺返回數據
- 3 C與M對接
- 4 C與V對接
- 第九章:前后臺對接(前后臺)
- 第一節:后臺輸出json(后臺)
- 第二節:對接前臺(全棧)
- 第二節:對接API(前臺)
- 第二節:跨域請求(后臺)
- 第三節:重構代碼(前臺)
- 第十章:重構后臺M層
- 第一節:數據訪問DAO層
- 第二節:項目整體重構
- 第十一章:用戶登陸(前后臺)
- 第一節:制定規范
- 第二節:定制測試用例
- 第三節:后臺輸入測試代碼(后臺)
- 第四節:postman(后臺)
- 第五節:新建用戶登陸模塊(前臺)
- 第六節:代碼重構(前臺)
- 第十二章:班級管理(前后臺)
- 第一節:班級列表
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第二節:Add
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第三節:Save
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第四節:Edit
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第五節:Update
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第六節:Delete
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第七節:小結
- 第十三章:班級管理(API)
- 第一節:ER圖
- 第二節:create
- 1 實體層
- 2 dao層
- 3 service(server)層
- 4 action層
- 第三節:ManyToOne
- 第四節:Read
- 1 service(server)層
- 2 action層
- 第五節:update
- 1 service(server)層
- 2 action層
- 第六節:update
- 第十四章:重構服務層