运维开发前端转型之道 ——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