From 25d6fcacc47009a3bd8e460b5a03f28602ea5493 Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Thu, 15 Oct 2020 17:06:04 -0400 Subject: [PATCH] docs: add doc with list of example apps currently in aio (#39295) PR Close #39295 --- .pullapprove.yml | 1 + aio/content/guide/example-apps-list.md | 476 +++++++++++++++++++++++++ aio/content/navigation.json | 5 + 3 files changed, 482 insertions(+) create mode 100644 aio/content/guide/example-apps-list.md diff --git a/.pullapprove.yml b/.pullapprove.yml index aa332873cf..235bd0e862 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -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/**', diff --git a/aio/content/guide/example-apps-list.md b/aio/content/guide/example-apps-list.md new file mode 100644 index 0000000000..f3b88495bf --- /dev/null +++ b/aio/content/guide/example-apps-list.md @@ -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 + + + +Introductory application demonstrating Angular features. +For more information, see [Getting started](start). + + +### Launching your app + + + +Demonstrates the Angular bootstrapping process. +For more information, see [Launching your app with a root module](guide/bootstrapping). + +### Structure of Angular applications + + + +Demonstrates the fundamental architecture of Angular applications. +For more information, see [Introduction to Angular concepts](guide/architecture). + +### Setting the document title + + + +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 + + + +Completed Tour of Heroes example application. +For more information, see [Tour of Heroes app and tutorial](tutorial). + +### Tour of Heroes: Creating an application + + + +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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +Demonstrates building Angular applications in a more accessible way. +For more information, see [Accessibility](guide/accessibility). + +### Animations + + + +Demonstrates Angular's animation features. +For more information, see [Introduction to Angular animations](guide/animations). + +### Attribute, class, and style bindings + + + +Demonstrates Angular attribute, class, and style bindings. +For more information, see [Attribute, class, and style bindings](guide/attribute-binding). + +### Attribute directives + + + +Demonstrates Angular attribute directives. +For more information, see [Attribute directives](guide/attribute-directives). + +### Binding syntax + + + +Demonstrates Angular's binding syntax. +For more information, see [Binding syntax: an overview](guide/binding-syntax). + +### Built-in directives + + + +Demonstrates Angular built-in directives. +For more information, see [Built-in directives](guide/built-in-directives). + +### Built-in template functions + + + +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 + + + +Demonstrates Angular interpolation. +For more information, see [Interpolation and template expressions](guide/interpolation). + +### Template expression operators + + + +Demonstrates expression operators in Angular templates. +For more information, see [Template expression operators](guide/template-expression-operators). + +### Template reference variables + + + +Demonstrates Angular's template reference variables. +For more information, see [Template reference variables](guide/template-reference-variables). + +### `` + + + +Demonstrates ``. +For more information, see the [ngtemplate section](guide/structural-directives#ngcontainer) of [Structural directives](guide/structural-directives) . + +### Pipes + + + +Demonstrates Angular pipes. +For more information, see [Transforming Data Using Pipes](guide/pipes). + +### Property binding + + + +Demonstrates property binding in Angular. +For more information, see [Property binding](guide/property-binding). + +### Structural directives + + + +Demonstrates Angular structural directives. +For more information, see [Structural directives](guide/structural-directives). + + +### Two-way binding + + + +Demonstrates two-way data binding in Angular applications. +For more information, see [Two-way binding](guide/two-way-binding). + +### Template syntax + + + +Comprehensive demonstration of Angular's template syntax. +For more information, see [Template reference variables](guide/template-syntax). + +### User input + + + +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 + + + +Demonstrates how Angular shares data between components. +For more information, see [Component interaction](guide/component-interaction). + +### Component styles + + + +Demonstrates styling in Angular apps. +For more information, see [Component styles](guide/component-styles). + +### Dynamic component loader + + + +Demonstrates how to dynamically load components. +For more information, see [Dynamic component loader](guide/dynamic-component-loader). + +### Elements + + + +Demonstrates using Angular custom elements. +For more information, see [Angular elements overview](guide/elements). + +### Event binding + + + +Demonstrates binding to events in Angular. +For more information, see [Event binding](guide/event-binding). + +### `@Input()` and `@Output()` + + + +Demonstrates `@Input()` and `@Output()` in components and directives. +For more information, see [`@Input()` and `@Output()` properties](guide/inputs-outputs). + + +### Lifecycle hooks + + + +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 + + + +Demonstrates fundamentals of Angular dependency injection. +For more information, see [Dependency injection](guide/dependency-injection). + +### Dependency injection features + + + +Demonstrates many of the features of Angular dependency injection. +For more information, see [Dependency injection in action](guide/dependency-injection). + +### Providing dependencies in NgModules + + + +Demonstrates providing services in NgModules. +For more information, see [Providing dependencies in modules](guide/providers). + + +### Hierarchical dependency injection + + + +Demonstrates Angular injector trees and resolution modifiers. +For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection). + +### Dependency injection with `providers` and `viewProviders` + + + +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 + + + +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 + + + +Demonstrates foundational concepts of Angular forms. +For more information, see [Introduction to forms in Angular](guide/forms-overview). + +### Reactive forms + + + +Demonstrates Angular's reactive forms. +For more information, see [Reactive forms](guide/reactive-forms). + +### Template-driven forms + + + +Demonstrates Angular template-driven forms. +For more information, see [Building a template-driven form](guide/forms). + +### Form validation + + + +Demonstrates validating forms in Angular. +For more information, see [Validating form input](guide/form-validation). + +### Dynamic forms + + + +Demonstrates creating dynamic forms. +For more information, see [Building dynamic forms](guide/dynamic-form). + + + + + + +## NgModules + +### NgModules + + + +Demonstrates fundamentals of NgModules. +For more information, see [NgModules](guide/ngmodules). + +### Feature modules + + + +Demonstrates using feature modules in Angular. +For more information, see [Feature modules](guide/feature-modules). + +### Lazy loading NgModules + + + +Demonstrates lazy loading NgModules. +For more information, see [Lazy-loading feature modules](guide/lazy-loading-ngmodules). + + +## Routing + +### Router + + + +Demonstrates Angular's routing features. +For more information, see [Router](guide/router). + +### Router tutorial + + + +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 + + + +Demonstrates Angular documentation style guidelines. +For more information, see [Angular documentation style guide](guide/docs-style-guide). + + +## Server communication + +### `HttpClient` + + + +Demonstrates server interaction using HTTP. +For more information, see [Communicating with backend services using HTTP](guide/http). + + +## Workflow + +### Security + + + +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 sample app. + +For the tests featured in the testing guides, see tests. + +Demonstrates techniques for testing Angular. +For more information, see [Testing](guide/testing). + + + + +## Hybrid Angular applications + +### AngularJS to Angular concepts: Quick reference + + + +Demonstrates Angular for those with an AngularJS background. +For more information, see [AngularJS to Angular concepts: Quick reference](guide/ajs-quick-reference). + diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 5ce9d0c402..3ae4ccc17b 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -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",