由于一个大型的AngularJS应用有较多组成部分，所以最好通过分层的目录结构来组织。 有两个主流的组织方式：

    • 按照类型优先，业务功能其次的组织方式

    这种方式的目录结构看起来如下：

    1.       .
    2. ├── app
    3. │   ├── app.js
    4. │   ├── controllers
    5. │   │   ├── page1
    6. │   │   │   ├── FirstCtrl.js
    7. │   │   │   └── SecondCtrl.js
    8. │   │   └── page2
    9. │   │       └── ThirdCtrl.js
    10. │   ├── directives
    11. │   │   ├── page1
    12. │   │   │   └── directive1.js
    13. │   │   └── page2
    14. │   │       ├── directive2.js
    15. │   │       └── directive3.js
    16. │   ├── filters
    17. │   │   ├── page1
    18. │   │   └── page2
    19. │   └── services
    20. │       ├── CommonService.js
    21. │       ├── cache
    22. │       │   ├── Cache1.js
    23. │       │   └── Cache2.js
    24. │       └── models
    25. │           ├── Model1.js
    26. │           └── Model2.js
    27. ├── lib
    28. └── test
    29.
    • 按照业务功能优先，类型其次的组织方式

    如下：

    1.       .
    2. ├── app
    3. │   ├── app.js
    4. │   ├── common
    5. │   │   ├── controllers
    6. │   │   ├── directives
    7. │   │   ├── filters
    8. │   │   └── services
    9. │   ├── page1
    10. │   │   ├── controllers
    11. │   │   │   ├── FirstCtrl.js
    12. │   │   │   └── SecondCtrl.js
    13. │   │   ├── directives
    14. │   │   │   └── directive1.js
    15. │   │   ├── filters
    16. │   │   │   ├── filter1.js
    17. │   │   │   └── filter2.js
    18. │   │   └── services
    19. │   │       ├── service1.js
    20. │   │       └── service2.js
    21. │   └── page2
    22. │       ├── controllers
    23. │       │   └── ThirdCtrl.js
    24. │       ├── directives
    25. │       │   ├── directive2.js
    26. │       │   └── directive3.js
    27. │       ├── filters
    28. │       │   └── filter3.js
    29. │       └── services
    30. │           └── service3.js
    31. ├── lib
    32. └── test
    33.
    • 当目录里有多个单词时, 使用 lisp-case 语法: 
    1.       app
    2.  ├── app.js
    3.  └── my-complex-module
    4.      ├── controllers
    5.      ├── directives
    6.      ├── filters
    7.      └── services
    8.
    • 在创建指令时，合适的做法是将相关的文件放到同一目录下 (如：模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整个项目周期都选择这种组织方式，
    1.           app
    2. └── directives
    3.     ├── directive1
    4.     │   ├── directive1.html
    5.     │   ├── directive1.js
    6.     │   └── directive1.sass
    7.     └── directive2
    8.         ├── directive2.html
    9.         ├── directive2.js
    10.         └── directive2.sass
    11.

    那么，上述的两种目录结构均能适用。

    • ng-boilerplate 采用了两种目录结构的一种更加轻量的方式。在这里，组件的单元测试与组件放置在同一目录下。在这种方式下，当改变组件时，更加容易找到对应的测试以及相关文档和用例。
    1.           services
    2. ├── cache
    3. │   ├── cache1.js
    4. │   └── cache1.spec.js
    5. └── models
    6.     ├── model1.js
    7.     └── model1.spec.js
    8.

    • app.js文件包含路由定义、配置和启动说明(如果需要的话)

    • 每一个 JavaScript 文件应该仅包含一个组件。文件名应该以组件名命名。

    • 使用 Angular 项目模板，如 Yeoman, ng-boilerplate.

    本人更倾向于第一种组织方式，因为更易于查找组件。