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