基 Forms & Search · 入力
0/3 Reactive patterns for user input: search, autosave, double-submit protection.
● Typeahead — search with suggestions ● Autosave — saving the form in the background ● Submit protection — guarding against double submission 操 HTTP & Loading · 通信
0/4 Network scenarios: parallel uploads, retry strategies, response caching.
● Parallel uploads — parallel loading with a limit ● Retry with backoff — resilience to failures ● Cache — shareReplay for shared responses ● Polling — refreshing data periodically Managing subscriptions and stream teardown at the component level.
● Cancel on destroy — takeUntil(destroy$) ● Idle auto-logout — logging out on inactivity DOM events and user gestures through stream composition.
● Drag handler — mouseDown → mouseMove → mouseUp Advanced form scenarios: async validation, dependent fields, diff, undo/redo, drafts, submit queues, and view models.
● Async validation — checking username/email ● Dependent controls — cascading form fields ● Dirty diff — send only the changed fields ● Undo/redo — a history of form changes ● Local draft restore — saving a draft locally ● Submit queue — submissions strictly in order ● Form VM — canSubmit/errors/preview in one stream Routing streams: URL params, query filters, a navigation spinner, analytics, and a dirty guard.
● Route param load — loading by id from the URL ● Query params filters — the URL as filter state ● Router spinner — a global navigation loader ● Router analytics — page transitions ● Dirty leave confirm — confirming before leaving a page 極 HTTP Advanced · 通信+
0/12 Complex network patterns: request chains, caching, dedupe, retry, polling, optimistic UI, and an offline queue.
● Dashboard load — several requests into one VM ● Dependent HTTP chain — a request depends on the response ● Infinite scroll — pages without duplicates ● Manual refresh — a refresh button + initial load ● Stale-while-revalidate — cache first, network after ● Cache invalidation — refreshing a shareReplay cache ● In-flight deduplication — one request per key ● Timeout fallback — the API hangs ● Conditional retry — retry only transient errors ● Job polling — waiting for an export to finish ● Optimistic update — rollback on error ● Offline queue — sending after reconnect 基 Angular Interop · 信号
0/5 Wiring RxJS into modern Angular: DestroyRef, signals, outputs, and the resource approach.
● takeUntilDestroyed — modern Angular cleanup ● toSignal — an Observable into a Signal ● toObservable — a Signal into an Observable pipeline ● outputFromObservable — an Observable as a component output ● rxResource — an Observable-backed resource Local state and view-model streams without an unnecessary global store.
● Component VM — one stream for the template ● Local reducer store — scan as a mini-store ● Reset on logout — clearing the service's state ● Load state machine — idle/loading/success/error Realtime patterns for socket-like streams: reconnect, multiplex, typing indicators, a toast queue, and an SSE wrapper.
● WebSocket basics — incoming and outgoing messages ● WebSocket reconnect — backoff after a drop ● WebSocket multiplex — channels over one socket ● Typing indicator — typing / stopped typing ● Toast queue — notifications one at a time ● SSE wrapper — a custom Observable with teardown 実 Events Advanced · 操作+
0/8 Advanced user events: shortcut layers, an Escape stack, outside click, resize, scroll, and gestures.
● Keyboard layers — global/list/modal shortcuts ● Escape stack — close the top layer ● Click outside — closing a popover ● Resize breakpoint — responsive stream ● Scroll direction — sticky header ● Single vs double click — select or open ● Hover intent — a menu without accidental opens ● Long press — holding a button Load control: batching, animation frame, rate limiting, and independent entity streams.
● Buffer analytics — batching events ● Animation frame — smooth UI updates ● Rate-limited queue — don't choke the backend ● Per-entity grouping — a separate stream per id 高 Error Boundaries · 失敗
0/3 Error boundaries: isolating item-level failures, error-as-data, and keeping the last good value.
● Per-item error isolation — one fail doesn't break the batch ● Error as data — materialize for a safe UI ● Last good value — fall back to the previous success 極 Testing & Marbles · 試験
0/3 Testing RxJS behavior: marble thinking, virtual time, and verifying cleanup.
● Marble test typeahead — verifying debounce/switchMap ● Marble test retry — time without real timers ● Cleanup test — verifying unsubscribe