AngularJS文件夹结构

Question

如何为大型可扩展的AngularJS应用程序布局文件夹结构？

Answer 1

按类型排序

在左侧,我们有按类型组织的应用程序.对于较小的应用程序来说并不算太糟糕,但即使在这里你也可以开始发现找到你想要的东西变得更加困难.当我想要查找特定视图及其控制器时,它们位于不同的文件夹中.如果您不确定如何组织代码,可以很好地从这里开始,因为很容易转换到右侧的技术:按功能结构.

按功能排序(首选)

在右侧,项目按功能组织.所有布局视图和控制器都放在布局文件夹中,管理内容放在admin文件夹中,所有区域使用的服务都放在services文件夹中.这里的想法是,当您在寻找使功能有效的代码时,它位于一个地方.服务有点不同,因为它们"服务"了许多功能.一旦我的应用程序开始成型,我喜欢这个,因为它对我来说变得更容易管理.

一篇写得很好的博客文章:http://www.johnpapa.net/angular-growth-structure/

示例应用程序:https://github.com/angular-app/angular-app

Answer 2

在构建了一些应用程序之后,一些在Symfony-PHP,一些.NET MVC,一些ROR中,我发现对我来说最好的方法是使用Yeoman.io和AngularJS生成器.

这是最受欢迎和最常见的结构,维护得最好.

最重要的是,通过保留该结构,它可以帮助您分离客户端代码并使其与服务器端技术(各种不同的文件夹结构和不同的服务器端模板引擎)无关.

这样,您就可以轻松复制和重用您的代码和其他代码.

这是在grunt构建之前:(但是使用yeoman生成器,不要只创建它!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

在grunt构建之后(concat,uglify,rev等等):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Answer 3

我喜欢这个关于angularjs结构的条目

它是由一个angularjs开发人员编写的,所以应该给你一个很好的洞察力

这是一段摘录:

root-app-folder
??? index.html
??? scripts
?   ??? controllers
?   ?   ??? main.js
?   ?   ??? ...
?   ??? directives
?   ?   ??? myDirective.js
?   ?   ??? ...
?   ??? filters
?   ?   ??? myFilter.js
?   ?   ??? ...
?   ??? services
?   ?   ??? myService.js
?   ?   ??? ...
?   ??? vendor
?   ?   ??? angular.js
?   ?   ??? angular.min.js
?   ?   ??? es5-shim.min.js
?   ?   ??? json3.min.js
?   ??? app.js
??? styles
?   ??? ...
??? views
    ??? main.html
    ??? ...