This document describes the tutorial applications included in the Angular documentation site (adev). These are standalone Angular applications that demonstrate framework features and provide hands-on learning experiences for users. Each tutorial is a fully-functional Angular application with its own dependencies, build configuration, and source code, designed to run in an interactive environment.
For information about the adev platform architecture and documentation site infrastructure, see Adev Platform Architecture
The tutorial applications are organized under adev/src/content/tutorials/ with each tutorial in its own directory. These applications serve as the basis for the interactive embedded code editor (Playground) on the Angular.dev site.
| Tutorial Name | Path | Description |
|---|---|---|
| First App | adev/src/content/tutorials/first-app/ | Introductory tutorial for building your first Angular application |
| Learn Angular | adev/src/content/tutorials/learn-angular/ | Comprehensive tutorial covering Angular fundamentals |
| Playground | adev/src/content/tutorials/playground/ | Interactive environment with Material Design components |
| Homepage | adev/src/content/tutorials/homepage/ | Example application for the homepage demonstration |
| Deferrable Views | adev/src/content/tutorials/deferrable-views/ | Tutorial demonstrating @defer block functionality |
| Signals | adev/src/content/tutorials/signals/ | Tutorial for signal-based reactivity |
| Signal Forms | adev/src/content/tutorials/signal-forms/ | Experimental signal-based forms tutorial |
Each tutorial contains a common/ subdirectory with its own environment configuration:
package.json - Dependency and script definitions (e.g., adev/src/content/tutorials/first-app/common/package.json1-29)package-lock.json - Locked dependency versions for the WebContainer environmentSources:
All tutorial applications share a common set of Angular framework dependencies. The package-lock.json files currently specify version ^22.2.0-next (or ^22.1.0-next) for all @angular/* packages:
Core Runtime Dependencies:
@angular/common - Common directives, pipes, and services adev/src/content/tutorials/first-app/common/package-lock.json11@angular/compiler - Template compilation adev/src/content/tutorials/first-app/common/package-lock.json12@angular/core - Core framework runtime adev/src/content/tutorials/first-app/common/package-lock.json13@angular/platform-browser - Browser platform adapter adev/src/content/tutorials/first-app/common/package-lock.json15rxjs - Reactive Extensions (~7.8.0) adev/src/content/tutorials/first-app/common/package-lock.json17tslib - TypeScript runtime library (^2.3.0) adev/src/content/tutorials/first-app/common/package-lock.json18zone.js - Asynchronous operation tracking (~0.16.0) adev/src/content/tutorials/first-app/common/package-lock.json19Optional Feature Dependencies:
@angular/forms - Template-driven and reactive forms (found in most tutorials) adev/src/content/tutorials/first-app/common/package-lock.json14@angular/router - Navigation and routing (first-app, learn-angular, deferrable-views) adev/src/content/tutorials/first-app/common/package-lock.json16@angular/animations - Animation engine (Playground) adev/src/content/tutorials/playground/common/package-lock.json11@angular/material - Material Design components (Playground) adev/src/content/tutorials/playground/common/package-lock.json18Development Dependencies:
@angular/build - Build system (^22.2.0-next) adev/src/content/tutorials/first-app/common/package-lock.json22@angular/cli - Command-line interface (^22.2.0-next) adev/src/content/tutorials/first-app/common/package-lock.json23typescript - TypeScript compiler (~6.0.3) adev/src/content/tutorials/first-app/common/package-lock.json26Sources:
The documentation includes an interactive update guide located at adev/src/app/features/update/. This tool helps developers migrate between Angular versions by providing tailored recommendations based on application complexity.
Recommendations are defined in adev/src/app/features/update/recommendations.ts Each recommendation is a Step object containing:
possibleIn: The version where the change was introduced.necessaryAsOf: The version where the change becomes mandatory.level: ApplicationComplexity (Basic, Medium, Advanced) adev/src/app/features/update/recommendations.ts9-13action: Markdown-formatted instructions for the developer.BrowserAnimationsModule for apps using animations adev/src/app/features/update/recommendations.ts64-67novalidate attribute behavior and how to re-enable native validation via ngNativeValidate adev/src/app/features/update/recommendations.ts72-75OpaqueToken with InjectionToken adev/src/app/features/update/recommendations.ts118-120Sources:
The adev platform uses an interactive editor powered by WebContainers to run tutorial applications directly in the browser. This system is integrated via the @angular/docs package.
The shared docs package (adev/shared-docs/package.json) provides the underlying components for the tutorial experience:
ng serve adev/shared-docs/package.json17shiki for code visualization adev/shared-docs/package.json24mermaid for rendering documentation diagrams adev/shared-docs/package.json23fflate for handling compressed tutorial assets adev/shared-docs/package.json20The editor interface is composed of several key entities that manage code state and the runtime environment:
CodeEditorComponent: The primary UI for editing source code, utilizing CodeMirrorEditorService for editor operations adev/src/app/editor/code-editor/code-editor.component.ts34NodeRuntimeSandboxService: Manages the lifecycle of the WebContainer, including booting the environment and managing file system operations adev/src/app/editor/node-runtime-sandbox.service.ts25TerminalComponent: Provides a view into the WebContainer's shell output, managed by TerminalHandlerService adev/src/app/editor/terminal/terminal.component.ts28NodeRuntimeSandboxService initializes the WebContainer and mounts the tutorial files adev/src/app/editor/node-runtime-sandbox.service.ts40CodeEditorComponent, changes are synchronized to the WebContainer file system via NodeRuntimeSandboxService.TerminalHandlerService captures stdout/stderr from the WebContainer processes (like ng serve) and pipes it to the TerminalComponent adev/src/app/editor/terminal/terminal-handler.service.ts15Sources:
The Angular.dev homepage features live interactive demos for core framework features such as Signals, Control Flow, and Deferrable Views adev/src/app/features/home/home.component.html47-82 These demos utilize @defer blocks to lazily load the demo components when they become visible or the browser is idle adev/src/app/features/home/home.component.html53
Featured Demos:
adev-signals-demo adev/src/app/features/home/home.component.html55adev-control-flow-example adev/src/app/features/home/home.component.html63adev-defer-example adev/src/app/features/home/home.component.html71adev-hydration-example adev/src/app/features/home/home.component.html79Sources:
Refresh this wiki