5 lines
35 KiB
JSON
5 lines
35 KiB
JSON
{
|
|
"id": "guide/example-apps-list",
|
|
"title": "Example applications",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/example-apps-list.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"example-applications\">Example applications<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#example-applications\"><i class=\"material-icons\">link</i></a></h1>\n<p>The following is a list of the example applications in the <a href=\"docs\">Angular documentation</a>.</p>\n<h2 id=\"fundamentals\">Fundamentals<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#fundamentals\"><i class=\"material-icons\">link</i></a></h2>\n<p>These examples demonstrate minimal, fundamental concepts.</p>\n<h3 id=\"getting-started-application\">Getting started application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#getting-started-application\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"getting-started\"></live-example></p>\n<p>Introductory application demonstrating Angular features.\nFor more information, see <a href=\"start\">Getting started</a>.</p>\n<h3 id=\"launching-your-app\">Launching your app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#launching-your-app\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"bootstrapping\"></live-example></p>\n<p>Demonstrates the Angular bootstrapping process.\nFor more information, see <a href=\"guide/bootstrapping\">Launching your app with a root module</a>.</p>\n<h3 id=\"structure-of-angular-applications\">Structure of Angular applications<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#structure-of-angular-applications\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"architecture\"></live-example></p>\n<p>Demonstrates the fundamental architecture of Angular applications.\nFor more information, see <a href=\"guide/architecture\">Introduction to Angular concepts</a>.</p>\n<h3 id=\"setting-the-document-title\">Setting the document title<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#setting-the-document-title\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"set-document-title\"></live-example></p>\n<p>Demonstrates customizing the document title in the browser.\nFor more information, see <a href=\"guide/set-document-title\">Set the document title</a>.</p>\n<h2 id=\"tour-of-heroes-tutorial-application\">Tour of Heroes tutorial application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-tutorial-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>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.</p>\n<h3 id=\"tour-of-heroes-completed-application\">Tour of Heroes: completed application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-completed-application\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt6\"></live-example></p>\n<p>Completed Tour of Heroes example application.\nFor more information, see <a href=\"tutorial\">Tour of Heroes app and tutorial</a>.</p>\n<h3 id=\"tour-of-heroes-creating-an-application\">Tour of Heroes: Creating an application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-creating-an-application\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt0\"></live-example></p>\n<p>Initial Tour of Heroes example application for beginning the tutorial.\nFor more information, see <a href=\"tutorial/toh-pt0\">Create a new project</a>.</p>\n<h3 id=\"tour-of-heroes-the-hero-editor\">Tour of Heroes: The hero editor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-the-hero-editor\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt1\"></live-example></p>\n<p>First step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt1\">The hero editor</a>.</p>\n<h3 id=\"tour-of-heroes-display-a-selection-list\">Tour of Heroes: Display a selection list<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-display-a-selection-list\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt2\"></live-example></p>\n<p>Second step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt2\">Display a selection list</a>.</p>\n<h3 id=\"tour-of-heroes-create-a-feature-component\">Tour of Heroes: Create a feature component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-create-a-feature-component\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt3\"></live-example></p>\n<p>Third step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt3\">Create a feature component</a>.</p>\n<h3 id=\"tour-of-heroes-add-services\">Tour of Heroes: Add services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-add-services\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt4\"></live-example></p>\n<p>Fourth step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt4\">Add services</a>.</p>\n<h3 id=\"tour-of-heroes-add-in-app-navigation-with-routing\">Tour of Heroes: Add in-app navigation with routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-add-in-app-navigation-with-routing\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt5\"></live-example></p>\n<p>Fifth step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt5\">Add in-app navigation with routing</a>.</p>\n<h3 id=\"tour-of-heroes-get-data-from-a-server\">Tour of Heroes: Get data from a server<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#tour-of-heroes-get-data-from-a-server\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"toh-pt6\"></live-example></p>\n<p>Sixth and final step of the Tour of Heroes example application.\nFor more information, see <a href=\"tutorial/toh-pt6\">Get data from a server</a>.</p>\n<h2 id=\"working-with-templates\">Working with templates<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#working-with-templates\"><i class=\"material-icons\">link</i></a></h2>\n<p>These examples demonstrate features of Angular templates.</p>\n<h3 id=\"accessibility\">Accessibility<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#accessibility\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"accessibility\"></live-example></p>\n<p>Demonstrates building Angular applications in a more accessible way.\nFor more information, see <a href=\"guide/accessibility\">Accessibility</a>.</p>\n<h3 id=\"animations\">Animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#animations\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"animations\"></live-example></p>\n<p>Demonstrates Angular's animation features.\nFor more information, see <a href=\"guide/animations\">Introduction to Angular animations</a>.</p>\n<h3 id=\"attribute-class-and-style-bindings\">Attribute, class, and style bindings<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#attribute-class-and-style-bindings\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"attribute-binding\"></live-example></p>\n<p>Demonstrates Angular attribute, class, and style bindings.\nFor more information, see <a href=\"guide/attribute-binding\">Attribute, class, and style bindings</a>.</p>\n<h3 id=\"attribute-directives\">Attribute directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#attribute-directives\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"attribute-directives\"></live-example></p>\n<p>Demonstrates Angular attribute directives.\nFor more information, see <a href=\"guide/attribute-directives\">Attribute directives</a>.</p>\n<h3 id=\"binding-syntax\">Binding syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#binding-syntax\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"binding-syntax\"></live-example></p>\n<p>Demonstrates Angular's binding syntax.\nFor more information, see <a href=\"guide/binding-syntax\">Binding syntax: an overview</a>.</p>\n<h3 id=\"built-in-directives\">Built-in directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#built-in-directives\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"built-in-directives\"></live-example></p>\n<p>Demonstrates Angular built-in directives.\nFor more information, see <a href=\"guide/built-in-directives\">Built-in directives</a>.</p>\n<h3 id=\"built-in-template-functions\">Built-in template functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#built-in-template-functions\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"built-in-template-functions\"></live-example></p>\n<p>Demonstrates Angular built-in template functions.\nFor more information, see the <a href=\"guide/template-expression-operators#the-any-type-cast-function\"><code>$any()</code> type cast function section</a> of <a href=\"guide/template-expression-operators\">Template expression operators</a>.</p>\n<h3 id=\"interpolation\">Interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#interpolation\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"interpolation\"></live-example></p>\n<p>Demonstrates Angular interpolation.\nFor more information, see <a href=\"guide/interpolation\">Interpolation and template expressions</a>.</p>\n<h3 id=\"template-expression-operators\">Template expression operators<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#template-expression-operators\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"template-expression-operators\"></live-example></p>\n<p>Demonstrates expression operators in Angular templates.\nFor more information, see <a href=\"guide/template-expression-operators\">Template expression operators</a>.</p>\n<h3 id=\"template-reference-variables\">Template reference variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#template-reference-variables\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"template-reference-variables\"></live-example></p>\n<p>Demonstrates Angular's template reference variables.\nFor more information, see <a href=\"guide/template-reference-variables\">Template reference variables</a>.</p>\n<h3 id=\"ngcontainer\"><code><ngcontainer></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#ngcontainer\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"ngcontainer\"></live-example></p>\n<p>Demonstrates <code><ngcontainer></code>.\nFor more information, see the <a href=\"guide/built-in-directives#ngcontainer\">ng-container section</a> of <a href=\"guide/structural-directives\">Built-in directives</a> .</p>\n<h3 id=\"pipes\">Pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#pipes\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"pipes\"></live-example></p>\n<p>Demonstrates Angular pipes.\nFor more information, see <a href=\"guide/pipes\">Transforming Data Using Pipes</a>.</p>\n<h3 id=\"property-binding\">Property binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#property-binding\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"property-binding\"></live-example></p>\n<p>Demonstrates property binding in Angular.\nFor more information, see <a href=\"guide/property-binding\">Property binding</a>.</p>\n<h3 id=\"structural-directives\">Structural directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#structural-directives\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"structural-directives\"></live-example></p>\n<p>Demonstrates Angular structural directives.\nFor more information, see <a href=\"guide/structural-directives\">Structural directives</a>.</p>\n<h3 id=\"two-way-binding\">Two-way binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#two-way-binding\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"two-way-binding\"></live-example></p>\n<p>Demonstrates two-way data binding in Angular applications.\nFor more information, see <a href=\"guide/two-way-binding\">Two-way binding</a>.</p>\n<h3 id=\"template-syntax\">Template syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#template-syntax\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"template-syntax\"></live-example></p>\n<p>Comprehensive demonstration of Angular's template syntax.\nFor more information, see <a href=\"guide/template-syntax\">Template reference variables</a>.</p>\n<h3 id=\"user-input\">User input<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#user-input\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"user-input\"></live-example></p>\n<p>Demonstrates responding to user actions.\nFor more information, see <a href=\"guide/user-input\">User input</a>.</p>\n<h2 id=\"working-with-components\">Working with components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#working-with-components\"><i class=\"material-icons\">link</i></a></h2>\n<p>These examples demonstrate features of Angular components.</p>\n<h3 id=\"component-interaction\">Component interaction<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#component-interaction\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"component-interaction\"></live-example></p>\n<p>Demonstrates how Angular shares data between components.\nFor more information, see <a href=\"guide/component-interaction\">Component interaction</a>.</p>\n<h3 id=\"component-styles\">Component styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#component-styles\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"component-styles\"></live-example></p>\n<p>Demonstrates styling in Angular apps.\nFor more information, see <a href=\"guide/component-styles\">Component styles</a>.</p>\n<h3 id=\"dynamic-component-loader\">Dynamic component loader<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dynamic-component-loader\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"dynamic-component-loader\"></live-example></p>\n<p>Demonstrates how to dynamically load components.\nFor more information, see <a href=\"guide/dynamic-component-loader\">Dynamic component loader</a>.</p>\n<h3 id=\"elements\">Elements<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#elements\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"elements\"></live-example></p>\n<p>Demonstrates using Angular custom elements.\nFor more information, see <a href=\"guide/elements\">Angular elements overview</a>.</p>\n<h3 id=\"event-binding\">Event binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#event-binding\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"event-binding\"></live-example></p>\n<p>Demonstrates binding to events in Angular.\nFor more information, see <a href=\"guide/event-binding\">Event binding</a>.</p>\n<h3 id=\"input-and-output\"><code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> and <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#input-and-output\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"inputs-outputs\"></live-example></p>\n<p>Demonstrates <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> and <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> in components and directives.\nFor more information, see <a href=\"guide/inputs-outputs\"><code>@Input()</code> and <code>@Output()</code> properties</a>.</p>\n<h3 id=\"lifecycle-hooks\">Lifecycle hooks<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#lifecycle-hooks\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"lifecycle-hooks\"></live-example></p>\n<p>Demonstrates Angular lifecycle hooks such as <code>ngOnInit()</code> and <code>ngOnChanges()</code>.\nFor more information, see <a href=\"guide/lifecycle-hooks\">Hooking into the component lifecycle</a>.</p>\n<h2 id=\"dependency-injection\">Dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dependency-injection\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"dependency-injection-fundamentals\">Dependency injection fundamentals<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dependency-injection-fundamentals\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"dependency-injection\"></live-example></p>\n<p>Demonstrates fundamentals of Angular dependency injection.\nFor more information, see <a href=\"guide/dependency-injection\">Dependency injection</a>.</p>\n<h3 id=\"dependency-injection-features\">Dependency injection features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dependency-injection-features\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"dependency-injection-in-action\"></live-example></p>\n<p>Demonstrates many of the features of Angular dependency injection.\nFor more information, see <a href=\"guide/dependency-injection\">Dependency injection in action</a>.</p>\n<h3 id=\"providing-dependencies-in-ngmodules\">Providing dependencies in NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#providing-dependencies-in-ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"providers\"></live-example></p>\n<p>Demonstrates providing services in NgModules.\nFor more information, see <a href=\"guide/providers\">Providing dependencies in modules</a>.</p>\n<h3 id=\"hierarchical-dependency-injection\">Hierarchical dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#hierarchical-dependency-injection\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"hierarchical-dependency-injection\"></live-example></p>\n<p>Demonstrates Angular injector trees and resolution modifiers.\nFor more information, see <a href=\"guide/hierarchical-dependency-injection\">Hierarchical injectors</a>.</p>\n<h3 id=\"dependency-injection-with-providers-and-viewproviders\">Dependency injection with <code>providers</code> and <code>viewProviders</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dependency-injection-with-providers-and-viewproviders\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"providers-viewproviders\"></live-example></p>\n<p>Demonstrates how <code>providers</code> and <code>viewproviders</code> affect dependency injection.\nFor more information, see the <a href=\"guide/hierarchical-dependency-injection#providing-services-in-component\">Providing services in <code>@Component()</code></a> section of <a href=\"guide/hierarchical-dependency-injection\">Hierarchical injectors</a>.</p>\n<h3 id=\"resolution-modifiers-and-dependency-injection\">Resolution modifiers and dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#resolution-modifiers-and-dependency-injection\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"resolution-modifiers\"></live-example></p>\n<p>Demonstrates Angular's resolution modifiers, such as <code>@<a href=\"api/core/Self\" class=\"code-anchor\">Self</a>()</code>.\nFor more information, see the <a href=\"guide/hierarchical-dependency-injection#modifying-service-visibility\">Modifying service visibility</a> section of <a href=\"guide/hierarchical-dependency-injection\">Hierarchical injectors</a>.</p>\n<h2 id=\"forms\">Forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#forms\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"forms-overview\">Forms overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#forms-overview\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"forms-overview\"></live-example></p>\n<p>Demonstrates foundational concepts of Angular forms.\nFor more information, see <a href=\"guide/forms-overview\">Introduction to forms in Angular</a>.</p>\n<h3 id=\"reactive-forms\">Reactive forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#reactive-forms\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"reactive-forms\"></live-example></p>\n<p>Demonstrates Angular's reactive forms.\nFor more information, see <a href=\"guide/reactive-forms\">Reactive forms</a>.</p>\n<h3 id=\"template-driven-forms\">Template-driven forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#template-driven-forms\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"forms\"></live-example></p>\n<p>Demonstrates Angular template-driven forms.\nFor more information, see <a href=\"guide/forms\">Building a template-driven form</a>.</p>\n<h3 id=\"form-validation\">Form validation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#form-validation\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"form-validation\"></live-example></p>\n<p>Demonstrates validating forms in Angular.\nFor more information, see <a href=\"guide/form-validation\">Validating form input</a>.</p>\n<h3 id=\"dynamic-forms\">Dynamic forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#dynamic-forms\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"dynamic-form\"></live-example></p>\n<p>Demonstrates creating dynamic forms.\nFor more information, see <a href=\"guide/dynamic-form\">Building dynamic forms</a>.</p>\n<h2 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#ngmodules\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"ngmodules-1\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#ngmodules-1\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"ngmodules\"></live-example></p>\n<p>Demonstrates fundamentals of NgModules.\nFor more information, see <a href=\"guide/ngmodules\">NgModules</a>.</p>\n<h3 id=\"feature-modules\">Feature modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#feature-modules\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"feature-modules\"></live-example></p>\n<p>Demonstrates using feature modules in Angular.\nFor more information, see <a href=\"guide/feature-modules\">Feature modules</a>.</p>\n<h3 id=\"lazy-loading-ngmodules\">Lazy loading NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#lazy-loading-ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"lazy-loading-ngmodules\"></live-example></p>\n<p>Demonstrates lazy loading NgModules.\nFor more information, see <a href=\"guide/lazy-loading-ngmodules\">Lazy-loading feature modules</a>.</p>\n<h2 id=\"routing\">Routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#routing\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"router\">Router<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#router\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"router\"></live-example></p>\n<p>Demonstrates Angular's routing features.\nFor more information, see <a href=\"guide/router\">Router</a>.</p>\n<h3 id=\"router-tutorial\">Router tutorial<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#router-tutorial\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"router-tutorial\"></live-example></p>\n<p>Demonstrates Angular's fundamental routing techniques.\nFor more information, see <a href=\"guide/router-tutorial\">Using Angular routes in a single-page application</a>.</p>\n<h3 id=\"style-guide-for-documentation-contributions\">Style guide for Documentation contributions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#style-guide-for-documentation-contributions\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"docs-style-guide\"></live-example></p>\n<p>Demonstrates Angular documentation style guidelines.\nFor more information, see <a href=\"guide/docs-style-guide\">Angular documentation style guide</a>.</p>\n<h2 id=\"server-communication\">Server communication<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#server-communication\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"httpclient\"><code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#httpclient\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"http\"></live-example></p>\n<p>Demonstrates server interaction using HTTP.\nFor more information, see <a href=\"guide/http\">Communicating with backend services using HTTP</a>.</p>\n<h2 id=\"workflow\">Workflow<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#workflow\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"security\">Security<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#security\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"security\"></live-example></p>\n<p>Demonstrates security concepts in Angular applications.\nFor more information, see <a href=\"guide/security\">Security</a>.</p>\n<h3 id=\"testing\">Testing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#testing\"><i class=\"material-icons\">link</i></a></h3>\n<p>For the sample app that the testing guides describe, see the <live-example nodownload=\"\" name=\"testing\">sample app</live-example>.</p>\n<p>For the tests featured in the testing guides, see <live-example name=\"testing\" stackblitz=\"specs\" nodownload=\"\">tests</live-example>.</p>\n<p>Demonstrates techniques for testing Angular.\nFor more information, see <a href=\"guide/testing\">Testing</a>.</p>\n<h2 id=\"hybrid-angular-applications\">Hybrid Angular applications<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#hybrid-angular-applications\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"angularjs-to-angular-concepts-quick-reference\">AngularJS to Angular concepts: Quick reference<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/example-apps-list#angularjs-to-angular-concepts-quick-reference\"><i class=\"material-icons\">link</i></a></h3>\n<p><live-example name=\"ajs-quick-reference\"></live-example></p>\n<p>Demonstrates Angular for those with an AngularJS background.\nFor more information, see <a href=\"guide/ajs-quick-reference\">AngularJS to Angular concepts: Quick reference</a>.</p>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/common/http/HttpClient\n - api/core/Input\n - api/core/Output\n - api/core/Self\n - docs\n - guide/accessibility\n - guide/ajs-quick-reference\n - guide/animations\n - guide/architecture\n - guide/attribute-binding\n - guide/attribute-directives\n - guide/binding-syntax\n - guide/bootstrapping\n - guide/built-in-directives\n - guide/built-in-directives#ngcontainer\n - guide/component-interaction\n - guide/component-styles\n - guide/dependency-injection\n - guide/docs-style-guide\n - guide/dynamic-component-loader\n - guide/dynamic-form\n - guide/elements\n - guide/event-binding\n - guide/example-apps-list#accessibility\n - guide/example-apps-list#angularjs-to-angular-concepts-quick-reference\n - guide/example-apps-list#animations\n - guide/example-apps-list#attribute-class-and-style-bindings\n - guide/example-apps-list#attribute-directives\n - guide/example-apps-list#binding-syntax\n - guide/example-apps-list#built-in-directives\n - guide/example-apps-list#built-in-template-functions\n - guide/example-apps-list#component-interaction\n - guide/example-apps-list#component-styles\n - guide/example-apps-list#dependency-injection\n - guide/example-apps-list#dependency-injection-features\n - guide/example-apps-list#dependency-injection-fundamentals\n - guide/example-apps-list#dependency-injection-with-providers-and-viewproviders\n - guide/example-apps-list#dynamic-component-loader\n - guide/example-apps-list#dynamic-forms\n - guide/example-apps-list#elements\n - guide/example-apps-list#event-binding\n - guide/example-apps-list#example-applications\n - guide/example-apps-list#feature-modules\n - guide/example-apps-list#form-validation\n - guide/example-apps-list#forms\n - guide/example-apps-list#forms-overview\n - guide/example-apps-list#fundamentals\n - guide/example-apps-list#getting-started-application\n - guide/example-apps-list#hierarchical-dependency-injection\n - guide/example-apps-list#httpclient\n - guide/example-apps-list#hybrid-angular-applications\n - guide/example-apps-list#input-and-output\n - guide/example-apps-list#interpolation\n - guide/example-apps-list#launching-your-app\n - guide/example-apps-list#lazy-loading-ngmodules\n - guide/example-apps-list#lifecycle-hooks\n - guide/example-apps-list#ngcontainer\n - guide/example-apps-list#ngmodules\n - guide/example-apps-list#ngmodules-1\n - guide/example-apps-list#pipes\n - guide/example-apps-list#property-binding\n - guide/example-apps-list#providing-dependencies-in-ngmodules\n - guide/example-apps-list#reactive-forms\n - guide/example-apps-list#resolution-modifiers-and-dependency-injection\n - guide/example-apps-list#router\n - guide/example-apps-list#router-tutorial\n - guide/example-apps-list#routing\n - guide/example-apps-list#security\n - guide/example-apps-list#server-communication\n - guide/example-apps-list#setting-the-document-title\n - guide/example-apps-list#structural-directives\n - guide/example-apps-list#structure-of-angular-applications\n - guide/example-apps-list#style-guide-for-documentation-contributions\n - guide/example-apps-list#template-driven-forms\n - guide/example-apps-list#template-expression-operators\n - guide/example-apps-list#template-reference-variables\n - guide/example-apps-list#template-syntax\n - guide/example-apps-list#testing\n - guide/example-apps-list#tour-of-heroes-add-in-app-navigation-with-routing\n - guide/example-apps-list#tour-of-heroes-add-services\n - guide/example-apps-list#tour-of-heroes-completed-application\n - guide/example-apps-list#tour-of-heroes-create-a-feature-component\n - guide/example-apps-list#tour-of-heroes-creating-an-application\n - guide/example-apps-list#tour-of-heroes-display-a-selection-list\n - guide/example-apps-list#tour-of-heroes-get-data-from-a-server\n - guide/example-apps-list#tour-of-heroes-the-hero-editor\n - guide/example-apps-list#tour-of-heroes-tutorial-application\n - guide/example-apps-list#two-way-binding\n - guide/example-apps-list#user-input\n - guide/example-apps-list#workflow\n - guide/example-apps-list#working-with-components\n - guide/example-apps-list#working-with-templates\n - guide/feature-modules\n - guide/form-validation\n - guide/forms\n - guide/forms-overview\n - guide/hierarchical-dependency-injection\n - guide/hierarchical-dependency-injection#modifying-service-visibility\n - guide/hierarchical-dependency-injection#providing-services-in-component\n - guide/http\n - guide/inputs-outputs\n - guide/interpolation\n - guide/lazy-loading-ngmodules\n - guide/lifecycle-hooks\n - guide/ngmodules\n - guide/pipes\n - guide/property-binding\n - guide/providers\n - guide/reactive-forms\n - guide/router\n - guide/router-tutorial\n - guide/security\n - guide/set-document-title\n - guide/structural-directives\n - guide/template-expression-operators\n - guide/template-expression-operators#the-any-type-cast-function\n - guide/template-reference-variables\n - guide/template-syntax\n - guide/testing\n - guide/two-way-binding\n - guide/user-input\n - start\n - tutorial\n - tutorial/toh-pt0\n - tutorial/toh-pt1\n - tutorial/toh-pt2\n - tutorial/toh-pt3\n - tutorial/toh-pt4\n - tutorial/toh-pt5\n - tutorial/toh-pt6\n - https://github.com/angular/angular/edit/master/aio/content/guide/example-apps-list.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |