【问题标题】:AngularJS application file structureAngularJS 应用程序文件结构
【发布时间】:2013-07-04 03:06:25
【问题描述】:

在一个大型 AngularJS 应用程序中,我的所有控制器都在一个“controllers.js”文件中,这对我来说似乎有点不可维护。有没有更好的方法来做到这一点,例如:

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

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

【问题讨论】:

标签: javascript angularjs directory-structure


【解决方案1】:

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

例如,以用户视图为例,你做一个目录,这里它的名字是用户!!

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

希望对你有帮助!!

【讨论】:

【解决方案2】:

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

您可以遵循他们的标准,也可以自己制定标准。

尝试遵循以下准则:

  • Contollers 不应该太长,如果太长那么它是在处理多个职责
  • 尝试在您的系统中使用指令和服务来重用您的代码/逻辑
  • 指令是 Angualrjs 中最强大的东西,尽量发挥它的最大优势。
  • 写测试;更好的是,您可以尝试使用 AngularJS 练习 TDD

【讨论】:

  • 按类型组织事物对小型项目很有用,但如果您想借用您过去编写的一些功能,则无济于事。这就是功能的起源,例如。模块,开始发挥作用。我真的很喜欢阅读您列表中的第二篇文章。感谢分享。
  • 你的第三个链接是2018年的404。
  • @ale10ander 感谢您指出这一点。该结构适用于 Angular 1,将更新我的答案。
【解决方案3】:

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

【讨论】:

    【解决方案4】:

    您不妨看看this community-driven guide。

    该指南描述了组织大型 AngularJS 应用程序目录结构的最佳实践。

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

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

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

    【讨论】:

      【解决方案5】:

      Google 自己的团队提供了一份很好的文档来支持 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...
      

      【讨论】:

        【解决方案6】:

        检查一下,使用 CoffeeScript、SCSS 构建您的 Angular 应用程序。

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-09-06
          • 2011-11-19
          • 2012-09-06
          • 2016-04-08
          • 2016-08-20
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多