我是如何基於angular+requirejs+node作SPA項目架構的

本文章已經錄製視頻，地址是：http://v.youku.com/v_show/id_XODI3MjYyODI0.html

前端這兩年技術飛速發展，各類優秀框架層出不窮。本文不是討論各框架的比較，也不討論爲何我要用angular，而不用backbone；不討論爲何用requirejs，而不用browserify，seajs等。只是介紹日常我是怎麼進行項目的前端架構。

一個成熟項目架構中應該具備哪些功能

* 快速的項目生成器——快速生成項目主體架構，單步實現controller，單步實現view，實現根據router自動生成view，controller

* 靜態資源的管理——基於bower

* css動態編譯——基於sass，compass實現css嵌套寫法，跨瀏覽器實現css前綴等。

* 解耦，基於模塊開發——基於requirejs

* mv*框架——基於angular實現view-model雙向綁定。

* 代碼管理——git管理代碼版本，git submodule實現公共模塊引入。

* 本地mock數據——基於express擴展，可支持get及post請求模擬

* 打包壓縮上線——基於npm模塊進行打包壓縮，修改後時時刷新頁面

項目生成器

項目生成器我已經發布爲npm公共模塊，地址是：

https://www.npmjs.org/package/generator-webbp

注意：由於項目生成器中默認你電腦支持sass，compass編譯所依賴的環境，若是項目中最後跑步起來，請確認是否由於這個緣由致使。固然有任何問題，歡迎加個人羣討論qq:236949405。

* 快速生成項目架構：

yo webbp

　　根據提示操做便可。生成後，打開項目目錄，1. npm install   2.grunt 便可自動打開瀏覽器看到項目

* 單步生成controller

yo webbp:controllers detail.about.contact

　　便可生成以下文件：

|controllers
   |detail
      |about.js
      |contact.js
    detail.js

　　其中detail.js中會自動加載about.js及contact.js

*單步生成view

yo webbp:views detail.about.contact

　　生成以下文件：

|views
   |detail
      |about.html
      |contact.html
    detail.html

*生成routes，可自動關聯view及controller

yo webbp:routess detail.about.contact

　　此命令會自動調用controller，及view命令。

而生成routers代碼爲：

define(['./states', '../cons/simpleCons'],
    function (stateModule, simpleCons) {
      stateModule.config(
          ['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {
              $stateProvider.state("detail", {
                abstract: true,
                resolve: {
                  instanceBasicPromise: [ '$stateParams', function( $stateParams){

                  }]
                },
                url: "/detail",
                controller: 'detailController',
                templateUrl: simpleCons.VIEW_PATH + 'detail.html'
              })

                .state("detail.about", {
                  url: "/about",
                  views: {
                    detail: {
                      templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
                      controller: 'detail.aboutController'
                    }
                  }
                })  

            }
          ]);
    })

　　其中controller及view文件都會自動生成。

靜態資源的管理——基於bower

項目中引入的angularjs，jquery，bootstrap等基於bower進行依賴管理。

另外，我還發布了一個基於angular-form的擴展叫simple-form，地址是：https://github.com/cc17/angular-simple-form。是目前爲止我以爲使用最方便的angular-form，基於form的model配置，並實現form-data表單提交數據和view的雙向綁定。誰用誰知道，有問題歡迎提bug給我。

css動態編譯——基於sass，compass實現css嵌套寫法，跨瀏覽器實現css前綴等

這個已經不屬於新姿式了，你們都知道爲何要用這個。若是你不知道這個，你確定知道less吧

* 實現嵌套寫法

.block-a{
  .block-b{
      .block-c{}
  }
}

* 實現跨瀏覽器寫法

該死的瀏覽器各類前綴，真是要醉了的節奏啊。用compass只要這麼寫就會編譯成各瀏覽器識別的css，是否是很奇妙。

div{
  @include border-radius(4px);
}

* 跟寫js同樣寫css，定義變量是否是很爽

具體怎麼用，你們去google吧。這個很簡單。　

解耦，基於模塊開發——基於requirejs　

很高興的是前端代碼愈來愈多了，咱們不再是隻會切頁面的美工了，很不幸的是咱們永遠不知道本身幾點下班了。哎

這麼多代碼，咱們不再能只在一個 bigbig.js文件裏放置了。怎麼辦呢，對分開，解耦，模塊化開發。  a.js, b.js ,c.js,怎麼處理依賴？ seajs，requirejs，還有個browserify等等，你還能夠本身寫個簡單的。具體應該用那個，不討論，我就用requirejs。

mv*框架——基於angular實現view-model雙向綁定

都說不要重複造輪子了，仍是有各類牛逼的新框架造出來。也就說說而已，不創新，哪有技術的發展。各類框架優劣也不討論，個人生成器是基於angular的。還要支持ie6，7的我只能說句抱歉了。使用angular有什麼好處：雙向綁定，依賴注入，mvc，directive聲明式的擴展html標籤。。。太多了。用了以後你才驚訝發現，擦，原來寫好多行的代碼 ，幾行就搞定。媽媽不再用擔憂我加班了——不過實際上，咱們也沒早下班哈。

代碼管理——git管理代碼版本，git submodule實現公共模塊引入

git，svn有什麼區別呢？

1.GIT是分佈式的，SVN不是
2.GIT把內容按元數據方式存儲，而SVN是按文件
3.GIT分支和SVN的分支不一樣
4.GIT沒有一個全局的版本號，而SVN有：
5.GIT的內容完整性要優於SVN

另外github上有太多好東西，因此git用的人是愈來愈多了。

另外git還有個submodule的東西挺好用的。假如你有多個子項目，須要將通用的組件提取出來，submodule很適合。

本地mock數據——基於express擴展，可支持get及post請求模擬

先後端分離，協同合做開發，提升效率，可是有個問題，咱們須要本地模擬後端的數據接口。在不會nodejs以前，我用的是wamp框架，本地啓動server服務。如今nodejs發展這麼迅速，各類自動化工具均可以基於nodejs開發。因此我在這個代碼生成器中基於express擴展，實現對get和post請求mock。另外還能夠模擬接口延時。

 

打包壓縮上線——基於npm模塊進行打包壓縮，修改後時時刷新頁面

最後一個問題，項目開完後，須要打包壓縮上線。這也是自動化的，咱們只須要在生成的項目中grunt build，最後把這個build文件發佈到線上服務器便可。

 

總結：其實說了不少廢話，總的來講，我但願這個項目模板生成器能夠知足你80%以上開發需求。simple-form也但願你們試用下，給我提bug。就這樣把，越寫越不想寫，由於感受涉及的知識點太多，若是往下寫就沒邊了。