当年第一个项目使用angular 1.46
做的,在这里记录一下, 免得忘了
结构
- common
- appConfig // 处理自定义路由格式
- stateConfig // 与SEP平台对接, 中间件控制器 -> 前端路由
- menuConfig.js // 菜单配置
- config
- quality-analysis
- config.js
- view.html
- health
- service-warning
- ...
- ...
- // 所有业务(页面)目录
- router
- routerConfig.js // 路由
- controller
- indexController.js
- baseController.js
- views
- documents // 帮助文档(每个页面的)
- templates
- layouts // 页面布局
- subLayouts // 子布局
- directives
- comCharts001.js
- comCharts002.js
- comTable001.js
- ...
- ...
- // 所有组件
- services
- httpService.js // 请求模块
- layoutService.js // 处理模板
- componentService.js // 处理组件
- dataService.js // 处理数据源
- excelService.js // 处理前端生成excel
- ...
- ...
- ...
- themes
- css
- lib
- angular-ui-router.js // 路由
- tinyui // 集成了angular / 以及UI组件
- require.js
- assets
- images
- svgs
- main.js // 入口
- app.js
- index.html // 入口
流程
=> index.html
=> main.js
-> 全局变量
-> 鉴权 / 获取地图数据
-> angular.brootstrap() 挂载元素
=> app.js
-> app = angular.mudule() 定义主模块
-> app.services() 定义services
-> app.filter() 定义过滤器
-> app.controller(index) 定义主控制器
=> appConfig.js
-> 将 routerConfig 中的路由配置处理为angular-ui-router格式
-> 引入菜单
=> 打开某路由
=> baseController.js
-> 读取config文件夹中的业务配置
-> 定义顶层事件分发, 监听所有子级控制器的消息传播, 并转发
-> 通过 layoutService.js ,componentService.js , dataService.js // 分别处理布局/组件/数据源, 生成页面控制器
-> 定义includes字段以引入公共模板
=> config文件夹
-> 页面生成通过ng-includes
问题
开发中还是遇到了很多问题的:
- 一个页面通过多个
html
使用ng-includes
层层嵌套, 看似可复用, 实际上没有webpack.gulp等支持, 会产生大量零件碎片, 严重拖慢加载速度 - 组件组织方式均写到directives, 并且内部耦合太重, 稍微的功能不符合, 便需要重新写一个类似的
- config文件存在大量的重复代码, 影响代码重复率检测
- 没有全局数据流管理, 两个控制器通信过分依赖baseController顶层, 导致baseController本为公共, 却写了大量if else特殊判断
- 类似弹窗这种组件, 不是一对多的, 而是重复写了非常多遍, 导致加载特慢
解决?
- 第一个问题, 后续不再使用html拼接的形式, 而是将模板写到一个view.html中
- 增加按需加载组件, 而不是上来就把directives全定义一遍
- 将弹窗改写为共用的容器
- 引入gulp对代码进行压缩混淆, 但是angular的依赖注入有很多坑, 需要特殊的插件处理
结果
经过一番折腾后, 性能稍微有些提升, 但是总体还是不理想
最后的解决方法是重构
既然要重构, 干脆直接抛弃了 angular 1, 转而投向了 vue 全家桶