Angular 18+ 高级教程 – 目录
请按顺序阅读
关于本教程
初识 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,
provideExperimentalZonelessChangeDetection
Component 组件 の Dependency Injection & NodeInjector (必读)
里面会讲到
NodeInjector, Component Injector Tree, bootstrapApplication 源码解析, hostView,
inject 查找过程 & 源码解析, Bloom Filter, viewProviders & host, EnvironmentInjector, EnvironmentProviders, makeEnvironmentProviders,
HostAttributeToken, HOST_TAG_NAME
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
InputSignalNode, applyValueToInputSignal
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,
当 @if 遇上 <ng-content>
@for, @empty,
@switch, @case, @default
@defer @placeholder @loading @error
Component 组件 の @let Template Local Variables
里面会讲到
@let
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
ControlEvent
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 到 v18 的重大改变
里面会讲到
Standalone Component
inject, input, output, viewChildren, contentChildren
Zoneless Change Detection
Signal
Control Flow
Coding Style Guide 编码风格
Memory leak, unsubscribe, onDestroy
大杂烩
里面会讲到
Angular 废弃的 API,
Using Tailwind CSS with Angular,
DomSanitizer
Renderer2 和 inject(DOCUMENT)
Dynamic Add Event Listener (Renderer2.listen)
PLATFORM_ID, isPlatformBrowser, isPlatformServer
forwardRef
enviroment.ts, isDevMode, ngDevMode
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,
DataSource
Material Icon
Material Ripple
CDK Accessibility の Focus
里面会讲到
FocusMonitor, InteractivityChecker, FocusTrap
CDK Accessibility の ListKeyManager
里面会讲到
ListKeyManager, ActiveDescendantKeyManager, FocusKeyManager
CDK Overlay
里面会讲到
Overlay, OverlayRef, Scroll Strategy, Position Strategy
CDK Observers
里面会讲到
ContentObserver, CdkObserveContent
Material Tooltip
CDK Table
CDK Drag and Drop
Material Form Field
大杂烩
里面会讲到
Override Material Icon Button Size
Override Material Checkbox align-items
Override Material Form Field Styles
Override Material Snackbar Styles
其它小教程：
Angular CLI
Angular Configuration (angular.json)
Naming Conversion
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>
