概览

此angular.js架构是我在开发一个web端的后台管理系统时，学习了[johnpapa/angular-styleguide]的架构后，在实践中经过些许小调整后总结出的心得。此项目是一个单面应用，整体架构如下所示：

angualr.js架构总体上分为三个部分：app功能模块，app通用模块，跨app通用模块。

• app.module.js: 根模块。
• /blocks：跨app的通用模块。如 blocks.exception, blocks.logger。
• /core /widgets /utils：此app的通用的模块。
• /features：app的功能模块。

app.module.js

app.module.js 是angular.js目录下的根文件，它是整个项目中的根模块，包含着整个项目使用到的其他模块。这个文件的内容通常是声明一个模块并添加它的依赖，例如：

如果是单页应用，通常根目录下只放app.module.js文件，如上面所示；如果是多页应用，根目录下可以放置多个文件，对应多个页面。

Blocks

/blocks 目录的作用是存放跨aqq的模块。也就是说blocks下面的模块非常接近第三方库，可以轻易的在多个项目中使用。比如，我的/blocks目录下有一个cc-widget模块，其中有accordion、file-input、modal等模块，这些模块通用性很强，甚至可以直接封装成第三方库。

Core | Utils | Widgets

/core、/utils、/widgets这三个模块是项目中的通用模块。

• /core 主要是存放配置和一些服务，比如：
  • route.config.js: 页面切换的路由配置
  • route.service.js: 页面切换时的权限鉴定服务
  • http.config.js: http模块配置，如http request header配置
  • http-exception.service.js: http异常处理服务
  • authentication.service.js: 权限相关接口
  • core.constant.js: 存放数据常量
  • core.run.js: app启动代码，进行一些必要的项目初始化
• /utils 存放工具型接口的模块，比如：
  • qiniu.service.js: 七牛sdk代码
  • md5.service.js: md5接口
• /widgets 存放组件，比如：
  • img-cropper.component.js: 图片裁剪组件
  • datepicker-group.component.js: 时间范围选择组件
  • nav-menu.component.js: 菜单栏组件
  • dialog.service.js: 对话框接口

Features

/features 目录存放具体的功能或者业务，比如：
* /home
* /login
* /dashboard
* /wallet # 钱包
* /orders # 订单

总结

架构的主要目的是分层，每一层下再分模块，这样代码结构清晰，当上层业务出现可重用代码时，可以抽象出来往下层存放，就可以保持高质量，高可维护性的代码。

例子

这里有一个例子，使用了上述的angular.js架构：qw8880000/angularjs-sample