这里本该有简介

angualr.js 架构

概览

此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模块,其中有accordionfile-inputmodal等模块,这些模块通用性很强,甚至可以直接封装成第三方库。

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