1.AngularJS官网seed目录结构

转载：https://www.cnblogs.com/reachers/articles/4718500.html

css/
img/
js/
- app.js
- controllers.js
- directives.js
- filters.js
- services.js
lib/
partials/

或者可以是这样的：

2.按照业务逻辑划分

上面的这种结构对于一个简单的单页 app 来说是可行的，只是一旦代码中存在多个 Controller 或者 Service，就很难找到想要寻找的对象了。

我们可以对文件按照业务逻辑进行拆分，就像下面这样：

controllers/
- LoginController.js
- RegistrationController.js
- ProductDetailController.js
- SearchResultsController.js
directives.js
filters.js
models/
- CartModel.js
- ProductModel.js
- SearchResultsModel.js
- UserModel.js
services/
- CartService.js
- UserService.js
- ProductService.js

3.模块化划分

这种结构把不同的业务功能拆分为独立的文件，条理清晰，但是仍有一定的局限性。最大的问题是一个业务功能的代码分布在controllers, models, servers 三个不同目录下，

要从中挑出正确的文件，建立起代码关联，还是有些麻烦。按照功能进行模块化划分目录结构，应该要更为合理一些：

cart/
- CartModel.js
- CartService.js
common/
- directives.js
- filters.js
product/
- search/
  - SearchResultsController.js
  - SearchResultsModel.js
- ProductDetailController.js
- ProductModel.js
- ProductService.js
user/
- LoginController.js
- RegistrationController.js
- UserModel.js
- UserService.js

这样也是适合 RequireJS 等模块加载器的自然直观的代码组织方式

4.类似于3进行模块化，不过这里每个模块都是一个独立的个体

--app 
   |--thirdParty
   |   |--moduleA
   |   |    |--js
   |   |    |--css
   |   |    |--lib
   |   |    |--subModuleC
   |   |
   |   |--moduleB
   |   
   |--system
   |   |--moduleC

不要说蛋疼，不要说“这在页面上加载脚本的时候还得一个一个去找js和css的位置”。如果你用grunt之类的工具的话应该知道这根本不是问题。这样划分的好处在于，几乎任何一个文件夹都是一个完整的模块，你可以随便拷贝到任何地方去测试什么，或者在其他简单环境开发好了再丢到系统目录下。system和thirdParty这两个目录的划分是用来区分通用模块和业务逻辑模块的。其实这就是典型的服务器端框架目录划分。不过实际应用中，这样目录结构还是有问题。特别是当你使用less的时候，如果你的less文件依赖thirdParty中的less库，那你在测试的时候就不得不保持住这个相同的目录结构。
解决方法是将thirdPatry放在system里。如果你的模块不多，也可以把模块平行放置。

与按照类型划分文件不同，取而代之的，我们可以按照特性划分文件：

 
          app/ 
         
          app.js 
         
          Feed/ 
         
          _feed.html 
         
          FeedController.js 
         
          FeedEntryDirective.js 
         
          FeedService.js 
         
          Login/ 
         
          _login.html 
         
          LoginController.js 
         
          LoginService.js 
         
          Shared/ 
         
          CapatalizeFilter.js

这种目录结构使得我们能够更容易地找到与某个特性相关的所有文件，继而加快我们的开发进度。尽管将.html和.js文件置于一处可能存在争议，但节省下来的时间更有价值。

app.js依赖注入Ctrl,Dtve,Service.同一功能模块下的Ctrl放置在一个文件中，不同的Ctrl文件模块名称取相同的名称.

app.js中完成路由的设置

文件目录结构

app/                        
    common/                     -->通用模块文件夹
        controllers/            -->控制器文件夹
            menu.js             -->主菜单控制器
        directives/             -->指令文件夹
            action.js           -->用于应用中定义链接的指令
        services/               -->服务文件夹
            acl.js              -->授权服务代码
            action.js           -->用于提供给action指令使用的认证服务
            auth.js             -->认证服务代码
        init.js                 -->模块的初始化文件
    css/                        -->项目的样式文件夹
    img/                        -->项目的图片文件夹
    lib/                        -->项目使用的第三方js库文件夹，包含requireJS，angularJS等
    modules/                    -->业务模块文件夹，里面按照每个模块一个独立的文件夹来存放
        publish/                
            controllers/        -->模块下的控制器文件夹
                dashboard.js    -->控制器代码文件
            templetes/          -->对应的视图文件夹
                dashboard.html  -->视图文件
            init.js             -->模块的初始化文件
            route.js            -->模块的路由配置文件
        ...
    utils/                      -->工具集合文件夹
        loader.js               -->用于加载模块的函数
        ...
    app.js                      -->应用主模块文件
    bootstrap.js                -->requireJS的配置及应用构建引导文件
    config.js                   -->应用的配置文件
    index.html                  -->应用的入口文件
mock/                           -->模拟后端服务

约定

每个模块(包含commom和modules下的每个文件夹)文件夹下，都应该包含init.js和route.js2个文件，前者是用来构造该模块，后者用来提供该模块的路由数据。

requirejs+angularjs+ui-route

【AngularJS】【二】项目目录结构

1.AngularJS官网seed目录结构

文件目录结构

约定

猜你喜欢