2018-08-19

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-）

• 表单校验

• 内置校验器

• 自定义检验器

• 表单状态

• 表单指令

内置元素标签

路由

路由指令

路由策略

• 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