运维开发前端转型之路—angular@林香鑫.pdf

运维开发前端转型之道 ——Angularjs ⺴易互动娱乐事业群在线游戏事业部 运维开发⼯程师林⾹鑫 2015-10-24 1024 繁杂的业务 • 系统繁多 • 架构不同 • 重复性⾼ • 效率第⼀ Why Angular • MVVM • 双向绑定 • 依赖注⼊ • 指令 Why Angular • DOM不是第⼀优先级 • 声明式编程 • CRUD应⽤ • 效率 勤劳的管家 scope ⽣命周期 • 创建 • 链接 • 更新 • 销毁 双向绑定 scope是视图和控制器之间的⼀个通道 作⽤域树 实例HTML prototype指向 隔离的scope的prototype指向scope构造函数 ⾮隔离scope的prototype指向其parent scope 消息机制 • $on ：存储在$$listeners中 • $emit ：根据层级关系逐级往上传播 • $broadcast ：深度优先遍历 基于scope的层级关系决定消息的传播路径和范围 万能的匠师指令 指令 • 指令是什么 指令 • 指令定义 指令 • 指令运⾏ • compile • preLink • postLink 钟点⼯ service • 依赖注⼊ • ⽤途：提供服务、配置服务 • 种类：provider/factory/service/value/constant • 服务缓存：providerCache、instanceCache 靠谱的路标 ui-router • router vs ui-router • nested-view multi-view 模块 • 可重⽤性 • 按需引⼊ • 定义顺序不受限制 转型之路 ⺫录结构 • 按职能 • 按模块 组件化 • 功能性组件 • 业务性组件 按照⽇常需求构建组件库，⼀处开发，到处使⽤ 模块化 模块化的⺫的是可以随意组装系统 数据池化 • 数据可视化 • REST $resource ⾃助化 • 模块化的延伸 • 代码作为资源 • 声明式 部署⾃动化 前端⽅案 THANKS