Angular 2 技能图谱

优质
小牛编辑
139浏览
2023-12-01

模块

自定义模块

  • 根模块

  • 特性模块

  • 共享模块

  • 核心模块

内置模块

  • 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