mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
c0d3a019c2
**Pipes Sample Code** Migrated all sample code in the `examples/pipes` folder. Did not touch the pipes in the ToH or Testing folders. >The existing, complex discussion of the `CurrencyPipe` within `pipes-transform-data.md` cried out for a new `concurrency-formatting.component` example`. **Extracted "pipe precedence" into its own page** The topic had been extracted from `pipe.md` and tacked on to the bottom of the `pipes-overview.md` page. It's an advanced and somewhat obscure topic that doesn't belong in the overview. Rather than throw it away, I created a new `pipe-precedence.md` page and added it to the bottom of the pipes section navigation. I also tried to improve both the guide text and the companion component, `precedence.component`. **How to create a pipe is missing** The readers are told they can create their own pipes in several places throughout the docs. But there are no links and you can't navigate to a page that covers the topic. This is a serious omission! The topic is introduced in the `pipes-custom-data-trans.md` page (extracted verbatim from `pipes.md`). But you can't navigate to this page and their are no links to it. TODO: restore this page and add it to the left-nav. **Change `pipes.md` references to `pipe-overview.md`** The original, kitchen-sink page, `pipes.md`, was disconnected from navigation long ago, in favor of multiple pages such as `pipe-overview.md`. The page is still in the AIO documentation and can be found by searching or by links from 3rd party documenters. Landing on that page hides the left-nav. In this commit, we treat `pipes.md` as deprecated (which it seems to be). Therefore, this commit retargets previous `pipes.md` references to `pipe-overview.md`. >The `change-detection-slow-computations.md` is the exception. It refers to "pure pipes", a subject not covered in the current pipe documentation. That reference is retargeted to `api/core/Pipe#pure`. Certain code files are only referenced in `pipe.md`. They still work and are displayed in the overall pipes code sample as before. Now they are marked with deprecation comments for future treatment or removal. For consistency, certain sections of `pipes.md` were replaced by the contents of the corresponding current pages. PR Close #51333
444 lines
13 KiB
Markdown
444 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).
|
|
|
|
## 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).
|
|
|
|
### 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/tour-of-heroes/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/tour-of-heroes/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/tour-of-heroes/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/tour-of-heroes/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/tour-of-heroes/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/tour-of-heroes/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/tour-of-heroes/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).
|
|
|
|
### Content projection
|
|
|
|
<live-example name="content-projection"></live-example>
|
|
|
|
Demonstrates how to use Angular's content projection feature when creating reusable components.
|
|
|
|
### 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 [ng-container section](guide/built-in-directives#ngcontainer) of [Built-in directives](guide/structural-directives) .
|
|
|
|
### Pipes
|
|
|
|
<live-example name="pipes"></live-example>
|
|
|
|
Demonstrates Angular pipes.
|
|
For more information, see [Transforming Data Using Pipes](guide/pipes-overview).
|
|
|
|
### 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 applications.
|
|
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).
|
|
|
|
## Documentation
|
|
|
|
### 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/understanding-communicating-with-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 application that the testing guides describe, see the <live-example noDownload name="testing">sample app</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).
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2023-08-14
|