如何为一个大型可扩展的AngularJS应用程序设计文件夹结构?
如何为一个大型可扩展的AngularJS应用程序设计文件夹结构?
左侧展示的是按类型分类的应用程序。对于小型应用程序来说不错,但即使在此处,您也可能开始发现查找您要找的内容变得更加困难。当我想要找到特定视图及其控制器时,它们位于不同的文件夹中。如果您不确定如何组织代码,从这里开始可能会很好,因为它很容易转换到右边的技术:按功能结构化。
右侧的项目按功能进行了组织。所有布局视图和控制器都放在布局文件夹中,管理内容放在管理员文件夹中,所有区域使用的服务都放在服务文件夹中。这里的想法是,当您正在查找使功能正常工作的代码时,它位于一个地方。服务有点不同,因为它们“服务”许多功能。一旦我的应用开始成形,我就喜欢这种方式,因为它对我来说更加易于管理。
一篇写得很好的博客文章:http://www.johnpapa.net/angular-growth-structure/
在构建了一些应用程序之后,有些使用Symfony-PHP,有些使用.NET MVC,有些使用ROR,我发现对我来说最好的方式是使用Yeoman.io与AngularJS生成器。
这是最流行、最常见和最好维护的结构。
最重要的是,通过保持这个结构,它可以帮助你将客户端代码与服务器端技术分离开来(所有不同的文件夹结构和不同的服务器端模板引擎)。
这样,你就可以轻松地复制和重用自己和别人的代码。
在使用grunt build之前,可以像这样创建它:(但使用yeoman生成器创建,而不只是简单地创建!)
/app
/scripts
/controllers
/directives
/services
/filters
app.js
/views
/styles
/img
/bower_components
index.html
bower.json
在运行grunt build(包括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)
angular.module('myApp').config(function($routeProvider) { ... });
- sports我喜欢这篇关于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
└── ...
还有一种方法是根据应用程序的功能结构而不是框架的结构来组织文件夹。有一个名为angular-app的Github起始Angular/Express应用程序可以说明这一点。
我已经做了三个AngularJS应用程序,到目前为止,文件夹结构有所改善。目前我保持我的结构简单。
index.html (or .php)
/resources
/css
/fonts
/images
/js
/controllers
/directives
/filters
/services
/partials (views)
我觉得这对于单个应用程序很好。目前还没有遇到需要使用多个应用程序的项目。