# Angular 2 技能图谱
## 模块
### 自定义模块
- 根模块
- 特性模块
- 共享模块
- 核心模块
### 内置模块
- ApplicationModule 模块
- CommonModule 模块
- BrowserModule 模块
- FormsModule 模块
- ReactiveFormsModule 模块
- RouterModule 模块
- HttpModule 模块
### 元数据
- providers
- declarations
- imports
- exports
- bootstrap
- id
- schemas
- entryComponents
## 指令
### 组件
### 结构指令
- 改变 DOM 树的结构，如 NgIf
### 属性指令
- 改变元素的外观和行为，如 NgStyle
### 生命周期钩子
- OnInit
- OnChanges
- DoCheck
- OnDestroy
### 内置指令
- 通用指令
* NgClass
* NgStyle
* NgIf
* NgSwitch
* NgFor
* NgTemplateOutLet
* NgPlural
- 表单指令
* FormsModule 模块
+ NgForm
+ NgModelGroup
+ NgModel
+ InternalFormsSharedModule 模块
* ReactiveFormsModule 模块
+ FormControlDirective
+ FormGroupDirective
+ FormControlName
+ FormGroupName
+ FormArrayName
+ InternalFormsSharedModule 模块
* InternalFormsSharedModule 模块
+ 表单元素访问器指令
+ 表单选择框选项指令
+ 表单验证指令
+ 控件状态指令
- 路由指令
* RouterLink
+ RouterLinkWithHref（a[routerLink]）
+ RouterLink（:not(a)[routerLink]）
* RouterLinkActive
* RouterOutlet
### 自定义指令
## 组件
### 元数据
- selector
- moduleId
- inputs
- outputs
- host
- exportAs
- providers
- viewProviders
- changeDetection
- queries
- entryComponents
- templateUrl
- template
- encapsulation
- styles
- styleUrls
- animations
- interpolation
### 生命周期钩子
- OnChanges
- OnInit
- DoCheck
- AfterContentInit
- AfterContentChecked
- AfterViewInit
- AfterViewChecked
- OnDestroy
### 模板
## 模板
### 表达式操作符
- 管道（|）
* 内置管道
* 自定义管道
* 纯管道
* 非纯管道
- 安全导航（?.）
### 数据绑定
- 属性绑定 - []
* 插值 - {{}}
* Property 绑定
* Attribute、 class 与 style 绑定
- 事件绑定 - ()
- 双向绑定 - [()]
### 表单
- 模板局部变量（# 或 ref-）
- 表单校验
* 内置校验器
* 自定义检验器
- 表单状态
- 表单指令
### 内置元素标签
- <ng-container>
- <ng-content>
## 路由
### 路由指令
### 路由策略
- PathLocationStrategy
- HashLocationStrategy
- PreloadingStrategy
* PreloadAllModules
* NoPreloading（默认）
* 自定义预加载策略
### 路由拦截
- CanActivate（激活拦截）
- CanActivateChild（激活子路由配置项）
- CanDeactivate（反激活拦截）
- CanLoad（模块加载拦截）
- Resolve（数据预加载拦截）
### 路由跳转
- 指令跳转
* RouterLink
- 代码跳转
* navigateByUrl()
* navigate()
### 路由状态
- ActivatedRouteSnapshot
- RouterStateSnapshot
## 依赖注入
### 注入器（树）
### Provider
- 类 Provider（useClass）
- 值 Provider（useValue）
- 别名 Provider （useExisting）
- 工厂 Provider（useFactory）
### forwardRef()
### 可选依赖 - @Optional
## 服务
### 内置服务
- JsonpModule 模块
* Jsonp
* BrowserJsonp
* RequestOptions
* ResponseOptions
* JSONPBackend
- HttpModule 模块
* HTTP
* BrowserXhr
* XHRBackend
* XSRFStrategy
* RequestOptions
* ResponseOptions
### 自定义服务
## RxJS
### Observable
### Observer
### Subscription
### Subject
### operators
- 创建操作符
- 转化操作符
- 过滤操作符
- 组合操作符
- 错误处理操作符
- 工具操作符
- 条件操作符
### Scheduler
## 装饰器
### 类装饰器
- @Component
- @Directive
- @Pipe
- @Injectable
- @NgModule
### 属性装饰器
- @Input
- @Output
- @HostBinding
- @HostListener
- @ContentChild
- @ContentChildren
- @ViewChild
- @ViewChildren
### 参数装饰器
- @Inject
- @Optional
- @Self
- @SkipSelf
- @Host
- @Attribute
## 动画
- AnimationKeyframe
- AnimationPlayer
- AnimationSequencePlayer
- AnimationGroupPlayer
- AnimationQueue
- AnimationTransition
- AnimationTransitionEvent
## 变化检测
### Zone.js
- ngZone
* onUnstable
* onMicrotaskEmpty
* onStable
* onError
### 异步操作
- 用户事件：Click/Change...
- 通信：XHR/WebSocket
- 定时任务：setTimeout/requestAnimationFrame
### ChangeDetectorRef
## 测试
### 单元测试
- Jasmine 测试框架
- Karma 管理工具
### 端到端测试
- Protractor
- Benchpress
### 内置工具集
- TestBed
- inject
- ComponentFixture
- fakeAsync
- flushMicrotasks
- tick
- discardPeriodicTasks
## 升级
- UpgradeAdapter
- UpgradeAdapterRef
## 模板编译器
- 动态 - JIT
- 静态 - AoT
+ ngc
## 调试
- Augury
- 断点调试
## 质量检查工具
- TSLint
- Codelyzer
## 构建工具
- webpack
- Gulp
- RollUp
- System.js
## 编码工具
- VS Code
- WebStorm
- Atom
- Sublime Text
- Vim
## 开发语言
- TypeScript
- ES6 / ES5
- Dart
## 周边生态圈
- Angular Material 2
- Universal
- Angular-CLI
- Ionic 2
- NativeScript
- Angular Mobile Toolkit
- AngularFire 2
- Angular Electron