由于一個大型的AngularJS應用有較多組成部分,所以最好通過分層的目錄結構來組織。 有兩個主流的組織方式:
* 按照類型優先,業務功能其次的組織方式
這種方式的目錄結構看起來如下:
~~~
.
├── 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
~~~
* 按照業務功能優先,類型其次的組織方式
如下:
~~~
.
├── 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
~~~
* 當目錄里有多個單詞時, 使用 lisp-case 語法:
~~~
app
├── app.js
└── my-complex-module
? ?├── controllers
? ?├── directives
? ?├── filters
? ?└── services
~~~
* 在創建指令時,合適的做法是將相關的文件放到同一目錄下 (如:模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整個項目周期都選擇這種組織方式,
~~~
app
└── directives
├── directive1
│?? ├── directive1.html
│?? ├── directive1.js
│?? └── directive1.sass
└── directive2
├── directive2.html
├── directive2.js
└── directive2.sass
~~~
那么,上述的兩種目錄結構均能適用。
* [ng-boilerplate](http://joshdmiller.github.io/ng-boilerplate/#/home)?采用了兩種目錄結構的一種更加輕量的方式。在這里,組件的單元測試與組件放置在同一目錄下。在這種方式下,當改變組件時,更加容易找到對應的測試以及相關文檔和用例。
~~~
services
├── cache
│?? ├── cache1.js
│?? └── cache1.spec.js
└── models
├── model1.js
└── model1.spec.js
~~~
* `app.js`文件包含路由定義、配置和啟動說明(如果需要的話)
* 每一個 JavaScript 文件應該僅包含一個組件。文件名應該以組件名命名。
* 使用 Angular 項目模板,如?[Yeoman](http://yeoman.io/),?[ng-boilerplate](http://joshdmiller.github.io/ng-boilerplate/#/home).
本人更傾向于第一種組織方式,因為更易于查找組件。