基於ANGULAR.JS的下一代WEB應用開發-01-yeoman

標籤：style   blog   http   java   color   使用   os   strong   

  Angularjs 個人認為這是一款很好的架構！它將我們從AJAX應用的開發中解救了出來！嗯。。。。廢話就說道這裡下面我們開始把！

　　

 

　　首先我們必須瞭解一些核心的概念：

1. 用戶端模版
2. MVC
3. 資料繫結
4. 依賴注入
5. 指令

　　

　　先不要著急，瞭解這些詞語的意思和含義，萬丈高樓平地起我們慢慢來構建一個屬於我們自己的小應用。

　　

　　

• 確定我們的目標

　　　首先我們必須確定自己要做什嗎？做個什麼呢？YOUKU TUDOU那樣的視頻網站，哦，拜託殺了我把，我只想瞭解下這個東西，嗯！那就寫個簡單的部落格吧！你還是殺了我把，由於本人太懶，所以就做個登入註冊的應用好了，對啊因為登入註冊到哪裡都需　　        要，所以我決定把他寫成一個基於ANGULAR的小架構！

• 我們需要準備什麼

　　　好的確定了目標我們需要準備些什麼呢？扳手啊！鎚子啊！釘子啊！。。。。亂七八糟的一大堆，頭已經暈掉了！

　　　確實在現實生活中，如果我們要做一個應用需要至少列個清單準備這樣或者那樣的東西，這真是令人頭疼的一件事情，對於這麼懶的我來說，你還是殺了我把！

　　　所以我決定尋找一款項目構建工具，在GOOGLE一段時間後！呵呵，YEOMAN 出現在了我的視野當中，這完全就是為我們前端開發人員量身打造的啊！

　　

• 瞭解 配置 YEOMAN

        唉懶得打字了 所以我決定COPY一段別人的介紹

　　　

Yeoman是Google的團隊和外部貢獻者團隊合作開發的，他的目標是通過Grunt（一個用於開發工作單位自動化的命令列工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的  包管理器）的封裝為開發人員建立一個易用的  工作流程。

 Yeoman的目的不僅是要為新項目建立工作流程，同時還是為瞭解決前端開發所面臨的諸多嚴重問題，例如零散的依賴關係。 Yeoman主要有三部分組成：yo（腳手架工具）、grunt（構建工具）、bower（包管理器）。這三個工具是分別獨立開發的，但是需要配合使用，來實現我們高效的工作流程模式。 下面這幅圖很形象的表明了他們三者之間的協作關係。 YOMAN的特性 閃電般的初始化：項目開始階段，可以基於現有的模板架構（例如：HTML5 Bolierplate、Twitter Bootstrap）進行項目初始化的快速構建。了不起的構建流程：不僅僅包括JS、CSS代碼的壓縮、合并，還可以對圖片和HTML檔案進行最佳化，同時對CoffeScript和Compass的檔案進行編譯。自動編譯CoffeScript和Compass：通過LiveReload進程可以對源檔案發生的改動自動編譯，完成後重新整理瀏覽器。自動Lint代碼：對於JS代碼會自動進行JSLint測試，確保代碼符合最佳編程實踐。內建的預覽伺服器：不再需要自己設定管理員了，使用內建的就可以快速預覽。驚人的圖片最佳化：通過使用OptiPNG和JPEGTran來最佳化圖片，減少下載損耗。殺手級包管理：通過bower search jQuery，可以快速安裝和更新相關的檔案，不再需要開啟瀏覽器自己搜尋了。PhantomJS單元測試：可以非常方便的使用PhantomJS進行單元測試，一切在項目初始的時候都準備好了 呵呵多好（http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html） 感謝這位博友吧！ 下面我簡單說下應該怎麼安裝YEOMAN 在WINDOWS下面 

開啟 cmd.exe

1. 安裝 Chocolatey NuGet
2. 安裝 node.js and ruby
   1. cinst ruby1.9 (the "ruby" package installs ruby 2.0, which might not work)
3. 重啟 cmd.exe
4. gem install compass --pre  （這個我覺得無所謂可以不裝）
5. npm install -g yo grunt-cli bower  這個命令必須執行
6. 需要安裝GIT 自己去下吧
7. 重啟CMD運行 yeoman
8. 這個英文原版是https://gist.github.com/jaromero/9964937這裡，大家可以自己去看哦！

　　

　　額！我還忘了一點，WINDOWS使用者需要配置好YEOMAN 的環境變數哦！要不然CMD 命令是會找不到的

　　

　　嗯！今天就這樣吃飯去了，下一節我們來構建應用骨架。