Angular 20+ 高阶教程 – 目录
<h2>请按顺序阅读</h2><p> </p>
<h3>关于本教程</h3>
<p> </p>
<h3>初识 Angular</h3>
<p>里面会讲到</p>
<p>Angular Versioning</p>
<p> </p>
<h3>Get Started</h3>
<p> </p>
<h3>Angular Compiler (AKA ngc) Quick View</h3>
<p> </p>
<h3>Dependency Injection 依赖注入 (必读)</h3>
<p>里面会讲到</p>
<p>Injector, @Injectable()</p>
<p>StaticClassProvider, FactoryProvider, ValueProvider, ExistingProvider, InjectionToken</p>
<p>inject, runInInjectionContext</p>
<p>R3Injector, DestroyRef</p>
<p> </p>
<h3>Signals (必读)</h3>
<p>里面会讲到 </p>
<p>signal, createSignalTuple, computed</p>
<p>WritableSignal, Signal, SignalNode, ComputedNode, ReactiveNode, setActiveConsumer</p>
<p>linkedSignal, LinkedSignalNode</p>
<p>effect, ChangeDetectionScheduler, EffectScheduler, untracked, EffectRef, EffectNode</p>
<p>resource, ResourceImpl</p>
<p>toSignal, toObservable, rxResource</p>
<p>immer</p>
<p> </p>
<h3>Component 组件 の Angular Component vs Web Component</h3>
<p> </p>
<h3>Component 组件 の Angular Component vs Custom Elements</h3>
<p>里面会讲到 </p>
<p>@Input, @Output</p>
<p>lifecycle hook: constructor, ngOnChanges, ngOnInit, ngAfterViewInit, ngOnDestroy</p>
<p> </p>
<h3>Component 组件 の Angular Component vs Shadow DOM (CSS Isolation & slot)</h3>
<p>里面会讲到</p>
<p>ViewEncapsulation ShadowDom, Emulated, None</p>
<p>ng-content, ::ng-deep, ngProjectAs</p>
<p> </p>
<h3>Component 组件 の Template Binding Syntax</h3>
<p>里面会讲到</p>
<p>{{ }}, [], (), [()], Signal-based Two-way Bidding</p>
<p>@HostBinding, @HostListener</p>
<p> </p>
<h3>Component 组件 の Attribute Directives 属性型指令</h3>
<p>里面会讲到 </p>
<p>Attribute Directives, ngStyle, ngClass, Directive composition API</p>
<p> </p>
<h3>Component 组件 の Pipe 管道</h3>
<p> </p>
<h3>Change Detection & Ivy rendering engine (必读)</h3>
<p>里面会讲到</p>
<p>TView, LView, TNode, RNode, Zone.js,</p>
<p>ChangeDetectionStrategy, markForCheck, ngDoCheck, ngZone.runOutsideAngular, ApplicationRef.tick, detectChanges, refreshView, AsyncPipe,</p>
<p>provideExperimentalZonelessChangeDetection</p>
<p> </p>
<h3>Component 组件 の Dependency Injection & NodeInjector (必读)</h3>
<p>里面会讲到</p>
<p>NodeInjector, Component Injector Tree, bootstrapApplication 源码解析, hostView, </p>
<p>inject 查找过程 & 源码解析, Bloom Filter, viewProviders & host, EnvironmentInjector, EnvironmentProviders, makeEnvironmentProviders,</p>
<p>HostAttributeToken, HOST_TAG_NAME </p>
<p> </p>
<h3>Component 组件 の Lifecycle Hooks (必读)</h3>
<p>里面会讲到</p>
<p>constructor, OnInit, AfterContentInit, AfterViewInit, OnChanges, DoCheck, AfterContentChecked, AfterViewChecked,</p>
<p>afterNextRender, afterRender, APP_INITIALIZER, APP_BOOTSTRAP_LISTENER</p>
<p> </p>
<h3>Component 组件 の Query Elements (必读)</h3>
<p>里面会讲到</p>
<p>@ViewChild, @ViewChildren, @ContentChild, @ContentChildren, Template Variables, exportAs</p>
<p> </p>
<h3>Component 组件 の Dynamic Component 动态组件 (必读)</h3>
<p>里面会讲到</p>
<p>createComponent, <ng-container />, ViewContainerRef, EnvironmentInjector, ComponentRef, </p>
<p>LContainer, ViewRef, reflectComponentType, ngOnDestroy, DestroyRef, Dynamic Directive Composition API</p>
<p> </p>
<h3>Component 组件 の ng-template (必读)</h3>
<p>里面会讲到</p>
<p>ng-template, TemplateRef, Template Context, Template Context Type Guard, $implicit, </p>
<p>Embedded View Injector</p>
<p> </p>
<h3><strong>Component 组件 の Structural Directive (结构型指令) & Syntax Reference (微语法)<br></strong></h3>
<p>里面会讲到</p>
<p>NgTemplateOutlet, NgComponentOutlet, NgIf, NgFor, NgSwitch, 微语法</p>
<p> </p>
<h3><strong>Component 组件 の Control Flow</strong></h3>
<p>里面会讲到</p>
<p>@if, @else if, @else,</p>
<p>当 @if 遇上 <ng-content>,</p>
<p>逛 <ng-content> 源码,</p>
<p>@for, @empty,</p>
<p>@switch, @case, @default</p>
<p>@defer @placeholder @loading @error</p>
<p> </p>
<h3>Component 组件 の @let Template Local Variables</h3>
<p>里面会讲到</p>
<p>@let</p>
<p> </p>
<h3><strong>NgModule</strong> (必读)</h3>
<p>里面会讲到</p>
<p>createNgModule, NgModuleRef</p>
<p> </p>
<h3><strong>HttpClient</strong></h3>
<p>里面会讲到</p>
<p>HttpClient, HttpRequest, HttpHeaders, HttpParams, HttpResponse, HttpEvent, HttpInterceptor, HttpContext, withFetch, withRequestsMadeViaParent</p>
<p> </p>
<h3><strong>Animation 动画<br></strong></h3>
<p>里面会讲到</p>
<p>AnimationBuilder, AnimationPlayer, animate, style, keyframes, group, sequence, query, stagger, animation, useAnimation, </p>
<p>trigger, state, transition</p>
<p>[@trigger], [@.disabled], (@trigger.start), (@trigger.done), animateChild</p>
<p> </p>
<h3><strong>Reactive Forms</strong></h3>
<p>里面会讲到</p>
<p>FormControl, FormControlDirective, DefaultValueAccessor, ControlValueAccessor, </p>
<p>FormGroup, UntypedFormControl, FormRecord, UntypedFormGroup, FormGroupDirective</p>
<p>FormArray, ControlEvent, FormBuilder</p>
<p> </p>
<h3><strong>Routing 路由 (原理篇)</strong> (完成度...70%)</h3>
<p>里面会讲到</p>
<p>UrlTree, SegmentGroup, Segment, Matrix Parameters, Route, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, RouterState,</p>
<p>OutletContext, PlatformLocation, LocationStrategy, Location, UrlSerializer, StateManager, NavigationTransitions,</p>
<p>ViewportScroller, RouterScroller, Router</p>
<p> </p>
<h3><strong>Routing 路由 (功能篇) (完成度...1%)</strong></h3>
<p>里面会讲到</p>
<p>Routes, <router-outlet />, 404 not found, redirect, </p>
<p>RouterLink, queryParamsHandling,</p>
<p>withComponentInputBinding, ActivateRoute, params, queryParams,</p>
<p>lazy-loading, preloading,</p>
<p>LocationStrategy, withInMemoryScrolling</p>
<p> </p>
<h3>EventManagerPlugin & Hammer.js Gesture</h3>
<p> </p>
<h3>Library</h3>
<p> </p>
<h3>Prettier, ESLint, Stylelint</h3>
<p> </p>
<h3>学以致用</h3>
<p>里面会讲到</p>
<p>ngForTemplate</p>
<p> </p>
<h3>盘点 Angular v14 到 v19 的重大改变</h3>
<p>里面会讲到</p>
<p>Standalone Component</p>
<p>inject, input, output, viewChildren, contentChildren</p>
<p>Zoneless Change Detection</p>
<p>Signal</p>
<p>Control Flow</p>
<p> </p>
<h3>Coding Style Guide 编码风格</h3>
<p> </p>
<h3>Memory leak, unsubscribe, onDestroy</h3>
<p> </p>
<h3>国际化 Internationalization i18n</h3>
<p>里面会讲到</p>
<p>ICU expressions, $localize, LOCALE_ID, registerLocaleData</p>
<p> </p>
<h3>Angular 19 功能介绍</h3>
<p>里面会讲到</p>
<p>provideAppInitializer, effect execution timing, afterRenderEffect, linkedSignal, Resource API, rxResource, HttpResource</p>
<p> </p>
<h3><strong>大杂烩</strong></h3>
<p>里面会讲到</p>
<p>Angular 废弃的 API,</p>
<p>Using Tailwind CSS with Angular, </p>
<p>DomSanitizer</p>
<p>Renderer2 和 inject(DOCUMENT)</p>
<p>Dynamic Add Event Listener (Renderer2.listen)</p>
<p>PLATFORM_ID, isPlatformBrowser, isPlatformServer</p>
<p>forwardRef</p>
<p>enviroment.ts, isDevMode, ngDevMode</p>
<p>Component Inheritance 组件继承</p>
<p> </p>
<h2>Angular Material 教程：</h2>
<h3>Get Started<br></h3>
<p> </p>
<h3>Custom Themes for Material Design 2 (自定义主题 Material 2)</h3>
<p> </p>
<h3>Custom Themes for Material Design 3 (自定义主题 Material 3)</h3>
<p> </p>
<h3>CDK Portal</h3>
<p>里面会讲到</p>
<p>TemplatePortal, ComponentPortal, DomPortal, CdkPortal,</p>
<p>CdkPortalOutlet, DomPortalOutlet</p>
<p> </p>
<h3>CDK Layout の Breakpoints</h3>
<p> </p>
<h3>CDK Scrolling</h3>
<p>里面会讲到</p>
<p>CdkScrollable, ScrollDispatcher, ViewportRuler, Virtual Scrolling,</p>
<p>DataSource</p>
<p> </p>
<h3>Material Icon</h3>
<p> </p>
<h3>Material Ripple</h3>
<p> </p>
<h3>CDK Accessibility の Focus</h3>
<p>里面会讲到</p>
<p>FocusMonitor, InteractivityChecker, FocusTrap, Strong focus indicators</p>
<p> </p>
<h3>CDK Accessibility の ListKeyManager</h3>
<p>里面会讲到</p>
<p>ListKeyManager, ActiveDescendantKeyManager, FocusKeyManager</p>
<p> </p>
<h3>CDK Overlay</h3>
<p>里面会讲到</p>
<p>Overlay, OverlayRef, Scroll Strategy, Position Strategy</p>
<p> </p>
<h3>CDK Observers</h3>
<p>里面会讲到</p>
<p>ContentObserver, CdkObserveContent</p>
<p> </p>
<h3>Material Tooltip</h3>
<p> </p>
<h3>CDK Table</h3>
<p> </p>
<h3>CDK Drag and Drop</h3>
<p> </p>
<h3>Material Form Field</h3>
<p>里面会讲到</p>
<p>CdkTextareaAutosize</p>
<p> </p>
<h3>Datepicker</h3>
<p>里面会讲到</p>
<p>DateAdapter, Calendar 组件</p>
<p> </p>
<h3><strong>大杂烩</strong></h3>
<p>里面会讲到</p>
<p>Override Material Icon Button Size</p>
<p>Override Material Button Color</p>
<p>Override Material Checkbox align-items</p>
<p>Override Material Form Field Styles</p>
<p>Override Material Snackbar Styles</p>
<p>SelectionModel</p>
<p>Interactive disabled buttons</p>
<p>CDK Clipboard</p>
<p> </p>
<p> </p>
<h2>其它小教程：</h2>
<h3>Angular CLI</h3>
<p> </p>
<h3>Angular Configuration (angular.json)</h3>
<p> </p>
<h3>Naming Conversion</h3>
<p> </p>
<h3><strong>Angular 的 Limitation 和 Github Issues</strong></h3>
<p><strong>里面会讲到</strong></p>
<p>Angular 不支持 Custom @Decorator</p>
<p>Angular 不支持 PostCSS Configuration</p>
<p>Angular 不支持 Static Image Hash</p>
<p>@Directive 指令不支持 CSS</p>
<p>无能的 Reactive Forms</p>
<p>Angular + CSS 4 = 💩</p>
<p>Passing undefined to @Input !== optional @Input</p>
<p>Angular 不支持 AddEventListenerOptions (capture, once, passive) </p>
<p> </p>
<h3>Angular 的 Limitation の Query Elements</h3>
<p>里面会讲到</p>
<p>不支持 viewChildren descendants</p>
<p>不支持 viewChildren <ng-container /> 和 <ng-content></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/keatkeat/p/16965779.html
頁:
[1]