AngularJS 目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

由于一個(gè)大型的AngularJS應(yīng)用有較多組成部分，所以最好通過分層的目錄結(jié)構(gòu)來組織。有兩個(gè)主流的組織方式：

• 按照類型優(yōu)先，業(yè)務(wù)功能其次的組織方式

這種方式的目錄結(jié)構(gòu)看起來如下：

.
├── app
│   ├── app.js
│   ├── controllers
│   │   ├── page1
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   └── page2
│   │       └── ThirdCtrl.js
│   ├── directives
│   │   ├── page1
│   │   │   └── directive1.js
│   │   └── page2
│   │       ├── directive2.js
│   │       └── directive3.js
│   ├── filters
│   │   ├── page1
│   │   └── page2
│   └── services
│       ├── CommonService.js
│       ├── cache
│       │   ├── Cache1.js
│       │   └── Cache2.js
│       └── models
│           ├── Model1.js
│           └── Model2.js
├── lib
└── test

• 按照業(yè)務(wù)功能優(yōu)先，類型其次的組織方式

如下：

.
├── app
│   ├── app.js
│   ├── common
│   │   ├── controllers
│   │   ├── directives
│   │   ├── filters
│   │   └── services
│   ├── page1
│   │   ├── controllers
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   ├── directives
│   │   │   └── directive1.js
│   │   ├── filters
│   │   │   ├── filter1.js
│   │   │   └── filter2.js
│   │   └── services
│   │       ├── service1.js
│   │       └── service2.js
│   └── page2
│       ├── controllers
│       │   └── ThirdCtrl.js
│       ├── directives
│       │   ├── directive2.js
│       │   └── directive3.js
│       ├── filters
│       │   └── filter3.js
│       └── services
│           └── service3.js
├── lib
└── test

• 當(dāng)目錄里有多個(gè)單詞時(shí), 使用 lisp-case 語法:

app
 ├── app.js
 └── my-complex-module
     ├── controllers
     ├── directives
     ├── filters
     └── services

• 在創(chuàng)建指令時(shí)，合適的做法是將相關(guān)的文件放到同一目錄下 (如：模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整個(gè)項(xiàng)目周期都選擇這種組織方式，

    app
    └── directives
        ├── directive1
        │   ├── directive1.html
        │   ├── directive1.js
        │   └── directive1.sass
        └── directive2
            ├── directive2.html
            ├── directive2.js
            └── directive2.sass

那么，上述的兩種目錄結(jié)構(gòu)均能適用。

• ng-boilerplate 采用了兩種目錄結(jié)構(gòu)的一種更加輕量的方式。在這里，組件的單元測(cè)試與組件放置在同一目錄下。在這種方式下，當(dāng)改變組件時(shí)，更加容易找到對(duì)應(yīng)的測(cè)試以及相關(guān)文檔和用例。

    services
    ├── cache
    │   ├── cache1.js
    │   └── cache1.spec.js
    └── models
        ├── model1.js
        └── model1.spec.js

• app.js文件包含路由定義、配置和啟動(dòng)說明(如果需要的話)
• 每一個(gè) JavaScript 文件應(yīng)該僅包含一個(gè)組件。文件名應(yīng)該以組件名命名。
• 使用 Angular 項(xiàng)目模板，如 Yeoman, ng-boilerplate.

本人更傾向于第一種組織方式，因?yàn)楦子诓檎医M件。