填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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.

插值

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> 。欲知詳情,請參閱結構型指令中的 ngtemplate 部分

Demonstrates <ngcontainer>. For more information, see the ngtemplate section of Structural 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() 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.