【AngularJS】【二】項目目錄結構

1.AngularJS官網seed目錄結構

• css/
• img/
• js/
  • app.js
  • controllers.js
  • directives.js
  • filters.js
  • services.js
• lib/
• partials/
  
  

或者可以是這樣的：

 

2.按照業務邏輯划分

上面的這種結構對於一個簡單的單頁 app 來說是可行的，只是一旦代碼中存在多個 Controller 或者 Service，就很難找到想要尋找的對象了。

我們可以對文件按照業務邏輯進行拆分，就像下面這樣：

• controllers/
  • LoginController.js
  • RegistrationController.js
  • ProductDetailController.js
  • SearchResultsController.js
• directives.js
• filters.js
• models/
  • CartModel.js
  • ProductModel.js
  • SearchResultsModel.js
  • UserModel.js
• services/
  • CartService.js
  • UserService.js
  • ProductService.js

3.模塊化划分

這種結構把不同的業務功能拆分為獨立的文件，條理清晰，但是仍有一定的局限性。最大的問題是一個業務功能的代碼分布在controllers, models, servers 三個不同目錄下，

要從中挑出正確的文件，建立起代碼關聯，還是有些麻煩。按照功能進行模塊化划分目錄結構，應該要更為合理一些：

• cart/
  • CartModel.js
  • CartService.js
• common/
  • directives.js
  • filters.js
• product/
  • search/
    • SearchResultsController.js
    • SearchResultsModel.js
  • ProductDetailController.js
  • ProductModel.js
  • ProductService.js
• user/
  • LoginController.js
  • RegistrationController.js
  • UserModel.js
  • UserService.js

這樣也是適合 RequireJS 等模塊加載器的自然直觀的代碼組織方式

 

4.類似於3進行模塊化，不過這里每個模塊都是一個獨立的個體

--app 
   |--thirdParty
   |   |--moduleA
   |   |    |--js
   |   |    |--css
   |   |    |--lib
   |   |    |--subModuleC
   |   |
   |   |--moduleB
   |   
   |--system
   |   |--moduleC

不要說蛋疼，不要說“這在頁面上加載腳本的時候還得一個一個去找js和css的位置”。如果你用grunt之類的工具的話應該知道這根本不是問題。這樣划分的好處在於，幾乎任何一個文件夾都是一個完整的模塊，你可以隨便拷貝到任何地方去測試什么，或者在其他簡單環境開發好了再丟到系統目錄下。system和thirdParty這兩個目錄的划分是用來區分通用模塊和業務邏輯模塊的。其實這就是典型的服務器端框架目錄划分。 不過實際應用中，這樣目錄結構還是有問題。特別是當你使用less的時候，如果你的less文件依賴thirdParty中的less庫，那你在測試的時候就不得不保持住這個相同的目錄結構。
解決方法是將thirdPatry放在system里。如果你的模塊不多，也可以把模塊平行放置。

 

5.

與按照類型划分文件不同，取而代之的，我們可以按照特性划分文件：

1 2 3 4 5 6 7 8 9 10 11 12 13

app/      app.js      Feed/          _feed.html          FeedController.js          FeedEntryDirective.js          FeedService.js      Login/          _login.html          LoginController.js          LoginService.js      Shared/          CapatalizeFilter.js

這種目錄結構使得我們能夠更容易地找到與某個特性相關的所有文件，繼而加快我們的開發進度。盡管將.html和.js文件置於一處可能存在爭議，但節省下來的時間更有價值。

 

app.js依賴注入Ctrl,Dtve,Service.同一功能模塊下的Ctrl放置在一個文件中，不同的Ctrl文件模塊名稱取相同的名稱.

app.js中完成路由的設置

 

 

6.

文件目錄結構

app/                        
    common/                     -->通用模塊文件夾
        controllers/            -->控制器文件夾
            menu.js             -->主菜單控制器
        directives/             -->指令文件夾
            action.js           -->用於應用中定義鏈接的指令
        services/               -->服務文件夾
            acl.js              -->授權服務代碼
            action.js           -->用於提供給action指令使用的認證服務
            auth.js             -->認證服務代碼
        init.js                 -->模塊的初始化文件
    css/                        -->項目的樣式文件夾
    img/                        -->項目的圖片文件夾
    lib/                        -->項目使用的第三方js庫文件夾，包含requireJS，angularJS等
    modules/                    -->業務模塊文件夾，里面按照每個模塊一個獨立的文件夾來存放
        publish/                
            controllers/        -->模塊下的控制器文件夾
                dashboard.js    -->控制器代碼文件
            templetes/          -->對應的視圖文件夾
                dashboard.html  -->視圖文件
            init.js             -->模塊的初始化文件
            route.js            -->模塊的路由配置文件
        ...
    utils/                      -->工具集合文件夾
        loader.js               -->用於加載模塊的函數
        ...
    app.js                      -->應用主模塊文件
    bootstrap.js                -->requireJS的配置及應用構建引導文件
    config.js                   -->應用的配置文件
    index.html                  -->應用的入口文件
mock/                           -->模擬后端服務

約定

每個模塊(包含commom和modules下的每個文件夾)文件夾下，都應該包含init.js和route.js2個文件，前者是用來構造該模塊，后者用來提供該模塊的路由數據。

 

requirejs+angularjs+ui-route