填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Angular 詞彙表

Glossary

Angular 有自己的詞彙表。 雖然大多數 Angular 短語都是日常用語或計算機術語,但是在 Angular 體系中,它們有特別的含義。

Angular has its own vocabulary. Most Angular terms are common English words or computing terms that have a specific meaning within the Angular system.

本詞彙表列出了常用術語和少量具有反常或意外含義的不常用術語。

This glossary lists the most prominent terms and a few less familiar ones with unusual or unexpected definitions.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

預 (ahead-of-time, AOT) 編譯

ahead-of-time (AOT) compilation

Angular 的預先(AOT)編譯器可以在編譯期間把 Angular 的 HTML 程式碼和 TypeScript 程式碼轉換成高效的 JavaScript 程式碼,這樣瀏覽器就可以直接下載並執行它們。 對於產品環境,這是最好的編譯模式,相對於即時 (JIT) 編譯而言,它能減小載入時間,並提高效能。

The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code into efficient JavaScript code during the build phase, before the browser downloads and runs that code. This is the best compilation mode for production environments, with decreased load time and increased performance compared to just-in-time (JIT) compilation.

使用命令列工具 ngc 來編譯你的應用之後,就可以直接啟動一個模組工廠,這意味著你不必再在 JavaScript 打包檔案中包含 Angular 編譯器。

By compiling your application using the ngc command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle.

Angular 元素(element)

Angular element

被包裝成自訂元素的 Angular 元件

An Angular component packaged as a custom element.

參閱 Angular 元素 一文。

Learn more in Angular Elements Overview.

註解(Annotation)

Annotation

一種為類別提供元資料的結構。參閱 裝飾器

A structure that provides metadata for a class. See decorator.

應用外殼(app-shell)

app-shell

應用外殼是一種在建構期間透過路由為應用渲染出部分內容的方式。 這樣就能為使用者快速渲染出一個有意義的首屏頁面,因為瀏覽器可以在初始化指令碼之前渲染出靜態的 HTML 和 CSS。

App shell is a way to render a portion of your application via a route at build time. This gives users a meaningful first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript.

欲知詳情,參閱應用外殼模型

Learn more in The App Shell Model.

你可以使用 Angular CLI 來產生一個應用外殼。 它可以在瀏覽器下載完整版應用之前,先快速啟動一個靜態渲染頁面(所有頁面的公共骨架)來增強使用者體驗,等程式碼載入完畢後再自動切換到完整版。

You can use the Angular CLI to generate an app shell. This can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.

參閱 Service Worker 與 PWA

See also Service Worker and PWA.

建築師(Architect)

Architect

CLI 用來根據所提供的配置執行復雜任務(比如編譯和執行測試)的工具。 建築師是一個外殼,它用來對一個指定的目標配置來執行一個建構器(builder) (定義在一個 npm 套件中)。

The tool that the CLI uses to perform complex tasks such as compilation and test running, according to a provided configuration. Architect is a shell that runs a builder (defined in an npm package) with a given target configuration.

工作空間配置檔案中,"architect" 區可以為建築師的各個建構器提供配置項。

In the workspace configuration file, an "architect" section provides configuration options for Architect builders.

比如,內建的 linting 建構器定義在 @angular-devkit/build_angular:tslint 套件中,它使用 TSLint 工具來執行 linting 操作,其配置是在 tslint.json 檔案中指定的。

For example, a built-in builder for linting is defined in the package @angular-devkit/build_angular:tslint, which uses the TSLint tool to perform linting, with a configuration specified in a tslint.json file.

使用 CLI 命令 ng run可以透過指定與某個建構器相關聯的目標配置來呼叫此建構器。 整合器(Integrator)可以新增一些建構器來啟用某些工具和工作流,以便透過 Angular CLI 來執行它。比如,自訂建構器可以把 CLI 命令(如 ng buildng test)的內建實現替換為第三方工具。

Use the CLI command ng runto invoke a builder by specifying a target configuration associated with that builder. Integrators can add builders to enable tools and workflows to run through the Angular CLI. For example, a custom builder can replace the third-party tools used by the built-in implementations for CLI commands such as ng build or ng test.

屬性型指令(attribute directives)

attribute directives

指令 (directive)的一種。可以監聽或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、元件的行為。通常用作 HTML 屬性,就像它的名字所暗示的那樣。

A category of directive that can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name.

要了解更多,參閱屬性型指令

Learn more in Attribute Directives.

繫結 (binding)

binding

廣義上是指把變數或屬性設定為某個資料值的一種實踐。 在 Angular 中,一般是指資料繫結,它會根據資料物件屬性的值來設定 DOM 物件的屬性。

Generally, the practice of setting a variable or property to a data value. Within Angular, typically refers to data binding, which coordinates DOM object properties with data object properties.

有時也會指在“令牌(Token)”和依賴提供者(Provider) 之間的依賴注入 繫結。

Sometimes refers to a dependency-injection binding between a token and a dependency provider.

啟動/引導 (bootstrap)

bootstrap

一種用來初始化和啟動應用或系統的途徑。

A way to initialize and launch an app or system.

在 Angular 中,應用的根模組(AppModule)有一個 bootstrap 屬性,用於指出該應用的的最上層元件。 在引導期間,Angular 會建立這些元件,並插入到宿主頁面 index.html 中。 你可以在同一個 index.html 中引導多個應用,每個應用都有一些自己的元件。

In Angular, an app's root NgModule (AppModule) has a bootstrap property that identifies the app's top-level components. During the bootstrap process, Angular creates and inserts these components into the index.html host web page. You can bootstrap multiple apps in the same index.html. Each app contains its own components.

要了解更多,參閱引導一章。

Learn more in Bootstrapping.

建構器(Builder)

builder

一個函式,它使用 Architect API 來執行復雜的過程,比如建構或測試。 建構器的程式碼定義在一個 npm 套件中。

A function that uses the Architect API to perform a complex process such as "build" or "test". The builder code is defined in an npm package.

比如,BrowserBuilder 針對某個瀏覽器目標執行 webpack 建構,而 KarmaBuilder 則啟動 Karma 伺服器,並且針對單元測試執行 webpack 建構。

For example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests.

CLI 命令 ng run使用一個特定的目標配置來呼叫建構器。 工作空間配置檔案 angular.json 中包含這些內建建構器的預設配置。

The CLI command ng runinvokes a builder with a specific target configuration. The workspace configuration file, angular.json, contains default configurations for built-in builders.

大小寫型別(case types)

case types

Angular 使用大小寫約定來區分多種名字,詳見風格指南中的 "命名" 一節。下面是這些大小寫型別的彙總表:

Angular uses capitalization conventions to distinguish the names of various types, as described in the naming guidelines section of the Style Guide. Here's a summary of the case types:

  • 小駝峰形式(camelCase):符號、屬性、方法、管道名、非元件指令的選擇器、常量。 小駝峰(也叫標準駝峰)形式的第一個字母要使用小寫形式。比如 "selectedHero"。

    camelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants. Standard or lower camel case uses lowercase on the first letter of the item. For example, "selectedHero".

  • 大駝峰形式(UpperCamelCase)或叫帕斯卡形式(PascalCase):類別名稱(包括用來定義元件、介面、NgModule、指令、管道等的類別)。 大駝峰形式的第一個字母要使用大寫形式。比如 "HeroListComponent"。

    UpperCamelCase (or PascalCase): Class names, including classes that define components, interfaces, NgModules, directives, and pipes, Upper camel case uses uppercase on the first letter of the item. For example, "HeroListComponent".

  • 中線形式(dash-case)或叫烤串形式(kebab-case):檔名中的描述部分,元件的選擇器。比如 "app-hero-list"。

    dash-case (or "kebab-case"): Descriptive part of file names, component selectors. For example, "app-hero-list".

  • 下劃線形式(underscore_case)或叫蛇形形式(snake_case):在 Angular 中沒有典型用法。蛇形形式使用下劃線連線各個單詞。 比如 "convert_link_mode"。

    underscore_case (or "snake_case"): Not typically used in Angular. Snake case uses words connected with underscores. For example, "convert_link_mode".

  • 大寫下劃線形式(UPPER_UNDERSCORE_CASE)或叫大寫蛇形形式(UPPER_SNAKE_CASE):傳統的常量寫法(可以接受,但更推薦用小駝峰形式(camelCase)) 大蛇形形式使用下劃線分隔的全大寫單詞。比如 "FIX_ME"。

    UPPER_UNDERSCORE_CASE (or UPPER_SNAKE_CASE, or SCREAMING_SNAKE_CASE): Traditional for constants (acceptable, but prefer camelCase). Upper snake case uses words in all capital letters connected with underscores. For example, "FIX_ME".

變更檢測(change detection)

change detection

Angular 框架會透過此機制將應用程式 UI 的狀態與資料的狀態同步。變更檢測器在執行時會檢查資料模型的當前狀態,並在下一輪迭代時將其和先前儲存的狀態進行比較。

The mechanism by which the Angular framework synchronizes the state of an application's UI with the state of the data. The change detector checks the current state of the data model whenever it runs, and maintains it as the previous state to compare on the next iteration.

當應用邏輯更改元件資料時,繫結到檢視中 DOM 屬性上的值也要隨之更改。變更檢測器負責更新檢視以反映當前的資料模型。類似地,使用者也可以與 UI 進行互動,從而引發要更改資料模型狀態的事件。這些事件可以觸發變更檢測。

As the application logic updates component data, values that are bound to DOM properties in the view can change. The change detector is responsible for updating the view to reflect the current data model. Similarly, the user can interact with the UI, causing events that change the state of the data model. These events can trigger change detection.

使用預設的(“CheckAlways”)變更檢測策略,變更檢測器將遍歷每個檢視模型上的檢視層次結構,以檢查範本中的每個資料繫結屬性。在第一階段,它將所依賴的資料的當前狀態與先前狀態進行比較,並收集更改。在第二階段,它將更新頁面上的 DOM 以反映出所有新的資料值。

Using the default ("CheckAlways") change-detection strategy, the change detector goes through the view hierarchy on each VM turn to check every data-bound property in the template. In the first phase, it compares the current state of the dependent data with the previous state, and collects changes. In the second phase, it updates the page DOM to reflect any new data values.

如果設定了 OnPush(“CheckOnce”)變更檢測策略,則變更檢測器僅在顯式呼叫它或由 @Input 參考的變化或觸發事件處理程式時執行。這通常可以提高效能。欲知詳情,參閱優化 Angular 的變更檢測

If you set the OnPush ("CheckOnce") change-detection strategy, the change detector runs only when explicitly invoked, or when it is triggered by an Input reference change or event handler. This typically improves performance. For more information, see Optimize Angular's change detection.

類別裝飾器(class decorator)

class decorator

裝飾器會出現在類別定義的緊前方,用來宣告該類別具有指定的型別,並且提供適合該型別的元資料。

A decorator that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type.

可以用下列裝飾器來宣告 Angular 的類別:

The following decorators can declare Angular class types:

類別欄位裝飾器(class field decorator)

class field decorator

出現在類別定義中屬性緊前方的裝飾器語句用來宣告該欄位的型別。比如 @Input@Output

A decorator statement immediately before a field in a class definition that declares the type of that field. Some examples are @Input and @Output.

集合(collection)

collection

在 Angular 中,是指收錄在同一個 npm 套件 中的一組原理圖(schematics)

In Angular, a set of related schematics collected in an npm package.

命令列介面(CLI)

command-line interface (CLI)

Angular CLI 是一個命令列工具,用於管理 Angular 的開發週期。它用於為工作區專案建立初始的腳手架,並且執行產生器(schematics)來為初始產生的版本新增或修改各類別程式碼。 CLI 支援開發週期中的所有階段,比如建構、測試、打套件和部署。

The Angular CLI is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a workspace or project, and to run schematics that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment.

參閱 Schematics CLI

See also Schematics CLI.

元件 (component)

component

一個帶有 @Component() 裝飾器的類別,和它的伴生範本關聯在一起。元件類別及其範本共同定義了一個檢視

A class with the @Component() decorator that associates it with a companion template. Together, the component class and template define a view.

元件是指令的一種特例。@Component() 裝飾器擴充套件了 @Directive() 裝飾器,增加了一些與範本有關的特性。

A component is a special type of directive. The @Component() decorator extends the @Directive() decorator with template-oriented features.

Angular 的元件類別負責暴露資料,並透過資料繫結機制來處理絕大多數檢視的顯示和使用者互動邏輯。

An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through data binding.

要了解更多關於元件類別、範本和檢視的知識,參閱 架構概覽 一章。

Read more about component classes, templates, and views in Introduction to Angular concepts.

配置(configuration)

configuration

參閱工作空間配置

See workspace configuration

內容投影

content projection

一種從元件外把 DOM 內容插入到當前元件檢視的特定位置上的方式。

A way to insert DOM content from outside a component into the component's view in a designated spot.

欲知詳情,參閱內容變化的應對方式

For more information, see Responding to changes in content.

自訂元素(Custom element)

custom element

一種 Web 平臺的特性,目前已經被絕大多數瀏覽器支援,在其它瀏覽器中也可以透過Polyfill指令碼獲得支援(參閱瀏覽器支援)。

A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see Browser support).

這種自訂元素特性透過允許你定義標籤(其內容是由 JavaScript 程式碼來建立和控制的)來擴充套件 HTML。當自訂元素(也叫 Web Component)被新增到 CustomElementRegistry 之後就會被瀏覽器識別。

The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a web component) is recognized by a browser when it's added to the CustomElementRegistry.

你可以使用 API 來轉換 Angular 元件,以便它能夠註冊進瀏覽器中,並且可以用在你往 DOM 中新增的任意 HTML 中。 自訂元素標籤可以把元件的檢視(包括變更檢測和資料繫結功能)插入到不受 Angular 控制的內容中。

You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing.

參閱 Angular 元素

See Angular element.

參閱載入動態元件

See also dynamic component loading.

資料繫結 (data binding)

data binding

這個過程可以讓應用程式將資料展示給使用者,並對使用者的操作(點選、觸屏、按鍵)做出迴應。

A process that allows apps to display data values to a user and respond to user actions (such as clicks, touches, and keystrokes).

在資料繫結機制下,你只要宣告一下 HTML 部件和資料來源之間的關係,把細節交給框架去處理。 而以前的手動操作過程是:將資料推送到 HTML 頁面中、新增事件監聽器、從螢幕獲取變化後的資料,並更新應用中的值。

In data binding, you declare the relationship between an HTML widget and a data source and let the framework handle the details. Data binding is an alternative to manually pushing application data values into HTML, attaching event listeners, pulling changed values from the screen, and updating application data values.

更多的繫結形式,見範本語法

Read about the following forms of binding in Angular's Template Syntax:

可宣告物件(declarable)

declarable

類別的一種型別,你可以把它們新增到 NgModuledeclarations 列表中。 你可以宣告元件指令管道

A class type that you can add to the declarations list of an NgModule. You can declare components, directives, and pipes.

不要宣告:

Don't declare the following:

  • 已經在其它 NgModule 中宣告過的類別

    A class that's already declared in another NgModule

  • 從其它套件中匯入的指令陣列。比如,不要再次宣告來自 @angular/forms 中的 FORMS_DIRECTIVES

    An array of directives imported from another package. For example, don't declare FORMS_DIRECTIVES from @angular/forms

  • NgModule 類別

    NgModule classes

  • 服務類別

    Service classes

  • 非 Angular 的類別和物件,比如:字串、數字、函式、實體模型、配置、業務邏輯和輔助類別

    Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes

裝飾器(decorator | decoration)

decorator | decoration

一個函式,用來修飾緊隨其後的類別或屬性定義。 裝飾器(也叫註解)是 JavaScript 的一種語言特性,是一項位於階段 2(stage 2)的試驗特性。

A function that modifies a class or property definition. Decorators (also called annotations) are an experimental (stage 2) JavaScript language feature. TypeScript adds support for decorators.

Angular 定義了一些裝飾器,用來為類別或屬性附加元資料,來讓自己知道那些類別或屬性的含義,以及該如何處理它們。

Angular defines decorators that attach metadata to classes or properties so that it knows what those classes or properties mean and how they should work.

參閱 類別裝飾器類別屬性裝飾器

See class decorator, class field decorator.

依賴注入(dependency injection)

dependency injection (DI)

依賴注入既是設計模式,同時又是一種機制:當應用程式的一些部件(即一些依賴)需要另一些部件時, 利用依賴注入來建立被請求的部件,並將它們注入到需要它們的部件中。

A design pattern and mechanism for creating and delivering some parts of an application (dependencies) to other parts of an application that require them.

在 Angular 中,依賴通常是服務,但是也可以是值,比如字串或函式。應用的注入器(它是在啟動期間自動建立的)會使用該服務或值的配置好的提供者來按需實例化這些依賴。各個不同的提供者可以為同一個服務提供不同的實現。

In Angular, dependencies are typically services, but they also can be values, such as strings or functions. An injector for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured provider of the service or value.

要了解更多,參閱Angular 中的依賴注入一章。

Learn more in Dependency Injection in Angular.

DI 令牌(Token)

DI token

一種用來查閱的令牌,它關聯到一個依賴提供者,用於依賴注入系統中。

A lookup token associated with a dependency provider, for use with the dependency injection system.

差異化載入

differential loading

一種建構技術,它會為同一個應用建立兩個發佈套件。一個是較小的發佈套件,是針對現代瀏覽器的。另一個是較大的發佈套件,能讓該應用正確的執行在像 IE 11 這樣的老式瀏覽器上,這些瀏覽器不能支援全部現代瀏覽器的 API。

A build technique that creates two bundles for an application. One smaller bundle is for modern browsers. A second, larger bundle allows the application to run correctly in older browsers (such as IE11) that do not support all modern browser APIs.

欲知詳情,參閱 Deployment 一章。

For more information, see the Deployment guide.

指令 (directive)

directive

一個可以修改 DOM 結構或修改 DOM 和元件資料模型中某些屬性的類別。 指令類別的定義緊跟在 @Directive() 裝飾器之後,以提供元資料。

A class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a @Directive() decorator that supplies metadata.

指令類別幾乎總與 HTML 元素或屬性 (attribute) 相關。 通常會把這些 HTML 元素或者屬性 (attribute) 當做指令本身。 當 Angular 在 HTML 範本中發現某個指令時,會建立與之相匹配的指令類別的實例,並且把這部分 DOM 的控制權交給它。

A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML template, it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.

指令分為三類別:

There are three categories of directive:

Angular 提供了一些以 ng 為字首的內建指令。你也可以建立新的指令來實現自己的功能。 你可以為自訂指令關聯一個選擇器(一種形如 <my-directive> 的 HTML 標記),以擴充套件範本語法,從而讓你能在應用中使用它。

Angular supplies a number of built-in directives that begin with the ng prefix. You can also create new directives to implement your own functionality. You associate a selector (an HTML tag such as <my-directive>) with a custom directive, thereby extending the template syntax that you can use in your apps.

領域特定語言(DSL)

domain-specific language (DSL)

一種特殊用途的函式庫或 API,參閱領域特定語言詞條。

A special-purpose library or API; see Domain-specific language.

Angular 使用領域特定語言擴充套件了 TypeScript,用於與 Angular 應用相關的許多領域。這些 DSL 都定義在 NgModule 中,比如 動畫表單路由與導航

Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as animations, forms, and routing and navigation.

動態元件載入(dynamic component loading)

dynamic component loading

一種在執行期間把元件新增到 DOM 中的技術,它需要你從編譯期間排除該元件,然後,當你把它新增到 DOM 中時,再把它接入 Angular 的變更檢測與事件處理框架。

A technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM.

參閱自訂元素,它提供了一種更簡單的方式來達到相同的效果。

See also custom element, which provides an easier path with the same result.

急性載入(Eager Loading)

eager loading

在啟動時載入的 NgModule 和元件被稱為急性載入,與之相對的是那些在執行期間才載入的方式(延遲載入)。 參閱延遲載入

NgModules or components that are loaded on launch are called eager-loaded, to distinguish them from those that are loaded at run time (lazy-loaded). See lazy loading.

ECMAScript 語言

ECMAScript

官方 JavaScript 語言規範

The official JavaScript language specification.

並不是所有瀏覽器都支援最新的 ECMAScript 標準,不過你可以使用轉譯器(比如TypeScript)來用最新特性寫程式碼,然後它會被轉譯成可以在瀏覽器的其它版本上執行的程式碼。

Not all browsers support the latest ECMAScript standard, but you can use a transpiler (like TypeScript) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.

要了解更多,參閱瀏覽器支援頁。

To learn more, see Browser Support.

元素(Element)

element

Angular 定義了 ElementRef 類別來包裝與渲染有關的原生 UI 元素。這讓你可以在大多數情況下使用 Angular 的範本和資料繫結機制來訪問 DOM 元素,而不必再參考原生元素。

Angular defines an ElementRef class to wrap render-specific native UI elements. In most cases, this allows you to use Angular templates and data binding to access DOM elements without reference to the native element.

本文件中一般會使用元素(Element)來指代 ElementRef 的實例,注意與 DOM 元素(你必要時你可以直接訪問它)區分開。

The documentation generally refers to elements (ElementRef instances), as distinct from DOM elements (which can be accessed directly if necessary).

可以對比下自訂元素

Compare to custom element.

入口點(Entry Point)

entry point

JavaScript 模組的目的是供 npm 套件的使用者進行匯入。入口點模組通常會重新匯出來自其它內部模組的一些符號。每個套件可以包含多個入口點。比如 @angular/core 就有兩個入口點模組,它們可以使用名字 @angular/core@angular/core/testing 進行匯入。

A JavaScript module that is intended to be imported by a user of an npm package. An entry-point module typically re-exports symbols from other internal modules. A package can contain multiple entry points. For example, the @angular/core package has two entry-point modules, which can be imported using the module names @angular/core and @angular/core/testing.

表單控制元件(form control)

form control

一個 FormControl 實例,它是 Angular 表單的基本構成要素。它會和 FormGroupFormArray 一起,追蹤表單輸入元素的值、有效性和狀態。

A instance of FormControl, which is a fundamental building block for Angular forms. Together with FormGroup and FormArray, tracks the value, validation, and status of a form input element.

欲知詳情,參閱 Angular 表單簡介

Read more forms in the Introduction to forms in Angular.

表單模型(form model)

form model

是指在指定的時間點,表單輸入元素的值和驗證狀態的"事實之源"。當使用響應式表單時,表單模型會在元件類別中顯式建立。當使用範本驅動表單時,表單模型是由一些指令隱式建立的。

The "source of truth" for the value and validation status of a form input element at a given point in time. When using reactive forms, the form model is created explicitly in the component class. When using template-driven forms, the form model is implicitly created by directives.

要深入瞭解響應式表單和範本驅動表單,參閱 Angular 表單簡介

Learn more about reactive and template-driven forms in the Introduction to forms in Angular.

表單驗證(form validation)

form validation

一種檢查,當表單值發生變化時執行,並根據預定義的約束來彙報指定的這些值是否正確並完全。響應式表單使用驗證器函式,而範本驅動表單則使用驗證器指令

A check that runs when form values change and reports whether the given values are correct and complete, according to the defined constraints. Reactive forms apply validator functions. Template-driven forms use validator directives.

要了解更多,參閱表單驗證器

To learn more, see Form Validation.

不可變性(immutability)

immutability

是否能夠在建立之後修改值的狀態。響應式表單會執行不可變性的更改,每次更改資料模型都會產生一個新的資料模型,而不是修改現有的資料模型。 範本驅動表單則會執行可變的更改,它透過 NgModel雙向資料繫結來就地修改現有的資料模型。

The ability to alter the state of a value after its creation. Reactive forms perform immutable changes in that each change to the data model produces a new data model rather than modifying the existing one. Template-driven forms perform mutable changes with NgModel and two-way data binding to modify the existing data model in place.

可注入物件(injectable)

injectable

Angular 中的類別或其它概念使用依賴注入機制來提供依賴。 可供注入的服務類別必須使用 @Injectable() 裝飾器標出來。其它條目,比如常量值,也可用於注入。

An Angular class or other definition that provides a dependency using the dependency injection mechanism. An injectable service class must be marked by the @Injectable() decorator. Other items, such as constant values, can also be injectable.

注入器 (injector)

injector

Angular 依賴注入系統中可以在快取中根據名字查詢依賴,也可以透過配置過的提供者來建立依賴。 啟動過程中會自動為每個模組建立一個注入器,並被元件樹繼承。

An object in the Angular dependency-injection system that can find a named dependency in its cache or create a dependency using a configured provider. Injectors are created for NgModules automatically as part of the bootstrap process and are inherited through the component hierarchy.

  • 注入器會提供依賴的一個單例,並把這個單例物件注入到多個元件中。

    An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components.

  • 模組和元件級別的注入器樹可以為它們擁有的元件及其子元件提供同一個依賴的不同實例。

    A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components.

  • 你可以為同一個依賴使用不同的提供者來配置這些注入器,這些提供者可以為同一個依賴提供不同的實現。

    You can configure injectors with different providers that can provide different implementations of the same dependency.

要了解關於多級注入器的更多知識,參閱多級依賴注入一章。

Learn more about the injector hierarchy in Hierarchical Dependency Injectors.

輸入屬性 (input)

input

當定義指令時,指令屬性上的 @Input() 裝飾器讓該屬性可以作為屬性繫結目標使用。 資料值會從等號右側的範本表示式所指定的資料來源流入元件的輸入屬性。

When defining a directive, the @Input() decorator on a directive property makes that property available as a target of a property binding. Data values flow into an input property from the data source identified in the template expression to the right of the equal sign.

要了解更多,參閱輸入與輸出屬性

To learn more, see input and output properties.

插值 (interpolation)

interpolation

屬性資料繫結 (property data binding) 的一種形式,位於雙花括號中的範本表示式 (template expression)會被渲染成文字。 在被賦值給元素屬性或者顯示在元素標籤中之前,這些文字可能會先與周邊的文字合併,參閱下面的例子。

A form of property data binding in which a template expression between double-curly braces renders as text. That text can be concatenated with neighboring text before it is assigned to an element property or displayed between element tags, as in this example.

<label>My current hero is {{hero.name}}</label>
      
      <label>My current hero is {{hero.name}}</label>
    

更多資訊,見範本語法中的插值

Read more in the Interpolation guide.

常春藤引擎(Ivy)

Ivy

Ivy 是 Angular 的下一代編譯和渲染管道的代號。在 Angular 的版本 9 中,預設情況下使用新的編譯器和執行時,而不再用舊的編譯器和執行時,也就是 View Engine

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.

參閱 Angular Ivy

See Angular Ivy.

JavaScript

參閱 ECMAScriptTypeScript

See ECMAScript, TypeScript.

即時 (just-in-time, JIT) 編譯

just-in-time (JIT) compilation

在啟動期間,Angular 的即時編譯器(JIT)會在執行期間把你的 Angular HTML 和 TypeScript 程式碼轉換成高效的 JavaScript 程式碼。

The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code at run time, as part of bootstrapping.

當你執行 Angular 的 CLI 命令 ng buildng serve 時,JIT 編譯是預設選項,而且是開發期間的最佳實踐。但是強烈建議你不要在生產環境下使用 JIT 模式,因為它會導致巨大的應用負擔,從而拖累啟動時的效能。

JIT compilation is the default (as opposed to AOT compilation) when you run Angular's ng build and ng serve CLI commands, and is a good choice during development. JIT mode is strongly discouraged for production use because it results in large application payloads that hinder the bootstrap performance.

參閱預先 (AOT) 編譯

Compare to ahead-of-time (AOT) compilation.

延遲載入(Lazy loading)

lazy loading

延遲載入過程會把應用拆分成多個包並且按需載入它們,從而提高應用載入速度。 比如,一些依賴可以根據需要進行延遲載入,與之相對的是那些 急性載入 的模組,它們是根模組所要用的,因此會在啟動期間載入。

A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand. For example, dependencies can be lazy loaded as needed—as opposed to eager-loaded modules that are required by the root module and are thus loaded on launch.

路由器只有當父檢視啟用時才需要載入子檢視。同樣,你還可以建構一些自訂元素,它們也可以在需要時才載入進 Angular 應用。

The router makes use of lazy loading to load child views only when the parent view is activated. Similarly, you can build custom elements that can be loaded into an Angular app when needed.

函式庫(Library)

library

一種 Angular 專案。用來讓其它 Angular 應用包含它,以提供各種功能。函式庫不是一個完整的 Angular 應用,不能獨立執行。(要想為非 Angular 應用新增可複用的 Angular 功能,你可以使用 Angular 的自訂元素。)

In Angular, a project that provides functionality that can be included in other Angular apps. A library isn't a complete Angular app and can't run independently. (To add re-usable Angular functionality to non-Angular web apps, you can use Angular custom elements.)

  • 函式庫的開發者可以使用 CLI 在現有的 工作區generate 新函式庫的腳手架,還能把函式庫發佈為 npm 套件。

    Library developers can use the Angular CLI to generate scaffolding for a new library in an existing workspace, and can publish a library as an npm package.

  • 應用開發者可以使用 CLI 來把一個已發佈的函式庫 add 進這個應用所在的工作區

    Application developers can use the Angular CLI to add a published library for use with an application in the same workspace.

參閱 原理圖(schematic)

See also schematic.

生命週期鉤子(Lifecycle hook)

lifecycle hook

一種介面,它允許你監聽指令元件的生命週期,比如建立、更新和銷燬等。

An interface that allows you to tap into the lifecycle of directives and components as they are created, updated, and destroyed.

每個介面只有一個鉤子方法,方法名是介面名加字首 ng。例如,OnInit 介面的鉤子方法名為 ngOnInit

Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit.

Angular 會按以下順序呼叫鉤子方法:

Angular calls these hook methods in the following order:

  • ngOnChanges - 在輸入屬性 (input)/輸出屬性 (output)的繫結值發生變化時呼叫。

    ngOnChanges: When an input/output binding value changes.

  • ngOnInit - 在第一次 ngOnChanges 完成後呼叫。

    ngOnInit: After the first ngOnChanges.

  • ngDoCheck - 開發者自訂變更檢測。

    ngDoCheck: Developer's custom change detection.

  • ngAfterContentInit - 在元件內容初始化後呼叫。

    ngAfterContentInit: After component content initialized.

  • ngAfterContentChecked - 在元件內容每次檢查後呼叫。

    ngAfterContentChecked: After every check of component content.

  • ngAfterViewInit - 在元件檢視初始化後呼叫。

    ngAfterViewInit: After a component's views are initialized.

  • ngAfterViewChecked - 在元件檢視每次檢查後呼叫。

    ngAfterViewChecked: After every check of a component's views.

  • ngOnDestroy - 在指令銷燬前呼叫。

    ngOnDestroy: Just before the directive is destroyed.

要了解更多,參閱生命週期鉤子頁。

To learn more, see Lifecycle Hooks.

模組 (module)

module

通常,模組會收集一組專注於單一目的的程式碼塊。Angular 既使用 JavaScript 的標準模組,也定義了 Angular 自己的模組,也就是 NgModule

In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, NgModule.

在 JavaScript (ECMAScript) 中,每個檔案都是一個模組,該檔案中定義的所有物件都屬於這個模組。這些物件可以匯出為公共物件,而這些公共物件可以被其它模組匯入後使用。

In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules.

Angular 就是用一組 JavaScript 模組(也叫函式庫)的形式發佈的。每個 Angular 函式庫都帶有 @angular 字首。 使用 NPM 套件管理器安裝它們,並且使用 JavaScript 的 import 宣告語句從中匯入各個部件。

Angular ships as a collection of JavaScript modules (also called libraries). Each Angular library name begins with the @angular prefix. Install Angular libraries with the npm package manager and import parts of them with JavaScript import declarations.

參閱 NgModule

Compare to NgModule.

ngcc

Angular 相容性編譯器。如果使用 Ivy 建構應用程式,但依賴未用 Ivy 編譯的函式庫,則 CLI 將使用 ngcc 自動更新依賴函式庫以使用 Ivy。

Angular compatibility compiler. If you build your app using Ivy, but it depends on libraries that have not been compiled with Ivy, the CLI uses ngcc to automatically update the dependent libraries to use Ivy.

NgModule

一種帶有 @NgModule() 裝飾器的類別定義,它會宣告並提供一組專注於特定功能的程式碼塊,比如業務領域、工作流或一組緊密相關的能力集等。

A class definition preceded by the @NgModule() decorator, which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

JavaScript 模組一樣,NgModule 能匯出那些可供其它 NgModule 使用的功能,也可以從其它 NgModule 中匯入其公開的功能。 NgModule 類別的元資料中包括一些供應用使用的元件、指令和管道,以及匯入、匯出列表。參閱可宣告物件

Like a JavaScript module, an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules. The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also declarable.

NgModule 通常會根據它匯出的內容決定其檔名,比如,Angular 的 DatePipe 類別就屬於 date_pipe.ts 檔案中一個名叫 date_pipe 的特性模組。 你可以從 Angular 的範圍化套件中匯入它們,比如 @angular/core

NgModules are typically named after the file in which the exported thing is defined. For example, the Angular DatePipe class belongs to a feature module named date_pipe in the file date_pipe.ts. You import them from an Angular scoped package such as @angular/core.

每個 Angular 應用都有一個根模組。通常,這個類別會命名為 AppModule,並且位於一個名叫 app.module.ts 的檔案中。

Every Angular application has a root module. By convention, the class is called AppModule and resides in a file named app.module.ts.

要了解更多,參閱 NgModules

To learn more, see NgModules.

npm 套件

npm package

npm 套件管理器用於分發與載入 Angular 的模組和函式庫。

The npm package manager is used to distribute and load Angular modules and libraries.

你還可以瞭解 Angular 如何使用 Npm 套件 的更多知識。

Learn more about how Angular uses Npm Packages.

ngc

ngc 是一個 TypeScript 到 JavaScript 的轉譯器,它會處理 Angular 的註解、元資料、範本,並產生 JavaScript 程式碼。 其最新的實現在內部被稱為 ngtsc,因為它是一個對 TypeScript 編譯器 tsc 的最小化包裝,為其加入了 Angular 程式碼的轉換過程。

ngc is a Typescript-to-Javascript transpiler that processes Angular decorators, metadata, and templates, and emits JavaScript code. The most recent implementation is internally referred to as ngtsc because it's a minimalistic wrapper around the TypeScript compiler tsc that adds a transform for processing Angular code.

可觀察物件(Observable)

observable

一個多值產生器,這些值會被推送給訂閱者。 Angular 中到處都會用到非同步事件處理。你要透過呼叫可觀察物件的 subscribe() 方法來訂閱它,從而讓這個可觀察物件得以執行,你還要給該方法傳入一些回呼(Callback)函式來接收 "有新值"、"錯誤" 或 "完成" 等通知。

A producer of multiple values, which it pushes to subscribers. Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its subscribe() method, passing callbacks for notifications of new values, errors, or completion.

可觀察物件可以把任意型別的一個或多個值傳給訂閱者,無論是同步(就像函式把值返回給它的呼叫者一樣)還是非同步。 訂閱者會在生成了新值時收到包含這個新值的通知,以及正常結束或錯誤結束時的通知。

Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion.

Angular 使用一個名叫響應式擴充套件 (RxJS)的第三方包來實現這些功能。

Angular uses a third-party library called Reactive Extensions (RxJS).

要了解更多,參閱可觀察物件

To learn more, see Observables.

觀察者(Observer)

observer

傳給可觀察物件subscribe() 方法的一個物件,其中定義了訂閱者的一組回呼(Callback)函式。

An object passed to the subscribe() method for an observable. The object defines the callbacks for the subscriber.

輸出屬性 (output)

output

當定義指令時,指令屬性上的 @Output() 裝飾器會讓該屬性可用作事件繫結目標。 事件從該屬性流到等號右側指定的範本表示式中。

When defining a directive, the @Output{} decorator on a directive property makes that property available as a target of event binding. Events stream out of this property to the receiver identified in the template expression to the right of the equal sign.

要了解更多,參閱輸入與輸出屬性

To learn more, see Input and Output Properties.

管道(pipe)

pipe

一個帶有 @Pipe{} 裝飾器的類別,它定義了一個函式,用來把輸入值轉換成輸出值,以顯示在檢視中。 Angular 定義了很多管道,並且你還可可以自訂新的管道。

A class which is preceded by the @Pipe{} decorator and which defines a function that transforms input values to output values for display in a view. Angular defines various pipes, and you can define new pipes.

要了解更多,參閱管道頁。

To learn more, see Pipes.

平臺(platform)

platform

在 Angular 術語中,平臺是供 Angular 應用程式在其中執行的上下文。Angular 應用程式最常見的平臺是 Web 瀏覽器,但它也可以是移動裝置的作業系統或 Web 伺服器。

In Angular terminology, a platform is the context in which an Angular application runs. The most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server.

@angular/platform-* 軟體套件提供了對各種 Angular 執行時平臺的支援。這些軟體包透過提供用於收集使用者輸入和渲染指定平臺 UI 的實現,以允許使用 @angular/core@angular/common 的應用程式在不同的環境中執行。隔離平臺相關的功能使開發人員可以獨立於平臺使用框架的其餘部分。

Support for the various Angular run-time platforms is provided by the @angular/platform-* packages. These packages allow applications that make use of @angular/core and @angular/common to execute in different environments by providing implementation for gathering user input and rendering UIs for the given platform. Isolating platform-specific functionality allows the developer to make platform-independent use of the rest of the framework.

  • 在 Web 瀏覽器中執行時,BrowserModule是從 platform-browser 軟體套件中匯入的,並支援簡化安全性和事件處理的服務,並允許應用程式訪問瀏覽器專有的功能,例如解釋鍵盤輸入和控制文件要顯示的標題。瀏覽器中執行的所有應用程式都使用同一個平臺服務。

    When running in a web browser, BrowserModuleis imported from the platform-browser package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service.

  • 使用伺服器端渲染(SSR)時,platform-server包將提供 DOMXMLHttpRequest 和其它不依賴瀏覽器的其它底層功能的 Web 伺服器端實現。

    When server-side rendering (SSR) is used, the platform-serverpackage provides web server implementations of the DOM, XMLHttpRequest, and other low-level features that don't rely on a browser.

Polyfill指令碼(polyfill)

polyfill

一個 NPM 套件,它負責彌補瀏覽器 JavaScript 實現與最新標準之間的 "縫隙"。參閱瀏覽器支援頁,以瞭解要在特定平臺支援特定功能時所需的Polyfill指令碼。

An npm package that plugs gaps in a browser's JavaScript implementation. See Browser Support for polyfills that support particular functionality for particular platforms.

專案(project)

project

在 Angular CLI 中,CLI 命令可能會建立或修改獨立應用或函式庫

In the Angular CLI, a standalone application or library that can be created or modified by a CLI command.

ng new建立的專案中包含一組原始檔、資源和配置檔案,當你用 CLI 開發或測試此應用時就會用到它們。此外,還可以用 ng generate applicationng generate library 命令建立專案。

A project, as generated by the ng new, contains the set of source files, resources, and configuration files that you need to develop and test the application using the CLI. Projects can also be created with the ng generate application and ng generate library commands.

欲知詳情,參閱專案檔案結構

For more information, see Project File Structure.

angular.json檔案可以配置某個工作空間 中的所有專案。

The angular.jsonfile configures all projects in a workspace.

提供者 (provider)

provider

一個實現了 Provider介面的物件。一個提供者物件定義瞭如何獲取與 DI 令牌(token) 相關聯的可注入依賴。 注入器會使用這個提供者來建立它所依賴的那些類別的實例。

An object that implements one of the Providerinterfaces. A provider object defines how to obtain an injectable dependency associated with a DI token. An injector uses the provider to create a new instance of a dependency for a class that requires it.

Angular 會為每個注入器註冊一些 Angular 自己的服務。你也可以註冊應用自己所需的服務提供者。

Angular registers its own providers with every injector, for services that Angular defines. You can register your own providers for services that your app needs.

參閱服務依賴注入

See also service, dependency injection.

欲知詳情,參閱依賴注入

Learn more in Dependency Injection.

響應式表單 (reactive forms)

reactive forms

透過元件中程式碼建構 Angular 表單的一個框架。 另一種技術是範本驅動表單

A framework for building Angular forms through code in a component. The alternative is a template-driven form.

建構響應式表單時:

When using reactive forms:

  • "事實之源"(表單模型)定義在元件類別中。

    The "source of truth", the form model, is defined in the component class.

  • 表單驗證在元件程式碼而不是驗證器指令中定義。

    Validation is set up through validation functions rather than validation directives.

  • 在元件類別中,使用 new FormControl() 或者 FormBuilder 顯性地建立每個控制元件。

    Each control is explicitly created in the component class by creating a FormControl instance manually or with FormBuilder.

  • 範本中的 input 元素使用 ngModel

    The template input elements do not use ngModel.

  • 相關聯的 Angular 指令全部以 Form 開頭,例如 FormGroup()FormControl()FormControlName()

    The associated Angular directives are prefixed with form, such as formControl, formGroup, and formControlName.

另一種方式是範本驅動表單。範本驅動表單的簡介和這兩種方式的比較,參閱 Angular 表單簡介

The alternative is a template-driven form. For an introduction and comparison of both forms approaches, see Introduction to Angular Forms.

解析器(resolver)

resolver

一個實現了 Resolve 介面的類別(或一個與 resolve() 方法具有相同簽名的函式),你可以在導航到所請求的路由之前,先用它來產生或獲取資料。

A class that implements the Resolve interface (or a function with the same signature as the resolve() method) that you use to produce or retrieve data that is needed before navigation to a requested route can be completed.

解析器會在一棵路由樹的所有路由守衛都被執行併成功之後執行。

Resolvers run after all route guards for a route tree have been executed and have succeeded.

參見使用解析守衛獲取動態資料一章中的例子。

See an example of using a resolve guard to retrieve dynamic data.

路由守衛

route guard

一種在帶路由的應用中對導航到所要求的路由進行控制的方式。 這些守衛會決定一個路由是否可以啟用或停止啟用,以及延遲載入模組是否可以被載入。

A method that controls navigation to a requested route in a routing application. Guards determine whether a route can be activated or deactivated, and whether a lazy-loaded module can be loaded.

欲知詳情,參見路由與導航一章。

Learn more in the Routing and Navigation guide.

路由器 (router)

router

一種工具,用來配置和實現 Angular 應用中各個狀態和檢視之間的導航。

A tool that configures and implements navigation among states and views within an Angular app.

Router 模組是一個 NgModule,它提供在應用檢視間導航時需要的服務提供者和指令。路由元件是一種元件,它匯入了 Router 模組,並且其範本中包含 RouterOutlet 元素,路由器產生的檢視就會被顯示在那裡。

The Router module is an NgModule that provides the necessary service providers and directives for navigating through application views. A routing component is one that imports the Router module and whose template contains a RouterOutlet element where it can display views produced by the router.

路由器定義了在單頁面中的各個檢視之間導航的方式,而不是在頁面之間。它會解釋類似 URL 的連結,以決定該建立或銷燬哪些檢視,以及要載入或解除安裝哪些元件。它讓你可以在 Angular 應用中獲得延遲載入的好處。

The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of lazy loading in your Angular apps.

要了解更多,參閱路由與導航

To learn more, see Routing and Navigation.

路由出口(router outlet)

router outlet

一種指令,它在路由元件的範本中扮演佔位符的角色,Angular 會根據當前的路由狀態動態填充它。

A directive that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state.

路由元件 (routing component)

routing component

一個範本中帶有 RouterOutlet 指令的 Angular 元件,用於根據路由器的導航顯示相應的檢視。

An Angular component with a RouterOutlet directive in its template that displays views based on router navigations.

要了解更多,參閱路由與導航

For more information, see Routing and Navigation.

規則(rule)

rule

原理圖 中,是指一個在檔案樹上執行的函式,用於以指定方式建立、刪除或修改檔案,並返回一個新的 Tree 物件。

In schematics, a function that operates on a file tree to create, delete, or modify files in a specific manner.

原理圖(schematic)

schematic

腳手架函式庫會定義如何藉助建立、修改、重構或移動檔案和程式碼等操作來產生或轉換某個專案。每個原理圖定義了一些規則,以操作一個被稱為檔案樹的虛擬檔案系統。

A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. A schematic defines rules that operate on a virtual file system called a tree.

Angular CLI 使用原理圖來產生和修改 Angular 專案及其部件。

The Angular CLI uses schematics to generate and modify Angular projects and parts of projects.

  • Angular 提供了一組用於 CLI 的原理圖。參閱 Angular CLI 命令參考手冊。當 ng add命令向專案中新增某個函式庫時,就會執行原理圖。ng generate命令則會執行原理圖,來建立應用、函式庫和 Angular 程式碼塊。

    Angular provides a set of schematics for use with the CLI. See the Angular CLI command reference. The ng addcommand runs schematics as part of adding a library to your project. The ng generatecommand runs schematics to create apps, libraries, and Angular code constructs.

  • 公共函式庫的開發者可以建立原理圖,來讓 CLI 產生他們自己的發佈的函式庫。欲知詳情,參閱 devkit 文件

    Library developers can create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines. Add these schematics to the npm package that you use to publish and share your library.

欲知詳情,參閱原理圖把函式庫與 CLI 整合

For more information, see Schematics and Integrating Libraries with the CLI.

Schematics CLI

Schematics 自帶了一個命令列工具。 使用 Node 6.9 或更高版本,可以全域性安裝這個 Schematics CLI:

Schematics come with their own command-line tool. Using Node 6.9 or above, install the Schematics CLI globally:

npm install -g @angular-devkit/schematics-cli
      
      npm install -g @angular-devkit/schematics-cli
    

這會安裝可執行檔案 schematics,你可以用它來建立新工程、往現有工程中新增新的 schematic,或擴充套件某個現有的 schematic。

This installs the schematics executable, which you can use to create a new schematics collection with an initial named schematic. The collection folder is a workspace for schematics. You can also use the schematics command to add a new schematic to an existing collection, or extend an existing schematic.

範圍化包 (scoped package)

scoped package

一種把相關的 npm 套件分組到一起的方式。 Angular 的 NgModule 都是在一些以 @angular 為範圍名的範圍化套件中發佈的。比如 @angular/core@angular/common@angular/forms@angular/router

A way to group related npm packages. NgModules are delivered within scoped packages whose names begin with the Angular scope name @angular. For example, @angular/core, @angular/common, @angular/forms, and @angular/router.

和匯入普通包相同的方式匯入範圍化套件。

Import a scoped package in the same way that you import a normal package.

import { Component } from '@angular/core';
architecture/src/app/app.component.ts (import)
      
      import { Component } from '@angular/core';
    

伺服器端渲染

server-side rendering

一項在伺服器端產生靜態應用頁面的技術,它可以在對來自瀏覽器的請求進行響應時產生這些頁面或用它們提供服務。 它還可以提前把這些頁面產生為 HTML 檔案,以便稍後用它們來提供服務。

A technique that generates static application pages on the server, and can generate and serve those pages in response to requests from browsers. It can also pre-generate pages as HTML files that you serve later.

該技術可以增強手機和低功耗裝置的效能,而且會在應用載入透過快速展示一個靜態首屏來提升使用者體驗。這個靜態版本還能讓你的應用對網路蜘蛛更加友好。

This technique can improve performance on mobile and low-powered devices and improve the user experience by showing a static first page quickly while the client-side app is loading. The static version can also make your app more visible to web crawlers.

你可以透過 CLI 執行 Angular Universal 工具,藉助 @nguniversal/express-engine schematic 原理圖來更輕鬆的讓應用支援伺服器端渲染。

You can easily prepare an app for server-side rendering by using the CLI to run the Angular Universal tool, using the @nguniversal/express-engine schematic.

服務 (service)

service

在 Angular 中,服務就是一個帶有 @Injectable 裝飾器的類別,它封裝了可以在應用程式中複用的非 UI 邏輯和程式碼。 Angular 把元件和服務分開,是為了增進模組化程度和可複用性。

In Angular, a class with the @Injectable() decorator that encapsulates non-UI logic and code that can be reused across an application. Angular distinguishes components from services to increase modularity and reusability.

@Injectable 元資料讓服務類別能用於依賴注入機制中。可注入的類別是用提供者進行實例化的。 各個注入器會維護一個提供者的列表,並根據元件或其它服務的需要,用它們來提供服務的實例。

The @Injectable() metadata allows the service class to be used with the dependency injection mechanism. The injectable class is instantiated by a provider. Injectors maintain lists of providers and use them to provide service instances when they are required by components or other services.

要了解更多,參閱服務與依賴注入簡介

To learn more, see Introduction to Services and Dependency Injection.

結構型指令(Structural directives)

structural directives

一種指令型別,它能透過修改 DOM (新增、刪除或操縱元素及其子元素)來修整或重塑 HTML 的佈局。

A category of directive that is responsible for shaping HTML layout by modifying the DOM—that is, adding, removing, or manipulating elements and their children.

要了解更多,參閱結構型指令頁。

To learn more, see Structural Directives.

訂閱者(Subscriber)

subscriber

一個函式,用於定義如何獲取或產生要發佈的值或訊息。 當有消費者呼叫可觀察物件subscribe() 方法時,該函式就會執行。

A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the subscribe() method of an observable.

訂閱一個可觀察物件就會觸發該物件的執行、為該物件關聯一些回呼(Callback)函式,並建立一個 Subscription(訂閱記錄)物件來讓你能取消訂閱。

The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a Subscription object that lets you unsubscribe.

subscribe() 方法接收一個 JavaScript 物件(叫做觀察者(observer)),其中最多可以包含三個回呼(Callback),分別對應可觀察物件可以發出的幾種通知型別:

The subscribe() method takes a JavaScript object (called an observer) with up to three callbacks, one for each type of notification that an observable can deliver:

  • next(下一個)通知會發送一個值,比如數字、字串、物件。

    The next notification sends a value such as a number, a string, or an object.

  • error(錯誤)通知會發送 JavaScript 錯誤或異常。

    The error notification sends a JavaScript Error or exception.

  • complete(完成)通知不會發送值,但是當呼叫結束時會呼叫這個處理器。非同步的值可能會在呼叫了完成之後繼續傳送過來。

    The complete notification doesn't send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes.

目標

target

專案的一個可建構或可執行的子集,它是工作空間配置檔案中的一個子物件,它會被建築師(Architect)建構器(Builder)執行。

A buildable or runnable subset of a project, configured as an object in the workspace configuration file, and executed by an Architect builder.

angular.json 檔案中,每個專案都有一個 architect 分區,其中包含一些用於配置建構器的目標。其中一些目標對應於 CLI 命令,比如 buildservetestlint

In the angular.json file, each project has an "architect" section that contains targets which configure builders. Some of these targets correspond to CLI commands, such as build, serve, test, and lint.

比如,ng build 命令用來編譯專案時所呼叫的建構器會使用一個特定的建構工具,並且具有一份預設配置,此配置中的值可以透過命令列引數進行覆蓋。目標 build 還為 "生產環境" 建構定義了另一個配置,可以透過在 build 命令上新增 --prod 標誌來呼叫它。

For example, the Architect builder invoked by the ng build command to compile a project uses a particular build tool, and has a default configuration whose values can be overridden on the command line. The build target also defines an alternate configuration for a "production" build, that can be invoked with the --prod flag on the build command.

建築師工具提供了一組建構器。ng new 命令為初始應用專案提供了一組目標。ng generate applicationng generate library命令則為每個新專案提供了一組目標。這些目標的選項和配置都可以進行自訂,以便適應你專案的需求。比如,你可能會想為專案的 "build" 目標新增一個 "staging" 或 "testing" 配置。

The Architect tool provides a set of builders. The ng new command provides a set of targets for the initial application project. The ng generate applicationand ng generate librarycommands provide a set of targets for each new project. These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a "staging" or "testing" configuration to a project's "build" target.

你還可以定義一個自訂建構器,並且往專案配置中新增一個目標,來使用你的自訂建構器。然後你就可以透過 ng run命令來執行此目標。

You can also define a custom builder, and add a target to the project configuration that uses your custom builder. You can then run the target using the ng runCLI command.

範本 (template)

template

用來定義要如何在 HTML 中渲染元件檢視的程式碼。

Code that defines how to render a component's view.

範本會把純 HTML 和 Angular 的資料繫結語法、指令範本表示式組合起來。Angular 的元素會插入或計算那些值,以便在頁面顯示出來之前修改 HTML 元素。

A template combines straight HTML with Angular data-binding syntax, directives, and template expressions (logical constructs). The Angular elements insert or calculate values that modify the HTML elements before the page is displayed. Learn more about Angular template language in the Template Syntax guide.

範本透過 @Component() 裝飾器元件類別類別關聯起來。範本程式碼可以作為 template 屬性的值用內聯的方式提供,也可以透過 templateUrl 屬性連結到一個獨立的 HTML 檔案。

A template is associated with a component class through the @Component() decorator. The template code can be provided inline, as the value of the template property, or in a separate HTML file linked through the templateUrl property.

TemplateRef 物件表示的其它範本用來定義一些備用檢視或內嵌檢視,它們可以來自多個不同的元件。

Additional templates, represented by TemplateRef objects, can define alternative or embedded views, which can be referenced from multiple components.

範本驅動表單(template-driven forms)

template-driven forms

一種在檢視中使用 HTML 表單和輸入類別元素建構 Angular 表單的格式。 它的替代方案是響應式表單框架。

A format for building Angular forms using HTML forms and input elements in the view. The alternative format uses the reactive forms framework.

當建構範本驅動表單時:

When using template-driven forms:

  • 範本是“事實之源”。使用屬性 (attribute) 在單個輸入元素上定義驗證規則。

    The "source of truth" is the template. The validation is defined using attributes on the individual input elements.

  • 使用 ngModel 進行雙向繫結,保持元件模型和使用者輸入之間的同步。

    Two-way binding with ngModel keeps the component model synchronized with the user's entry into the input elements.

  • 在幕後,Angular 為每個帶有 name 屬性和雙向繫結的輸入元素建立了一個新的控制元件。

    Behind the scenes, Angular creates a new control for each input element, provided you have set up a name attribute and two-way binding for each input.

  • 相關的 Angular 指令都帶有 ng 字首,例如 ngFormngModelngModelGroup

    The associated Angular directives are prefixed with ng such as ngForm, ngModel, and ngModelGroup.

另一種方式是響應式表單。響應式表單的簡介和兩種方式的比較參閱 Angular 表單簡介

The alternative is a reactive form. For an introduction and comparison of both forms approaches, see Introduction to Angular Forms.

範本表示式(template expression)

template expression

一種類似 TypeScript 的語法,Angular 用它對資料繫結 (data binding)進行求值。

A TypeScript-like syntax that Angular evaluates within a data binding.

請到插值中的範本表示式部分學習如何編寫範本表示式。

Read about how to write template expressions in the template expressions section of the Interpolation guide.

範本參考變數

template reference variable

範本中定義的一個變數,它可以參考與某元素相關的實例,比如指令實例、元件實例、範本(TemplateRef)或 DOM 元素。 在範本中的某個元素上聲明瞭範本參考變數之後,你可以從同一個範本中的其它位置訪問這些值。 下面的例子定義了一個名叫 #phone 的範本參考變數。

A variable defined in a template that references an instance associated with an element, such as a directive instance, component instance, template as in TemplateRef, or DOM element. After declaring a template reference variable on an element in a template, you can access values from that variable elsewhere within the same template. The following example defines a template reference variable named #phone.

<input #phone placeholder="phone number" />
src/app/app.component.html
      
      <input #phone placeholder="phone number" />
    

範本表示式部分了解更多範本表示式的知識。

For more information, see the Template reference variable guide.

令牌(Token)

token

用於高效查表的不透明識別符號(譯註:不透明是指你不必瞭解其細節)。在 Angular 中,DI 令牌用於在依賴注入系統中查詢服務提供者

An opaque identifier used for efficient table lookup. In Angular, a DI token is used to find providers of dependencies in the dependency injection system.

轉譯(transpile)

transpile

一種翻譯過程,它會把一個版本的 JavaScript 轉換成另一個版本,比如把下一版的 ES2015 轉換成老版本的 ES5。

The translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version.

目錄樹(tree)

tree

schematics 中,一個用 Tree 類別表示的虛擬檔案系統。 Schematic 規則以一個 tree 物件作為輸入,對它們進行操作,並且返回一個新的 tree 物件。

In schematics, a virtual file system represented by the Tree class. Schematic rules take a tree object as input, operate on them, and return a new tree object.

TypeScript

TypeScript 是一種基於 JavaScript 的程式設計語言,以其可選型別系統著稱。 TypeScript 提供了編譯時型別檢查和強大的工具支援(比如程式碼補齊、重構、內聯文件和智慧搜尋等)。 許多程式碼編輯器和 IDE 都原生支援 TypeScript 或透過外掛提供支援。

A programming language based on JavaScript that is notable for its optional typing system. TypeScript provides compile-time type checking and strong tooling support (such as code completion, refactoring, inline documentation, and intelligent search). Many code editors and IDEs support TypeScript either natively or with plug-ins.

TypeScript 是 Angular 的首選語言。要了解更多,參閱 typescriptlang.org

TypeScript is the preferred language for Angular development. Read more about TypeScript at typescriptlang.org.

TypeScript 配置檔案

TypeScript configuration file

一個檔案,用來指定編譯 TypeScript 專案時的根檔案和編譯器選項。欲知詳情,參閱 TypeScript 配置

A file specifies the root files and the compiler options required to compile a TypeScript project. For more information, see TypeScript configuration.

單向資料流

unidirectional data flow

一種資料流模型,它總是在一個方向(從父到子)上檢查元件樹是否有變化,以防止在變更檢測圖中出現迴圈。

A data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph.

在實踐中,這意味著 Angular 中的資料會在變更檢測過程中向下流動。父元件可以很容易地改變子元件中的值,因為父元件是先檢查的。但是,如果子元件在更改檢測期間(反轉預期的資料流)嘗試更改其父元件中的值,則可能會導致錯誤,因為父元件已經渲染過了。在開發模式下,如果你的應用嘗試這樣做,Angular 會丟擲 ExpressionChangedAfterItHasBeenCheckedError 錯誤,而不是沉默地渲染新值。

In practice, this means that data in Angular flows downward during change detection. A parent component can easily change values in its child components because the parent is checked first. A failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered. In development mode, Angular throws the ExpressionChangedAfterItHasBeenCheckedError error if your app attempts to do this, rather than silently failing to render the new value.

為了避免這個錯誤,進行此類別更改的生命週期鉤子方法中就要觸發一次新的變更檢測。這次新的變更檢測與之前那次的方向一樣,但可以成功獲得新值。

To avoid this error, a lifecycle hook method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value.

Universal

用來幫 Angular 應用實現伺服器端渲染的工具。 當與應用整合在一起時,Universal 可以在伺服器端產生靜態頁面並用它們來響應來自瀏覽器的請求。 當瀏覽器正準備執行完整版應用的時候,這個初始的靜態頁可以用作一個可快速載入的佔位符。

A tool for implementing server-side rendering of an Angular application. When integrated with an app, Universal generates and serves static pages on the server in response to requests from browsers. The initial static page serves as a fast-loading placeholder while the full application is being prepared for normal execution in the browser.

欲知詳情,參閱 Angular Universal: 伺服器端渲染

To learn more, see Angular Universal: server-side rendering.

檢視 (view)

view

檢視是可顯示元素的最小分組單位,它們會被同時建立和銷燬。 Angular 在一個或多個指令 (directive) 的控制下渲染檢視。

The smallest grouping of display elements that can be created and destroyed together. Angular renders a view under the control of one or more directives.

元件 (component) 類別及其關聯的範本 (template)定義了一個檢視。 具體實現上,檢視由一個與該元件相關的 ViewRef 實例表示。 直屬於某個元件的檢視叫做宿主檢視。 通常會把檢視組織成一些檢視樹(view hierarchies)

A component class and its associated template define a view. A view is specifically represented by a ViewRef instance associated with a component. A view that belongs immediately to a component is called a host view. Views are typically collected into view hierarchies.

檢視中各個元素的屬性可以動態修改以響應使用者的操作,而這些元素的結構(數量或順序)則不能。你可以透過在它們的檢視容器中插入、移動或移除內嵌檢視來修改這些元素的結構。

Properties of elements in a view can change dynamically, in response to user actions; the structure (number and order) of elements in a view can't. You can change the structure of elements by inserting, moving, or removing nested views within their view containers.

當用戶在應用中導航時(比如使用路由器),檢視樹可以動態載入或解除安裝。

View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a router.

檢視引擎(View Engine)

View Engine

Angular 9 之前的版本使用的編譯和渲染管道。可對比 Ivy

The compilation and rendering pipeline used by Angular before version 9. Compare Ivy.

檢視樹(View hierarchy)

view hierarchy

一棵相關檢視的樹,它們可以作為一個整體行動。其根檢視就是元件的宿主檢視。宿主檢視可以是內嵌檢視樹的根,它被收集到了宿主元件上的一個檢視容器(ViewContainerRef中。檢視樹是 Angular 變更檢測的關鍵部件之一。

A tree of related views that can be acted on as a unit. The root view is a component's host view. A host view can be the root of a tree of embedded views, collected in a view container (ViewContainerRef) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection.

檢視樹和元件樹並不是一一對應的。那些嵌入到指定檢視樹上下文中的檢視也可能是其它元件的宿主檢視。那些元件可能和宿主元件位於同一個 NgModule 中,也可能屬於其它 NgModule。

The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules.

Web 元件

web component

參閱自訂元素

See custom element.

工作空間(Workspace)

workspace

一組基於 Angular CLI 的 Angular 專案(也就是說應用或函式庫),它們通常共同位於一個單一的原始碼儲存庫(比如 git)中。

A collection of Angular projects (that is, applications and libraries) powered by the Angular CLI that are typically co-located in a single source-control repository (such as git).

CLIng new 命令會在檔案系統中建立一個目錄(也就是工作空間的根目錄)。 在工作空間根目錄下,還會建立此工作空間的配置檔案angular.json),並且還會預設初始化一個同名的應用專案。

The CLI ng new command creates a file system directory (the "workspace root"). In the workspace root, it also creates the workspace configuration file (angular.json) and, by default, an initial application project with the same name.

而用來建立或操作應用和函式庫的命令(比如 addgenerate)必須在工作區目錄下才能執行。

Commands that create or operate on apps and libraries (such as add and generate) must be executed from within a workspace folder.

欲知詳情,參閱工作空間配置

For more information, see Workspace Configuration.

工作空間配置(Workspace configuration)

workspace configuration

一個名叫 angular.json 的檔案,它位於 Angular 工作空間 的根目錄下,並為 Angular CLI 提供的或整合的各個建構/開發工具提供工作空間級和專案專屬的預設配置項。

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools that are provided by or integrated with the Angular CLI.

欲知詳情,參閱工作空間配置

For more information, see Workspace Configuration.

還有一些專案專屬的配置檔案是給某些工具使用的。比如 package.json 是給 npm 套件管理器使用的,tsconfig.json 是給 TypeScript 轉譯器使用的,而 tslint.json 是給 TSLint 使用的。

Additional project-specific configuration files are used by tools, such as package.json for the npm package manager, tsconfig.json for TypeScript transpilation, and tslint.json for TSLint.

欲知詳情,參閱工作空間和專案檔案結構

For more information, see Workspace and Project File Structure.

區域 (zone)

zone

一組非同步任務的執行上下文。它對於除錯、效能分析和測試那些包含了非同步操作(如事件處理、承諾、遠端伺服器呼叫等)的應用是非常有用的。

An execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers.

Angular 應用會執行在一個 Zone 區域中,在這裡,它可以對非同步事件做出反應,可以透過檢查資料變更、利用資料繫結 (data bindings) 來更新資訊顯示。

An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving data bindings.

Zone 的使用方可以在非同步操作完成之前或之後採取行動。

A zone client can take action before and after an async operation completes.

要了解更多,參閱 Brian Ford 的視訊

Learn more about zones in this Brian Ford video.