angular-cn/aio/content/guide/example-apps-list.md

# Example applications

# 范例应用

The following is a list of the example applications in the [Angular documentation](docs).

下面是 [Angular 文档](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).

介绍 Angular 特性的入门级应用。欲知详情，请参阅[入门](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).

演示了 Angular 的启动过程。欲知详情，请参阅[使用根模块启动应用](guide/bootstrapping)。

### Structure of Angular applications

### Angular 应用的结构

<live-example name="architecture"></live-example>

Demonstrates the fundamental architecture of Angular applications.
For more information, see [Introduction to Angular concepts](guide/architecture).

演示了 Angular 应用的基本架构。欲知详情，请参阅[Angular 概念简介](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).

演示了如何在浏览器中自定义文档标题。欲知详情，请参阅[设置文档标题](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.

“英雄之旅”是一本全面的教程，可以指导你使用 Angular 中很多最常用的特性来构建一个应用程序。

### 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).

完成后的英雄之旅范例应用。欲知详情，请参阅[“英雄之旅”应用和教程](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).

初始的英雄之旅范例应用，从这里开始本教程。欲知详情，请参阅[创建新项目](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).

“英雄之旅”范例应用中的第一步。欲知详情，请参阅[英雄编辑器](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).

“英雄之旅”范例应用中的第二步。欲知详情，请参阅[显示选择列表](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).

“英雄之旅”范例应用中的第三步。欲知详情，请参阅[创建要素组件](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).

“英雄之旅”范例应用中的第四步。欲知详情，请参阅[添加服务](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).

“英雄之旅”范例应用中的第五步。欲知详情，请参阅[使用路由添加应用内导航](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).

“英雄之旅”范例应用中的第六步也是最后一步。欲知详情，请参阅[从服务器获取数据](tutorial/toh-pt6)。

## Working with templates

## 使用模板

These examples demonstrate features of Angular templates.

这些例子演示了 Angular 模板的各种特性。

### Accessibility

### 无障碍化

<live-example name="accessibility"></live-example>

Demonstrates building Angular applications in a more accessible way.
For more information, see [Accessibility](guide/accessibility).

演示了如何以更易于访问（无障碍）的方式构建 Angular 应用。欲知详情，请参阅[辅助功能](guide/accessibility)。

### Animations

### 动画片

<live-example name="animations"></live-example>

Demonstrates Angular's animation features.
For more information, see [Introduction to Angular animations](guide/animations).

演示了 Angular 的动画特性。欲知详情，请参阅[Angular 动画简介](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).

演示了 Angular 的属性绑定、类绑定和样式绑定。欲知详情，请参阅[属性，类和样式绑定](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).

展示了 Angular 的属性型指令。欲知详情，请参阅[属性型指令](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).

演示了 Angular 的绑定语法。欲知详情，请参阅[绑定语法：概述](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).

演示了 Angular 的内置指令。欲知详情，请参阅[内置指令](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).

演示了 Angular 的内置模板函数。欲知详情，请参阅 [Template 表达式运算符](guide/template-expression-operators)中的 [`$any()` 类型转换函数部分](guide/template-expression-operators#the-any-type-cast-function)。

### Interpolation

### 插值

<live-example name="interpolation"></live-example>

Demonstrates Angular interpolation.
For more information, see [Interpolation and template expressions](guide/interpolation).

演示了 Angular 的插值。欲知详情，请参阅[插值和模板表达式](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).

演示了 Angular 模板中的表达式运算符。欲知详情，请参阅[模板表达式运算符](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).

演示了 Angular 的模板引用变量。欲知详情，请参阅[模板引用变量](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) .

演示了 `<ngcontainer>` 。欲知详情，请参阅[结构型指令](guide/structural-directives)中的 [ngtemplate 部分](guide/structural-directives#ngcontainer)。

### Pipes

### 管道

<live-example name="pipes"></live-example>

Demonstrates Angular pipes.
For more information, see [Transforming Data Using Pipes](guide/pipes).

演示了 Angular 管道。欲知详情，请参阅[使用管道转换数据](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).

演示了 Angular 中的属性绑定。欲知详情，请参阅[属性绑定](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).

演示了 Angular 的结构型指令。欲知详情，请参阅[结构型指令](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).

演示了 Angular 应用中的双向数据绑定。欲知详情，请参阅[双向绑定](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).

全面演示了 Angular 的模板语法。欲知详情，请参阅[模板引用变量](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).

演示了如何响应用户操作。欲知详情，请参阅[用户输入](guide/user-input)。

## Working with components

## 使用组件

These examples demonstrate features of Angular components.

这些例子展示了 Angular 组件的各种特性。

### 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).

演示 Angular 如何在组件之间共享数据。欲知详情，请参阅[组件交互](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).

演示了 Angular 应用中的样式。欲知详情，请参阅[组件样式](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).

演示了如何动态加载组件。欲知详情，请参阅[动态组件加载器](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).

演示如何使用 Angular 自定义元素。欲知详情，请参阅 [Angular 自定义元素概览](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).

演示了如何绑定 Angular 中的事件。欲知详情，请参阅[事件绑定](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).

演示了组件和指令中的 `@Input()` 和 `@Output()`。欲知详情，请参阅 [`@Input()` 和 `@Output()` 属性](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).

演示了 Angular 的生命周期钩子，比如 `ngOnInit()` 和 `ngOnChanges()` 。欲知详情，请参阅[钩入组件生命周期](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).

展示了 Angular 依赖注入的基础知识。欲知详情，请参阅[依赖注入](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).

演示了 Angular 依赖注入的很多特性。欲知详情，请参阅“[依赖注入”](guide/dependency-injection) 。

### Providing dependencies in NgModules

### 在 NgModules 中提供依赖

<live-example name="providers"></live-example>

Demonstrates providing services in NgModules.
For more information, see [Providing dependencies in modules](guide/providers).

演示如何在 NgModules 中提供服务。欲知详情，请参阅[在模块中提供依赖项](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).

演示了 Angular 的注入器树和解析修饰器。欲知详情，请参阅[分层注入器](guide/hierarchical-dependency-injection)。

### Dependency injection with `providers` and `viewProviders`

### 使用 `providers` 和 `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).

演示了 `providers` 和 `viewproviders` 如何影响依赖注入。欲知详情，请参阅[分层注入器](guide/hierarchical-dependency-injection)中的[在 `@Component()` 中提供服务](guide/hierarchical-dependency-injection#providing-services-in-component)部分。

### 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).

演示了 Angular 的解析修饰器，比如 `@Self()` 。关于详细信息，请参阅“[分层注入器”](guide/hierarchical-dependency-injection)中的[“修改服务可见性”](guide/hierarchical-dependency-injection#modifying-service-visibility)部分。

## 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).

演示了 Angular 表达式的基本概念。欲知详情，请参阅 [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).

演示了 Angular 中的响应式表单。欲知详情，请参阅[响应式表单](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).

演示了 Angular 中的模板驱动表单。欲知详情，请参阅[构建模板驱动表单](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).

演示了在 Angular 中验证表单的方法。欲知详情，请参阅[验证表单输入](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).

演示了如何创建动态表单。欲知详情，请参阅[构建动态表单](guide/dynamic-form)。

## NgModules

### NgModules

<live-example name="ngmodules"></live-example>

Demonstrates fundamentals of NgModules.
For more information, see [NgModules](guide/ngmodules).

演示了 NgModules 的基础知识。欲知详情，请参阅[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).

演示了如何在 Angular 中使用特性模块。欲知详情，请参阅[特性模块](guide/feature-modules)。

### Lazy loading NgModules

### 惰性加载 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).

演示了 NgModules 的惰性加载。欲知详情，请参阅[惰性加载特性模块](guide/lazy-loading-ngmodules)。

## Routing

## 路由

### Router

### 路由器

<live-example name="router"></live-example>

Demonstrates Angular's routing features.
For more information, see [Router](guide/router).

演示了 Angular 的路由特性。欲知详情，请参阅[路由器](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).

演示了 Angular 中的基本路由技巧。欲知详情，请参阅[在单页面应用程序中使用 Angular 路由](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).

演示了 Angular 的文档风格指南。欲知详情，请参阅[Angular 文档风格指南](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).

演示了如何通过 HTTP 与服务器交互。欲知详情，请参阅[使用 HTTP 与后端服务进行通信](guide/http)。

## Workflow

## 工作流

### Security

### 安全

<live-example name="security"></live-example>

Demonstrates security concepts in Angular applications.
For more information, see [Security](guide/security).

演示了 Angular 应用中的各种安全概念。欲知详情，请参阅[安全性](guide/security)。

### Testing

### 测试

For the sample app that the testing guides describe, see the <live-example noDownload name="testing">sample app</live-example>.

对于测试指南中描述的范例应用，参阅 <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>.

对于测试指南中的测试，参阅 <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>。

Demonstrates techniques for testing Angular.
For more information, see [Testing](guide/testing).

演示了用来测试 Angular 的技巧。欲知详情，请参阅[测试](guide/testing)。

## Hybrid Angular applications

## 混合 Angular 应用

### AngularJS to Angular concepts: Quick reference

### AngularJS 到 Angular 的概念变迁：快速参考

<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).

为具有 AngularJS 背景的人演示 Angular。要了解更多信息，请参阅 [AngularJS 到 Angular 的概念变迁：快速参考](guide/ajs-quick-reference)。