Angular 17+ 高级教程 – 目录
请按顺序阅读
关于本教程
初识 Angular
Get Started
Angular Compiler (AKA ngc) Quick View
Dependency Injection 依赖注入
Component 组件 の Angular Component vs Web Component
Component 组件 の Angular Component vs Custom Elements
里面会讲到
@Input, @Output
lifecycle hook: constructor, ngOnChanges, ngOnInit, ngAfterViewInit, ngOnDestroy
Component 组件 の Angular Component vs Shadow DOM (CSS Isolation & slot)
里面会讲到
ViewEncapsulation ShadowDom, Emulated, None
ng-content, ::ng-deep, ngProjectAs
Component 组件 の Template Binding Syntax
里面会讲到
{{ }}, [], (), [()], Signal-based Two-way Bidding
@HostBinding, @HostListener
Component 组件 の Attribute Directives 属性型指令
里面会讲到
Attribute Directives, ngStyle, ngClass, Directive composition API
Component 组件 の Pipe 管道
Change Detection & Ivy rendering engine
里面会讲到
TView, LView, TNode, RNode, Zone.js,
ChangeDetectionStrategy, markForCheck, ngDoCheck, ngZone.runOutsideAngular, ApplicationRef.tick, detectChanges, refreshView, AsyncPipe,
ɵprovideZonelessChangeDetection
Component 组件 の Dependency Injection & NodeInjector
里面会讲到
NodeInjector, Component Injector Tree, bootstrapApplication 源码解析, hostView,
inject 查找过程 & 源码解析, Bloom Filter, viewProviders & host, EnvironmentInjector, EnvironmentProviders, makeEnvironmentProviders
Component 组件 の Lifecycle Hooks
里面会讲到
constructor, OnInit, AfterContentInit, AfterViewInit, OnChanges, DoCheck, AfterContentChecked, AfterViewChecked,
afterNextRender, afterRender, APP_INITIALIZER, APP_BOOTSTRAP_LISTENER
Component 组件 の Query Elements
里面会讲到
@ViewChild, @ViewChildren, @ContentChild, @ContentChildren, Template Variables, exportAs
Component 组件 の Dynamic Component 动态组件
里面会讲到
createComponent, <ng-container />, ViewContainerRef, EnvironmentInjector, ComponentRef,
LContainer, ViewRef, reflectComponentType, ngOnDestroy, DestroyRef, Dynamic Directive Composition API
Signals
里面会讲到
signal, computed, effect, toSignal, toObservable,
Signal-based Input, Signal-based Output, Signal-based Query
WritableSignal, Signal, SignalNode, ComputedNode, ReactiveLViewConsumer, ReactiveNode, setActiveConsumer
EffectRef, EffectHandle, Watch, WatchNode, ZoneAwareEffectScheduler
markAncestorsForTraversal
Component 组件 の ng-template
里面会讲到
ng-template, TemplateRef, Template Context, Template Context Type Guard, $implicit,
Embedded View Injector
Component 组件 の Structural Directive (结构型指令) & Syntax Reference (微语法)
里面会讲到
NgTemplateOutlet, NgComponentOutlet, NgIf, NgFor, NgSwitch, 微语法
Component 组件 の Control Flow
里面会讲到
@if, @else if, @else,
@for, @empty,
@switch, @case, @default
@defer @placeholder @loading @error
NgModule
里面会讲到
createNgModule, NgModuleRef
HttpClient
里面会讲到
HttpClient, HttpRequest, HttpHeaders, HttpParams, HttpResponse, HttpEvent, HttpInterceptor, HttpContext
Animation 动画
里面会讲到
AnimationBuilder, AnimationPlayer, animate, style, keyframes, group, sequence, query, stagger, animation, useAnimation,
trigger, state, transition
[@trigger], [@.disabled], (@trigger.start), (@trigger.done), animateChild
Reactive Forms (完成度...74%)
里面会讲到
FormControl, FormControlDirective, DefaultValueAccessor, ControlValueAccessor,
FormGroup, UntypedFormControl, FormRecord, UntypedFormGroup
Routing 路由 (原理篇) (完成度...70%)
里面会讲到
UrlTree, SegmentGroup, Segment, Matrix Parameters, Route, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, RouterState,
OutletContext, PlatformLocation, LocationStrategy, Location, UrlSerializer, StateManager, NavigationTransitions,
ViewportScroller, RouterScroller, Router
Routing 路由 (功能篇) (完成度...1%)
里面会讲到
EventManagerPlugin & Hammer.js Gesture
Library
Prettier, ESLint, Stylelint
学以致用
里面会讲到
ngForTemplate
盘点 Angular v14 到 v17 的重大改变
里面会讲到
Standalone Component
inject, input, output, viewChildren, contentChildren
Zoneless Change Detection
Signal
Control Flow
Angular Material 教程：
Get Started
Custom Themes for Material Design 2 (自定义主题 Material 2)
Custom Themes for Material Design 3 (自定义主题 Material 3)
CDK Portal
里面会讲到
TemplatePortal, ComponentPortal, DomPortal, CdkPortal,
CdkPortalOutlet, DomPortalOutlet
CDK Layout の Breakpoints
CDK Scrolling
里面会讲到
CdkScrollable, ScrollDispatcher, ViewportRuler, Virtual Scrolling
Material Icon
Material Ripple
CDK Accessibility の Focus
里面会讲到
FocusMonitor, InteractivityChecker, FocusTrap
CDK Accessibility の ListKeyManager
里面会讲到
ListKeyManager, ActiveDescendantKeyManager, FocusKeyManager
CDK Overlay
里面会讲到
Overlay, OverlayRef, Scroll Strategy, Position Strategy
Observers
里面会讲到
ContentObserver, CdkObserveContent
其它小教程：
Angular CLI
Angular Configuration (angular.json)
Naming Conversion
大杂烩
里面会讲到
Angular 废弃的 API,
Using Tailwind CSS with Angular,
DomSanitizer
Renderer2 和 inject(DOCUMENT)
PLATFORM_ID, isPlatformBrowser, isPlatformServer
Angular 的 Limitation 和 Github Issues
里面会讲到
Angular 不支持 Custom @Decorator
Angular 不支持 PostCSS Configuration
Angular 不支持 Static Image Hash
@Directive 指令不支持 CSS
Angular 的 Limitation の Query Elements
里面会讲到
不支持 viewChildren descendants
不支持 viewChildren <ng-container /> 和 <ng-content>
