docs: add doc with list of example apps currently in aio (#39295)
PR Close #39295
This commit is contained in:
Kapunahele Wong
atscott
parent
3f66a84e01
commit
25d6fcacc4
|
|
@ -350,6 +350,7 @@ groups:
|
|||
'aio/content/guide/dynamic-component-loader.md',
|
||||
'aio/content/examples/dynamic-component-loader/**',
|
||||
'aio/content/images/guide/dynamic-component-loader/**',
|
||||
'aio/content/guide/example-apps-list.md',
|
||||
'aio/content/guide/entry-components.md',
|
||||
'aio/content/guide/feature-modules.md',
|
||||
'aio/content/examples/feature-modules/**',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,476 @@
|
|||
# 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).
|
||||
|
||||
|
|
@ -910,6 +910,11 @@
|
|||
"tooltip": "Details of the Angular packages, classes, interfaces, and other types.",
|
||||
"url": "api"
|
||||
},
|
||||
{
|
||||
"title": "Example applications",
|
||||
"tooltip": "List of all of the example applications in the Angular documentation.",
|
||||
"url": "guide/example-apps-list"
|
||||
},
|
||||
{
|
||||
"url": "guide/glossary",
|
||||
"title": "Angular Glossary",
|
||||
|
|
|
|||
Loading…
Reference in New Issue