# 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 ### 入门应用 Introductory application demonstrating Angular features. For more information, see [Getting started](start). 介绍 Angular 特性的入门级应用。欲知详情，请参阅[入门](start)。 ### Launching your app ### 启动你的应用 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 应用的结构 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 ### 设置文档标题 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 ### 英雄之旅：完成后的应用 Completed Tour of Heroes example application. For more information, see [Tour of Heroes app and tutorial](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). 初始的英雄之旅范例应用，从这里开始本教程。欲知详情，请参阅[创建新项目](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). “英雄之旅”范例应用中的第一步。欲知详情，请参阅[英雄编辑器](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). “英雄之旅”范例应用中的第二步。欲知详情，请参阅[显示选择列表](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). “英雄之旅”范例应用中的第三步。欲知详情，请参阅[创建要素组件](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). “英雄之旅”范例应用中的第四步。欲知详情，请参阅[添加服务](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). “英雄之旅”范例应用中的第五步。欲知详情，请参阅[使用路由添加应用内导航](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). “英雄之旅”范例应用中的第六步也是最后一步。欲知详情，请参阅[从服务器获取数据](tutorial/toh-pt6)。 ## Working with templates ## 使用模板 These examples demonstrate features of Angular templates. 这些例子演示了 Angular 模板的各种特性。 ### Accessibility ### 无障碍化 Demonstrates building Angular applications in a more accessible way. For more information, see [Accessibility](guide/accessibility). 演示了如何以更易于访问（无障碍）的方式构建 Angular 应用。欲知详情，请参阅[辅助功能](guide/accessibility)。 ### Animations ### 动画片 Demonstrates Angular's animation features. For more information, see [Introduction to Angular animations](guide/animations). 演示了 Angular 的动画特性。欲知详情，请参阅[Angular 动画简介](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). 演示了 Angular 的属性绑定、类绑定和样式绑定。欲知详情，请参阅[属性，类和样式绑定](guide/attribute-binding)。 ### Attribute directives ### 属性型指令 Demonstrates Angular attribute directives. For more information, see [Attribute directives](guide/attribute-directives). 展示了 Angular 的属性型指令。欲知详情，请参阅[属性型指令](guide/attribute-directives)。 ### Binding syntax ### 绑定语法 Demonstrates Angular's binding syntax. For more information, see [Binding syntax: an overview](guide/binding-syntax). 演示了 Angular 的绑定语法。欲知详情，请参阅[绑定语法：概述](guide/binding-syntax)。 ### Built-in directives ### 内置指令 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 ### 内置模板函数 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 ### 插值 Demonstrates Angular interpolation. For more information, see [Interpolation and template expressions](guide/interpolation). 演示了 Angular 的插值。欲知详情，请参阅[插值和模板表达式](guide/interpolation)。 ### Template expression operators ### 模板表达运算符 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 ### 模板引用变量 Demonstrates Angular's template reference variables. For more information, see [Template reference variables](guide/template-reference-variables). 演示了 Angular 的模板引用变量。欲知详情，请参阅[模板引用变量](guide/template-reference-variables)。 ### `` Demonstrates ``. For more information, see the [ngtemplate section](guide/structural-directives#ngcontainer) of [Structural directives](guide/structural-directives) . 演示了 `` 。欲知详情，请参阅[结构型指令](guide/structural-directives)中的 [ngtemplate 部分](guide/structural-directives#ngcontainer)。 ### Pipes ### 管道 Demonstrates Angular pipes. For more information, see [Transforming Data Using Pipes](guide/pipes). 演示了 Angular 管道。欲知详情，请参阅[使用管道转换数据](guide/pipes)。 ### Property binding ### 属性绑定 Demonstrates property binding in Angular. For more information, see [Property binding](guide/property-binding). 演示了 Angular 中的属性绑定。欲知详情，请参阅[属性绑定](guide/property-binding)。 ### Structural directives ### 结构型指令 Demonstrates Angular structural directives. For more information, see [Structural directives](guide/structural-directives). 演示了 Angular 的结构型指令。欲知详情，请参阅[结构型指令](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). 演示了 Angular 应用中的双向数据绑定。欲知详情，请参阅[双向绑定](guide/two-way-binding)。 ### Template syntax ### 模板语法 Comprehensive demonstration of Angular's template syntax. For more information, see [Template reference variables](guide/template-syntax). 全面演示了 Angular 的模板语法。欲知详情，请参阅[模板引用变量](guide/template-syntax)。 ### User input ### 用户输入 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 ### 组件交互 Demonstrates how Angular shares data between components. For more information, see [Component interaction](guide/component-interaction). 演示 Angular 如何在组件之间共享数据。欲知详情，请参阅[组件交互](guide/component-interaction)。 ### Component styles ### 组件样式 Demonstrates styling in Angular apps. For more information, see [Component styles](guide/component-styles). 演示了 Angular 应用中的样式。欲知详情，请参阅[组件样式](guide/component-styles)。 ### Dynamic component loader ### 动态组件加载器 Demonstrates how to dynamically load components. For more information, see [Dynamic component loader](guide/dynamic-component-loader). 演示了如何动态加载组件。欲知详情，请参阅[动态组件加载器](guide/dynamic-component-loader)。 ### Elements ### 自定义元素 Demonstrates using Angular custom elements. For more information, see [Angular elements overview](guide/elements). 演示如何使用 Angular 自定义元素。欲知详情，请参阅 [Angular 自定义元素概览](guide/elements) 。 ### Event binding ### 事件绑定 Demonstrates binding to events in Angular. For more information, see [Event binding](guide/event-binding). 演示了如何绑定 Angular 中的事件。欲知详情，请参阅[事件绑定](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). 演示了组件和指令中的 `@Input()` 和 `@Output()`。欲知详情，请参阅 [`@Input()` 和 `@Output()` 属性](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). 演示了 Angular 的生命周期钩子，比如 `ngOnInit()` 和 `ngOnChanges()` 。欲知详情，请参阅[钩入组件生命周期](guide/lifecycle-hooks)。 ## Dependency injection ## 依赖注入 ### Dependency injection fundamentals ### 依赖注入的基础知识 Demonstrates fundamentals of Angular dependency injection. For more information, see [Dependency injection](guide/dependency-injection). 展示了 Angular 依赖注入的基础知识。欲知详情，请参阅[依赖注入](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). 演示了 Angular 依赖注入的很多特性。欲知详情，请参阅“[依赖注入”](guide/dependency-injection) 。 ### Providing dependencies in NgModules ### 在 NgModules 中提供依赖 Demonstrates providing services in NgModules. For more information, see [Providing dependencies in modules](guide/providers). 演示如何在 NgModules 中提供服务。欲知详情，请参阅[在模块中提供依赖项](guide/providers)。 ### Hierarchical dependency injection ### 分层依赖注入 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` 进行依赖注入 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 ### 解析修饰器和依赖注入 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 ### 表单概述 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 ### 响应式表单 Demonstrates Angular's reactive forms. For more information, see [Reactive forms](guide/reactive-forms). 演示了 Angular 中的响应式表单。欲知详情，请参阅[响应式表单](guide/reactive-forms)。 ### Template-driven forms ### 模板驱动表单 Demonstrates Angular template-driven forms. For more information, see [Building a template-driven form](guide/forms). 演示了 Angular 中的模板驱动表单。欲知详情，请参阅[构建模板驱动表单](guide/forms)。 ### Form validation ### 表单验证 Demonstrates validating forms in Angular. For more information, see [Validating form input](guide/form-validation). 演示了在 Angular 中验证表单的方法。欲知详情，请参阅[验证表单输入](guide/form-validation)。 ### Dynamic forms ### 动态表单 Demonstrates creating dynamic forms. For more information, see [Building dynamic forms](guide/dynamic-form). 演示了如何创建动态表单。欲知详情，请参阅[构建动态表单](guide/dynamic-form)。 ## NgModules ### NgModules Demonstrates fundamentals of NgModules. For more information, see [NgModules](guide/ngmodules). 演示了 NgModules 的基础知识。欲知详情，请参阅[NgModules](guide/ngmodules) 。 ### Feature modules ### 特性模块 Demonstrates using feature modules in Angular. For more information, see [Feature modules](guide/feature-modules). 演示了如何在 Angular 中使用特性模块。欲知详情，请参阅[特性模块](guide/feature-modules)。 ### Lazy loading NgModules ### 惰性加载 NgModules Demonstrates lazy loading NgModules. For more information, see [Lazy-loading feature modules](guide/lazy-loading-ngmodules). 演示了 NgModules 的惰性加载。欲知详情，请参阅[惰性加载特性模块](guide/lazy-loading-ngmodules)。 ## Routing ## 路由 ### Router ### 路由器 Demonstrates Angular's routing features. For more information, see [Router](guide/router). 演示了 Angular 的路由特性。欲知详情，请参阅[路由器](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). 演示了 Angular 中的基本路由技巧。欲知详情，请参阅[在单页面应用程序中使用 Angular 路由](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). 演示了 Angular 的文档风格指南。欲知详情，请参阅[Angular 文档风格指南](guide/docs-style-guide)。 ## Server communication ## 与服务器通信 ### `HttpClient` Demonstrates server interaction using HTTP. For more information, see [Communicating with backend services using HTTP](guide/http). 演示了如何通过 HTTP 与服务器交互。欲知详情，请参阅[使用 HTTP 与后端服务进行通信](guide/http)。 ## Workflow ## 工作流 ### Security ### 安全 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 sample app. 对于测试指南中描述的范例应用，参阅 sample app。 For the tests featured in the testing guides, see tests. 对于测试指南中的测试，参阅 tests。 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 的概念变迁：快速参考 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)。