477 lines
13 KiB
Markdown
477 lines
13 KiB
Markdown
|
# Example applications
|
||
|
|
|
||
|
|
The following is a list of the example applications in the [Angular documentation](docs).
|
||
|
|
|
||
|
|
## Fundamentals
|
||
|
|
|
||
|
|
These examples demonstrate minimal, fundamental concepts.
|
||
|
|
|
||
|
|
### Getting started application
|
||
|
|
|
||
|
|
<live-example name="getting-started"></live-example>
|
||
|
|
|
||
|
|
Introductory application demonstrating Angular features.
|
||
|
|
For more information, see [Getting started](start).
|
||
|
|
|
||
|
|
|
||
|
|
### Launching your app
|
||
|
|
|
||
|
|
<live-example name="bootstrapping"></live-example>
|
||
|
|
|
||
|
|
Demonstrates the Angular bootstrapping process.
|
||
|
|
For more information, see [Launching your app with a root module](guide/bootstrapping).
|
||
|
|
|
||
|
|
### Structure of Angular applications
|
||
|
|
|
||
|
|
<live-example name="architecture"></live-example>
|
||
|
|
|
||
|
|
Demonstrates the fundamental architecture of Angular applications.
|
||
|
|
For more information, see [Introduction to Angular concepts](guide/architecture).
|
||
|
|
|
||
|
|
### Setting the document title
|
||
|
|
|
||
|
|
<live-example name="set-document-title"></live-example>
|
||
|
|
|
||
|
|
Demonstrates customizing the document title in the browser.
|
||
|
|
For more information, see [Set the document title](guide/set-document-title).
|
||
|
|
|
||
|
|
|
||
|
|
## Tour of Heroes tutorial application
|
||
|
|
|
||
|
|
The Tour of Heroes is a comprehensive tutorial that guides you through the process of building an application with many of Angular's most popular features.
|
||
|
|
|
||
|
|
### Tour of Heroes: completed application
|
||
|
|
|
||
|
|
<live-example name="toh-pt6"></live-example>
|
||
|
|
|
||
|
|
Completed Tour of Heroes example application.
|
||
|
|
For more information, see [Tour of Heroes app and tutorial](tutorial).
|
||
|
|
|
||
|
|
### Tour of Heroes: Creating an application
|
||
|
|
|
||
|
|
<live-example name="toh-pt0"></live-example>
|
||
|
|
|
||
|
|
Initial Tour of Heroes example application for beginning the tutorial.
|
||
|
|
For more information, see [Create a new project](tutorial/toh-pt0).
|
||
|
|
|
||
|
|
### Tour of Heroes: The hero editor
|
||
|
|
|
||
|
|
<live-example name="toh-pt1"></live-example>
|
||
|
|
|
||
|
|
First step of the Tour of Heroes example application.
|
||
|
|
For more information, see [The hero editor](tutorial/toh-pt1).
|
||
|
|
|
||
|
|
### Tour of Heroes: Display a selection list
|
||
|
|
|
||
|
|
<live-example name="toh-pt2"></live-example>
|
||
|
|
|
||
|
|
Second step of the Tour of Heroes example application.
|
||
|
|
For more information, see [Display a selection list](tutorial/toh-pt2).
|
||
|
|
|
||
|
|
### Tour of Heroes: Create a feature component
|
||
|
|
|
||
|
|
<live-example name="toh-pt3"></live-example>
|
||
|
|
|
||
|
|
Third step of the Tour of Heroes example application.
|
||
|
|
For more information, see [Create a feature component](tutorial/toh-pt3).
|
||
|
|
|
||
|
|
### Tour of Heroes: Add services
|
||
|
|
|
||
|
|
<live-example name="toh-pt4"></live-example>
|
||
|
|
|
||
|
|
Fourth step of the Tour of Heroes example application.
|
||
|
|
For more information, see [Add services](tutorial/toh-pt4).
|
||
|
|
|
||
|
|
### Tour of Heroes: Add in-app navigation with routing
|
||
|
|
|
||
|
|
<live-example name="toh-pt5"></live-example>
|
||
|
|
|
||
|
|
Fifth step of the Tour of Heroes example application.
|
||
|
|
For more information, see [Add in-app navigation with routing](tutorial/toh-pt5).
|
||
|
|
|
||
|
|
### Tour of Heroes: Get data from a server
|
||
|
|
|
||
|
|
<live-example name="toh-pt6"></live-example>
|
||
|
|
|
||
|
|
Sixth and final step of the Tour of Heroes example application.
|
||
|
|
For more information, see [Get data from a server](tutorial/toh-pt6).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Working with templates
|
||
|
|
|
||
|
|
These examples demonstrate features of Angular templates.
|
||
|
|
|
||
|
|
### Accessibility
|
||
|
|
|
||
|
|
<live-example name="accessibility"></live-example>
|
||
|
|
|
||
|
|
Demonstrates building Angular applications in a more accessible way.
|
||
|
|
For more information, see [Accessibility](guide/accessibility).
|
||
|
|
|
||
|
|
### Animations
|
||
|
|
|
||
|
|
<live-example name="animations"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's animation features.
|
||
|
|
For more information, see [Introduction to Angular animations](guide/animations).
|
||
|
|
|
||
|
|
### Attribute, class, and style bindings
|
||
|
|
|
||
|
|
<live-example name="attribute-binding"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular attribute, class, and style bindings.
|
||
|
|
For more information, see [Attribute, class, and style bindings](guide/attribute-binding).
|
||
|
|
|
||
|
|
### Attribute directives
|
||
|
|
|
||
|
|
<live-example name="attribute-directives"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular attribute directives.
|
||
|
|
For more information, see [Attribute directives](guide/attribute-directives).
|
||
|
|
|
||
|
|
### Binding syntax
|
||
|
|
|
||
|
|
<live-example name="binding-syntax"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's binding syntax.
|
||
|
|
For more information, see [Binding syntax: an overview](guide/binding-syntax).
|
||
|
|
|
||
|
|
### Built-in directives
|
||
|
|
|
||
|
|
<live-example name="built-in-directives"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular built-in directives.
|
||
|
|
For more information, see [Built-in directives](guide/built-in-directives).
|
||
|
|
|
||
|
|
### Built-in template functions
|
||
|
|
|
||
|
|
<live-example name="built-in-template-functions"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular built-in template functions.
|
||
|
|
For more information, see the [`$any()` type cast function section](guide/template-expression-operators#the-any-type-cast-function) of [Template expression operators](guide/template-expression-operators).
|
||
|
|
|
||
|
|
### Interpolation
|
||
|
|
|
||
|
|
<live-example name="interpolation"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular interpolation.
|
||
|
|
For more information, see [Interpolation and template expressions](guide/interpolation).
|
||
|
|
|
||
|
|
### Template expression operators
|
||
|
|
|
||
|
|
<live-example name="template-expression-operators"></live-example>
|
||
|
|
|
||
|
|
Demonstrates expression operators in Angular templates.
|
||
|
|
For more information, see [Template expression operators](guide/template-expression-operators).
|
||
|
|
|
||
|
|
### Template reference variables
|
||
|
|
|
||
|
|
<live-example name="template-reference-variables"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's template reference variables.
|
||
|
|
For more information, see [Template reference variables](guide/template-reference-variables).
|
||
|
|
|
||
|
|
### `<ngcontainer>`
|
||
|
|
|
||
|
|
<live-example name="ngcontainer"></live-example>
|
||
|
|
|
||
|
|
Demonstrates `<ngcontainer>`.
|
||
|
|
For more information, see the [ngtemplate section](guide/structural-directives#ngcontainer) of [Structural directives](guide/structural-directives) .
|
||
|
|
|
||
|
|
### Pipes
|
||
|
|
|
||
|
|
<live-example name="pipes"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular pipes.
|
||
|
|
For more information, see [Transforming Data Using Pipes](guide/pipes).
|
||
|
|
|
||
|
|
### Property binding
|
||
|
|
|
||
|
|
<live-example name="property-binding"></live-example>
|
||
|
|
|
||
|
|
Demonstrates property binding in Angular.
|
||
|
|
For more information, see [Property binding](guide/property-binding).
|
||
|
|
|
||
|
|
### Structural directives
|
||
|
|
|
||
|
|
<live-example name="structural-directives"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular structural directives.
|
||
|
|
For more information, see [Structural directives](guide/structural-directives).
|
||
|
|
|
||
|
|
|
||
|
|
### Two-way binding
|
||
|
|
|
||
|
|
<live-example name="two-way-binding"></live-example>
|
||
|
|
|
||
|
|
Demonstrates two-way data binding in Angular applications.
|
||
|
|
For more information, see [Two-way binding](guide/two-way-binding).
|
||
|
|
|
||
|
|
### Template syntax
|
||
|
|
|
||
|
|
<live-example name="template-syntax"></live-example>
|
||
|
|
|
||
|
|
Comprehensive demonstration of Angular's template syntax.
|
||
|
|
For more information, see [Template reference variables](guide/template-syntax).
|
||
|
|
|
||
|
|
### User input
|
||
|
|
|
||
|
|
<live-example name="user-input"></live-example>
|
||
|
|
|
||
|
|
Demonstrates responding to user actions.
|
||
|
|
For more information, see [User input](guide/user-input).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Working with components
|
||
|
|
|
||
|
|
These examples demonstrate features of Angular components.
|
||
|
|
|
||
|
|
### Component interaction
|
||
|
|
|
||
|
|
<live-example name="component-interaction"></live-example>
|
||
|
|
|
||
|
|
Demonstrates how Angular shares data between components.
|
||
|
|
For more information, see [Component interaction](guide/component-interaction).
|
||
|
|
|
||
|
|
### Component styles
|
||
|
|
|
||
|
|
<live-example name="component-styles"></live-example>
|
||
|
|
|
||
|
|
Demonstrates styling in Angular apps.
|
||
|
|
For more information, see [Component styles](guide/component-styles).
|
||
|
|
|
||
|
|
### Dynamic component loader
|
||
|
|
|
||
|
|
<live-example name="dynamic-component-loader"></live-example>
|
||
|
|
|
||
|
|
Demonstrates how to dynamically load components.
|
||
|
|
For more information, see [Dynamic component loader](guide/dynamic-component-loader).
|
||
|
|
|
||
|
|
### Elements
|
||
|
|
|
||
|
|
<live-example name="elements"></live-example>
|
||
|
|
|
||
|
|
Demonstrates using Angular custom elements.
|
||
|
|
For more information, see [Angular elements overview](guide/elements).
|
||
|
|
|
||
|
|
### Event binding
|
||
|
|
|
||
|
|
<live-example name="event-binding"></live-example>
|
||
|
|
|
||
|
|
Demonstrates binding to events in Angular.
|
||
|
|
For more information, see [Event binding](guide/event-binding).
|
||
|
|
|
||
|
|
### `@Input()` and `@Output()`
|
||
|
|
|
||
|
|
<live-example name="inputs-outputs"></live-example>
|
||
|
|
|
||
|
|
Demonstrates `@Input()` and `@Output()` in components and directives.
|
||
|
|
For more information, see [`@Input()` and `@Output()` properties](guide/inputs-outputs).
|
||
|
|
|
||
|
|
|
||
|
|
### Lifecycle hooks
|
||
|
|
|
||
|
|
<live-example name="lifecycle-hooks"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular lifecycle hooks such as `ngOnInit()` and `ngOnChanges()`.
|
||
|
|
For more information, see [Hooking into the component lifecycle](guide/lifecycle-hooks).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Dependency injection
|
||
|
|
|
||
|
|
### Dependency injection fundamentals
|
||
|
|
|
||
|
|
<live-example name="dependency-injection"></live-example>
|
||
|
|
|
||
|
|
Demonstrates fundamentals of Angular dependency injection.
|
||
|
|
For more information, see [Dependency injection](guide/dependency-injection).
|
||
|
|
|
||
|
|
### Dependency injection features
|
||
|
|
|
||
|
|
<live-example name="dependency-injection-in-action"></live-example>
|
||
|
|
|
||
|
|
Demonstrates many of the features of Angular dependency injection.
|
||
|
|
For more information, see [Dependency injection in action](guide/dependency-injection).
|
||
|
|
|
||
|
|
### Providing dependencies in NgModules
|
||
|
|
|
||
|
|
<live-example name="providers"></live-example>
|
||
|
|
|
||
|
|
Demonstrates providing services in NgModules.
|
||
|
|
For more information, see [Providing dependencies in modules](guide/providers).
|
||
|
|
|
||
|
|
|
||
|
|
### Hierarchical dependency injection
|
||
|
|
|
||
|
|
<live-example name="hierarchical-dependency-injection"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular injector trees and resolution modifiers.
|
||
|
|
For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
||
|
|
|
||
|
|
### Dependency injection with `providers` and `viewProviders`
|
||
|
|
|
||
|
|
<live-example name="providers-viewproviders"></live-example>
|
||
|
|
|
||
|
|
Demonstrates how `providers` and `viewproviders` affect dependency injection.
|
||
|
|
For more information, see the [Providing services in `@Component()`](guide/hierarchical-dependency-injection#providing-services-in-component) section of [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
||
|
|
|
||
|
|
|
||
|
|
### Resolution modifiers and dependency injection
|
||
|
|
|
||
|
|
<live-example name="resolution-modifiers"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's resolution modifiers, such as `@Self()`.
|
||
|
|
For more information, see the [Modifying service visibility](guide/hierarchical-dependency-injection#modifying-service-visibility) section of [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Forms
|
||
|
|
|
||
|
|
### Forms overview
|
||
|
|
|
||
|
|
<live-example name="forms-overview"></live-example>
|
||
|
|
|
||
|
|
Demonstrates foundational concepts of Angular forms.
|
||
|
|
For more information, see [Introduction to forms in Angular](guide/forms-overview).
|
||
|
|
|
||
|
|
### Reactive forms
|
||
|
|
|
||
|
|
<live-example name="reactive-forms"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's reactive forms.
|
||
|
|
For more information, see [Reactive forms](guide/reactive-forms).
|
||
|
|
|
||
|
|
### Template-driven forms
|
||
|
|
|
||
|
|
<live-example name="forms"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular template-driven forms.
|
||
|
|
For more information, see [Building a template-driven form](guide/forms).
|
||
|
|
|
||
|
|
### Form validation
|
||
|
|
|
||
|
|
<live-example name="form-validation"></live-example>
|
||
|
|
|
||
|
|
Demonstrates validating forms in Angular.
|
||
|
|
For more information, see [Validating form input](guide/form-validation).
|
||
|
|
|
||
|
|
### Dynamic forms
|
||
|
|
|
||
|
|
<live-example name="dynamic-form"></live-example>
|
||
|
|
|
||
|
|
Demonstrates creating dynamic forms.
|
||
|
|
For more information, see [Building dynamic forms](guide/dynamic-form).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## NgModules
|
||
|
|
|
||
|
|
### NgModules
|
||
|
|
|
||
|
|
<live-example name="ngmodules"></live-example>
|
||
|
|
|
||
|
|
Demonstrates fundamentals of NgModules.
|
||
|
|
For more information, see [NgModules](guide/ngmodules).
|
||
|
|
|
||
|
|
### Feature modules
|
||
|
|
|
||
|
|
<live-example name="feature-modules"></live-example>
|
||
|
|
|
||
|
|
Demonstrates using feature modules in Angular.
|
||
|
|
For more information, see [Feature modules](guide/feature-modules).
|
||
|
|
|
||
|
|
### Lazy loading NgModules
|
||
|
|
|
||
|
|
<live-example name="lazy-loading-ngmodules"></live-example>
|
||
|
|
|
||
|
|
Demonstrates lazy loading NgModules.
|
||
|
|
For more information, see [Lazy-loading feature modules](guide/lazy-loading-ngmodules).
|
||
|
|
|
||
|
|
|
||
|
|
## Routing
|
||
|
|
|
||
|
|
### Router
|
||
|
|
|
||
|
|
<live-example name="router"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's routing features.
|
||
|
|
For more information, see [Router](guide/router).
|
||
|
|
|
||
|
|
### Router tutorial
|
||
|
|
|
||
|
|
<live-example name="router-tutorial"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular's fundamental routing techniques.
|
||
|
|
For more information, see [Using Angular routes in a single-page application](guide/router-tutorial).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### Style guide for Documentation contributions
|
||
|
|
|
||
|
|
<live-example name="docs-style-guide"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular documentation style guidelines.
|
||
|
|
For more information, see [Angular documentation style guide](guide/docs-style-guide).
|
||
|
|
|
||
|
|
|
||
|
|
## Server communication
|
||
|
|
|
||
|
|
### `HttpClient`
|
||
|
|
|
||
|
|
<live-example name="http"></live-example>
|
||
|
|
|
||
|
|
Demonstrates server interaction using HTTP.
|
||
|
|
For more information, see [Communicating with backend services using HTTP](guide/http).
|
||
|
|
|
||
|
|
|
||
|
|
## Workflow
|
||
|
|
|
||
|
|
### Security
|
||
|
|
|
||
|
|
<live-example name="security"></live-example>
|
||
|
|
|
||
|
|
Demonstrates security concepts in Angular applications.
|
||
|
|
For more information, see [Security](guide/security).
|
||
|
|
|
||
|
|
|
||
|
|
### Testing
|
||
|
|
|
||
|
|
For the sample app that the testing guides describe, see the <live-example noDownload name="testing">sample app</live-example>.
|
||
|
|
|
||
|
|
For the tests featured in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
|
||
|
|
|
||
|
|
Demonstrates techniques for testing Angular.
|
||
|
|
For more information, see [Testing](guide/testing).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Hybrid Angular applications
|
||
|
|
|
||
|
|
### AngularJS to Angular concepts: Quick reference
|
||
|
|
|
||
|
|
<live-example name="ajs-quick-reference"></live-example>
|
||
|
|
|
||
|
|
Demonstrates Angular for those with an AngularJS background.
|
||
|
|
For more information, see [AngularJS to Angular concepts: Quick reference](guide/ajs-quick-reference).
|
||
|
|
|