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