回顾：angular 1.x 项目总结

当年第一个项目使用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

问题

开发中还是遇到了很多问题的:

1. 一个页面通过多个html使用ng-includes层层嵌套, 看似可复用, 实际上没有 webpack.gulp 等支持, 会产生大量零件碎片, 严重拖慢加载速度
2. 组件组织方式均写到 directives, 并且内部耦合太重, 稍微的功能不符合, 便需要重新写一个类似的
3. config 文件存在大量的重复代码, 影响代码重复率检测
4. 没有全局数据流管理, 两个控制器通信过分依赖 baseController 顶层, 导致 baseController 本为公共, 却写了大量 if else 特殊判断
5. 类似弹窗这种组件, 不是一对多的, 而是重复写了非常多遍, 导致加载特慢

解决?

• 第一个问题, 后续不再使用 html 拼接的形式, 而是将模板写到一个 view.html 中
• 增加按需加载组件, 而不是上来就把 directives 全定义一遍
• 将弹窗改写为共用的容器
• 引入 gulp 对代码进行压缩混淆, 但是 angular 的依赖注入有很多坑, 需要特殊的插件处理

结果

经过一番折腾后, 性能稍微有些提升, 但是总体还是不理想
最后的解决方法是重构
既然要重构, 干脆直接抛弃了 angular 1, 转而投向了 vue 全家桶

通信方式

• $emit() , $broadcast()
• angular.element().scope()
• $parent , $childHead
• 公用 service