由于一個(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件。