Question

在一个大型的AngularJS应用程序中，我的所有控制器都在一个“controllers.js”文件中，对我来说似乎有点难以维护。有没有更好的方法来实现这一点，如：

\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js

，这也适用于过滤器，服务，指令等...

Answer 1

有很多方法可以组织代码。您可以查看以下链接

您可以遵循他们的标准，也可以自己制作。

请尝试遵循以下准则：

控制器不应该太长，如果它太长，则处理多个职责
尝试在系统中使用指令和服务来重用代码/逻辑
指令是Angualrjs中最强大的东西，试图最大限度地利用它。
写测试;更好的是你可以尝试用AngularJS练习TDD

Answer 2

你可以像模块一样管理它!!

例如，拿用户视图，你创建一个目录，这里的名字是user !!

user // directory , now put all controller ,service and directive file into it !! 

-- userController.js    //  controller file 

-- userService.js       // service file

-- userDirective.js     // directive file

-- views                // make directory, and put all html file regarding that module into this

  --users.html          // html file

希望这会对你有所帮助!!

Answer 3

了解这两个入门项目如何为更大规模的应用程序组织文件：

Answer 4

您可能希望查看this community-driven guide。

本指南介绍了组织大型AngularJS应用程序的目录结构的最佳实践。

它还就命名和构建AngularJS模块，控制器，指令，过滤器和服务提出了建议。

使用Lineman.js查看AngularJS application template之类的工具也是值得的。

对于企业AngularJS项目，您可能希望查看基于kickstarter的ng-boilerplate。

Answer 5

谷歌自己的团队提供了一份很好的文档来支持Shivali的例子： https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

这样的事情：

sampleapp/
    app.css
    app.js                top-level configuration, route def’ns for the app
    app-controller.js
    app-controller_test.js
    components/
    adminlogin/                                
            adminlogin.css                styles only used by this component
            adminlogin.js              optional file for module definition
            adminlogin-directive.js
            adminlogin-directive_test.js        
                    private-export-filter/
                            private-export-filter.js
                            private-export-filter_test.js
    userlogin/
    somefilter.js
    somefilter_test.js
    userlogin.js
    userlogin.css                
    userlogin.html                
    userlogin-directive.js
    userlogin-directive_test.js
    userlogin-service.js
    userlogin-service_test.js                
            index.html
    subsection1/
    subsection1.js
    subsection1-controller.js
                    subsection1-controller_test.js
                    subsection1_test.js                         
                    subsection1-1/                        
                            subsection1-1.css
                            subsection1-1.html
                            subsection1-1.js
                            subsection1-1-controller.js
    subsection1-1-controller_test.js
                    subsection1-2/                        
            subsection2/
    subsection2.css
    subsection2.html
    subsection2.js
    subsection2-controller.js
    subsection2-controller_test.js
            subsection3/
                    subsection3-1/
    etc...

Answer 6

选中此项，使用CoffeeScript，SCSS构建角度应用程序。

https://github.com/nhim175/modular-angular-skeleton/

AngularJS应用程序文件结构

6 个答案: