填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

范例应用

Example applications

下面是 Angular 文档中的范例应用列表。

The following is a list of the example applications in the Angular documentation.

基础知识

Fundamentals

这些例子演示了一些最小、最基本的概念。

These examples demonstrate minimal, fundamental concepts.

入门应用

Getting started application

现场演练 / 下载范例

介绍 Angular 特性的入门级应用。欲知详情,请参阅入门

Introductory application demonstrating Angular features. For more information, see Getting started.

启动你的应用

Launching your app

现场演练 / 下载范例

演示了 Angular 的启动过程。欲知详情,请参阅使用根模块启动应用

Demonstrates the Angular bootstrapping process. For more information, see Launching your app with a root module.

Angular 应用的结构

Structure of Angular applications

现场演练 / 下载范例

演示了 Angular 应用的基本架构。欲知详情,请参阅Angular 概念简介

Demonstrates the fundamental architecture of Angular applications. For more information, see Introduction to Angular concepts.

设置文档标题

Setting the document title

现场演练 / 下载范例

演示了如何在浏览器中自定义文档标题。欲知详情,请参阅设置文档标题

Demonstrates customizing the document title in the browser. For more information, see Set the document title.

英雄之旅教程

Tour of Heroes tutorial application

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

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.

英雄之旅:创建一个应用

Tour of Heroes: Creating an application

现场演练 / 下载范例

初始的英雄之旅范例应用,从这里开始本教程。欲知详情,请参阅创建新项目

Initial Tour of Heroes example application for beginning the tutorial. For more information, see Create a new project.

英雄之旅:英雄编辑器

Tour of Heroes: The hero editor

现场演练 / 下载范例

“英雄之旅”范例应用中的第一步。欲知详情,请参阅英雄编辑器

First step of the Tour of Heroes example application. For more information, see The hero editor.

英雄之旅:显示一个选取列表

Tour of Heroes: Display a selection list

现场演练 / 下载范例

“英雄之旅”范例应用中的第二步。欲知详情,请参阅显示选择列表

Second step of the Tour of Heroes example application. For more information, see Display a selection list.

英雄之旅:创建一个特性组件

Tour of Heroes: Create a feature component

现场演练 / 下载范例

“英雄之旅”范例应用中的第三步。欲知详情,请参阅创建要素组件

Third step of the Tour of Heroes example application. For more information, see Create a feature component.

英雄之旅:添加服务

Tour of Heroes: Add services

现场演练 / 下载范例

“英雄之旅”范例应用中的第四步。欲知详情,请参阅添加服务

Fourth step of the Tour of Heroes example application. For more information, see Add services.

英雄之旅:用路由添加应用内导航

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.

英雄之旅:从服务器上获取数据

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.

使用模板

Working with templates

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

These examples demonstrate features of Angular templates.

无障碍化

Accessibility

现场演练 / 下载范例

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

Demonstrates building Angular applications in a more accessible way. For more information, see Accessibility.

动画片

Animations

现场演练 / 下载范例

演示了 Angular 的动画特性。欲知详情,请参阅Angular 动画简介

Demonstrates Angular's animation features. For more information, see Introduction to Angular animations.

属性,类和样式绑定

Attribute, class, and style bindings

现场演练 / 下载范例

演示了 Angular 的属性绑定、类绑定和样式绑定。欲知详情,请参阅属性,类和样式绑定

Demonstrates Angular attribute, class, and style bindings. For more information, see Attribute, class, and style bindings.

属性型指令

Attribute directives

现场演练 / 下载范例

展示了 Angular 的属性型指令。欲知详情,请参阅属性型指令

Demonstrates Angular attribute directives. For more information, see Attribute directives.

绑定语法

Binding syntax

现场演练 / 下载范例

演示了 Angular 的绑定语法。欲知详情,请参阅绑定语法:概述

Demonstrates Angular's binding syntax. For more information, see Binding syntax: an overview.

内置指令

Built-in directives

现场演练 / 下载范例

演示了 Angular 的内置指令。欲知详情,请参阅内置指令

Demonstrates Angular built-in directives. For more information, see Built-in directives.

内置模板函数

Built-in template functions

现场演练 / 下载范例

演示了 Angular 的内置模板函数。欲知详情,请参阅 Template 表达式运算符中的 $any() 类型转换函数部分

Demonstrates Angular built-in template functions. For more information, see the $any() type cast function section of Template expression operators.

内容投影

Content projection

现场演练 / 下载范例

演示在创建可复用组件时如何使用 Angular 的内容投影功能。

Demonstrates how to use Angular's content projection feature when creating reusable components.

插值

Interpolation

现场演练 / 下载范例

演示了 Angular 的插值。欲知详情,请参阅插值和模板表达式

Demonstrates Angular interpolation. For more information, see Interpolation and template expressions.

模板表达运算符

Template expression operators

现场演练 / 下载范例

演示了 Angular 模板中的表达式运算符。欲知详情,请参阅模板表达式运算符

Demonstrates expression operators in Angular templates. For more information, see Template expression operators.

模板引用变量

Template reference variables

现场演练 / 下载范例

演示了 Angular 的模板引用变量。欲知详情,请参阅模板引用变量

Demonstrates Angular's template reference variables. For more information, see Template reference variables.

<ngcontainer>

现场演练 / 下载范例

演示了 <ngcontainer> 。欲知详情,请参阅内置指令中的 ng-container 部分

Demonstrates <ngcontainer>. For more information, see the ng-container section of Built-in directives .

管道

Pipes

现场演练 / 下载范例

演示了 Angular 管道。欲知详情,请参阅使用管道转换数据

Demonstrates Angular pipes. For more information, see Transforming Data Using Pipes.

属性绑定

Property binding

现场演练 / 下载范例

演示了 Angular 中的属性绑定。欲知详情,请参阅属性绑定

Demonstrates property binding in Angular. For more information, see Property binding.

结构型指令

Structural directives

现场演练 / 下载范例

演示了 Angular 的结构型指令。欲知详情,请参阅结构型指令

Demonstrates Angular structural directives. For more information, see Structural directives.

双向绑定

Two-way binding

现场演练 / 下载范例

演示了 Angular 应用中的双向数据绑定。欲知详情,请参阅双向绑定

Demonstrates two-way data binding in Angular applications. For more information, see Two-way binding.

模板语法

Template syntax

现场演练 / 下载范例

全面演示了 Angular 的模板语法。欲知详情,请参阅模板引用变量

Comprehensive demonstration of Angular's template syntax. For more information, see Template reference variables.

用户输入

User input

现场演练 / 下载范例

演示了如何响应用户操作。欲知详情,请参阅用户输入

Demonstrates responding to user actions. For more information, see User input.

使用组件

Working with components

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

These examples demonstrate features of Angular components.

组件交互

Component interaction

现场演练 / 下载范例

演示 Angular 如何在组件之间共享数据。欲知详情,请参阅组件交互

Demonstrates how Angular shares data between components. For more information, see Component interaction.

组件样式

Component styles

现场演练 / 下载范例

演示了 Angular 应用中的样式。欲知详情,请参阅组件样式

Demonstrates styling in Angular apps. For more information, see Component styles.

动态组件加载器

Dynamic component loader

现场演练 / 下载范例

演示了如何动态加载组件。欲知详情,请参阅动态组件加载器

Demonstrates how to dynamically load components. For more information, see Dynamic component loader.

自定义元素

Elements

现场演练 / 下载范例

演示如何使用 Angular 自定义元素。欲知详情,请参阅 Angular 自定义元素概览

Demonstrates using Angular custom elements. For more information, see Angular elements overview.

事件绑定

Event binding

现场演练 / 下载范例

演示了如何绑定 Angular 中的事件。欲知详情,请参阅事件绑定

Demonstrates binding to events in Angular. For more information, see Event binding.

@Input()@Output()

@Input() and @Output()

现场演练 / 下载范例

演示了组件和指令中的 @Input()@Output()。欲知详情,请参阅 @Input()@Output() 属性

Demonstrates @Input() and @Output() in components and directives. For more information, see @Input() and @Output() properties.

生命周期钩子

Lifecycle hooks

现场演练 / 下载范例

演示了 Angular 的生命周期钩子,比如 ngOnInit()ngOnChanges()。欲知详情,请参阅钩入组件生命周期

Demonstrates Angular lifecycle hooks such as ngOnInit() and ngOnChanges(). For more information, see Hooking into the component lifecycle.

依赖注入

Dependency injection

依赖注入的基础知识

Dependency injection fundamentals

现场演练 / 下载范例

展示了 Angular 依赖注入的基础知识。欲知详情,请参阅依赖注入

Demonstrates fundamentals of Angular dependency injection. For more information, see Dependency injection.

依赖注入特性

Dependency injection features

现场演练 / 下载范例

演示了 Angular 依赖注入的很多特性。欲知详情,请参阅“依赖注入”

Demonstrates many of the features of Angular dependency injection. For more information, see Dependency injection in action.

在 NgModules 中提供依赖

Providing dependencies in NgModules

现场演练 / 下载范例

演示如何在 NgModules 中提供服务。欲知详情,请参阅在模块中提供依赖项

Demonstrates providing services in NgModules. For more information, see Providing dependencies in modules.

分层依赖注入

Hierarchical dependency injection

现场演练 / 下载范例

演示了 Angular 的注入器树和解析修饰器。欲知详情,请参阅分层注入器

Demonstrates Angular injector trees and resolution modifiers. For more information, see Hierarchical injectors.

使用 providersviewProviders 进行依赖注入

Dependency injection with providers and viewProviders

现场演练 / 下载范例

演示了 providersviewproviders 如何影响依赖注入。欲知详情,请参阅分层注入器中的@Component() 中提供服务部分。

Demonstrates how providers and viewproviders affect dependency injection. For more information, see the Providing services in @Component()section of Hierarchical injectors.

解析修饰器和依赖注入

Resolution modifiers and dependency injection

现场演练 / 下载范例

演示了 Angular 的解析修饰器,比如 @Self()。关于详细信息,请参阅“分层注入器”中的“修改服务可见性”部分。

Demonstrates Angular's resolution modifiers, such as @Self(). For more information, see the Modifying service visibility section of Hierarchical injectors.

表单

Forms

表单概述

Forms overview

现场演练 / 下载范例

演示了 Angular 表达式的基本概念。欲知详情,请参阅 Angular 中的表单简介

Demonstrates foundational concepts of Angular forms. For more information, see Introduction to forms in Angular.

响应式表单

Reactive forms

现场演练 / 下载范例

演示了 Angular 中的响应式表单。欲知详情,请参阅响应式表单

Demonstrates Angular's reactive forms. For more information, see Reactive forms.

模板驱动表单

Template-driven forms

现场演练 / 下载范例

演示了 Angular 中的模板驱动表单。欲知详情,请参阅构建模板驱动表单

Demonstrates Angular template-driven forms. For more information, see Building a template-driven form.

表单验证

Form validation

现场演练 / 下载范例

演示了在 Angular 中验证表单的方法。欲知详情,请参阅验证表单输入

Demonstrates validating forms in Angular. For more information, see Validating form input.

动态表单

Dynamic forms

现场演练 / 下载范例

演示了如何创建动态表单。欲知详情,请参阅构建动态表单

Demonstrates creating dynamic forms. For more information, see Building dynamic forms.

NgModules

NgModules

现场演练 / 下载范例

演示了 NgModules 的基础知识。欲知详情,请参阅NgModules

Demonstrates fundamentals of NgModules. For more information, see NgModules.

特性模块

Feature modules

现场演练 / 下载范例

演示了如何在 Angular 中使用特性模块。欲知详情,请参阅特性模块

Demonstrates using feature modules in Angular. For more information, see Feature modules.

惰性加载 NgModules

Lazy loading NgModules

现场演练 / 下载范例

演示了 NgModules 的惰性加载。欲知详情,请参阅惰性加载特性模块

Demonstrates lazy loading NgModules. For more information, see Lazy-loading feature modules.

路由

Routing

路由器

Router

现场演练 / 下载范例

演示了 Angular 的路由特性。欲知详情,请参阅路由器

Demonstrates Angular's routing features. For more information, see Router.

路由器教程

Router tutorial

现场演练 / 下载范例

演示了 Angular 中的基本路由技巧。欲知详情,请参阅在单页面应用程序中使用 Angular 路由

Demonstrates Angular's fundamental routing techniques. For more information, see Using Angular routes in a single-page application.

给文档贡献者的风格指南

Style guide for Documentation contributions

现场演练 / 下载范例

演示了 Angular 的文档风格指南。欲知详情,请参阅Angular 文档风格指南

Demonstrates Angular documentation style guidelines. For more information, see Angular documentation style guide.

与服务器通信

Server communication

HttpClient

现场演练 / 下载范例

演示了如何通过 HTTP 与服务器交互。欲知详情,请参阅使用 HTTP 与后端服务进行通信

Demonstrates server interaction using HTTP. For more information, see Communicating with backend services using HTTP.

工作流

Workflow

安全

Security

现场演练 / 下载范例

演示了 Angular 应用中的各种安全概念。欲知详情,请参阅安全性

Demonstrates security concepts in Angular applications. For more information, see Security.

测试

Testing

对于测试指南中描述的范例应用,参阅sample appsample app

For the sample app that the testing guides describe, see thesample appsample app.

对于测试指南中的测试,参阅teststests

For the tests featured in the testing guides, seeteststests.

演示了用来测试 Angular 的技巧。欲知详情,请参阅测试

Demonstrates techniques for testing Angular. For more information, see Testing.

混合 Angular 应用

Hybrid Angular applications

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

AngularJS to Angular concepts: Quick reference

现场演练 / 下载范例

为具有 AngularJS 背景的人演示 Angular。要了解更多信息,请参阅 AngularJS 到 Angular 的概念变迁:快速参考

Demonstrates Angular for those with an AngularJS background. For more information, see AngularJS to Angular concepts: Quick reference.