第一節：環境搭建 · J2EE入門實例教程

前臺開發是個非常神奇，充滿冒險，且樂趣十足的領域。我們很高興的看到，團隊對前臺的認識從做做網頁，PP圖，引入幾個成型框架到前端工程師。本節中，讓我們共同來深入的認識前臺開發系統軟件與工具，以及他們之間的關系。并最終使用它們來搭建前臺的ANGULARJS開發環境。 # git-shell git相信大家并不陌生，它是我們一直在使用的版本控制工具。在前臺中，我們使用GIT，一方面是進行團隊的協作開發。另一方面，我們安裝完GIT后，可以得到一個git-shell的東西。我們可以在git-shell中運行一些類UNIX命令，成功的實現了命令的跨平臺。 # nodejs node.js是個生態系統，如果我們想詳細理解的話，可以認為他是個跑在虛擬機的操作系統。這個操作系統與unix有點類似，我們除了那個命令行，看不到任何的圖型界面。既然node.js是操作系統，那么我們的確是可以這樣和windows來對比的： 1.windows ![https://box.kancloud.cn/ec6fa38cdd628f6773fc9769183e2301_720x318.png](https://box.kancloud.cn/ec6fa38cdd628f6773fc9769183e2301_720x318.png) 2.node.js ![https://box.kancloud.cn/3c185657b06990f816186148e6b92ac6_728x320.png](https://box.kancloud.cn/3c185657b06990f816186148e6b92ac6_728x320.png) 和windows安裝后，微軟自動為我們安裝ie瀏覽器一樣。node.js安裝后，它為我們自動的安裝了一個叫做npm的軟件。所以，安裝完node.js后，我們得到的是這樣一個系統。 ![https://box.kancloud.cn/ecc5866696827a7293aacf3403d8ff29_704x198.png](https://box.kancloud.cn/ecc5866696827a7293aacf3403d8ff29_704x198.png) npm和我們windows中的360軟件管家有些類似，在windows中，我們可以使用360軟件管家進行軟件的安裝、卸載、更新；在NODE.JS中，我們同樣可以使用npm對運行在node.js中的軟件進行安裝、卸載、更新。在我們的前臺開發中，所需要的bower grunt-cli yoman 三個主要的需要手動安裝的軟件，就是通過npm這個軟件管家來安裝的。 ![https://box.kancloud.cn/6bacb3262afda7c6fea9eaf9dcf6fde6_904x236.png](https://box.kancloud.cn/6bacb3262afda7c6fea9eaf9dcf6fde6_904x236.png) > 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譯為『腳手架』。『腳手架』廣泛的應用于建筑領域。 ![https://box.kancloud.cn/dc326dd0139c2c4f283c7a76dbb7dd3c_992x450.png](https://box.kancloud.cn/dc326dd0139c2c4f283c7a76dbb7dd3c_992x450.png) ![https://box.kancloud.cn/1de2db96878b7766504686a18a5e7089_814x406.png](https://box.kancloud.cn/1de2db96878b7766504686a18a5e7089_814x406.png) 和它的表面意思一致，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操作系統 ![https://box.kancloud.cn/6bacb3262afda7c6fea9eaf9dcf6fde6_904x236.png](https://box.kancloud.cn/6bacb3262afda7c6fea9eaf9dcf6fde6_904x236.png) ## 使用yoman構建angularjs開發架構 yoman在官網中，詳細的說明了如何使用yoman來構建其它的應用。我們在構建其它應用前，打開官網來進行應用的搜索。 >官網： [http://yeoman.io/generators/](http://yeoman.io/generators/) 我們輸入angular，得到如下結果： ![https://box.kancloud.cn/7e14f4a63a2f8e80e4d64c3b4be2b078_611x454.png](https://box.kancloud.cn/7e14f4a63a2f8e80e4d64c3b4be2b078_611x454.png) 我們看到angular前面有個胡須的標志，凡是有這種標志的，表示yoman官方出品。沒錯，官方出品，必屬精品。我們就選它。到這，我們以使用yoman創建angular應用來看看yoman是怎么工作的。 ![https://box.kancloud.cn/ad689692de0afb26341d085d130e0f73_1276x412.png](https://box.kancloud.cn/ad689692de0afb26341d085d130e0f73_1276x412.png) 在使用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，復制到上面提示的位置，然后中斷程序后重新執行即可。最后，如果你成功的出現了如下界面： ![https://box.kancloud.cn/e7be48732a8c65b8013ceedd9319c4ee_1348x736.png](https://box.kancloud.cn/e7be48732a8c65b8013ceedd9319c4ee_1348x736.png) 就不要傻等著了，因為已經顯示：完成，沒有出錯。此時按回車鍵繼續，等待任務執行完畢。此時，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)