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

架構概覽

Introduction to Angular concepts

Angular 是一個用 HTML 和 TypeScript 建構客戶端應用的平臺與框架。 Angular 本身就是用 TypeScript 寫成的。它將核心功能和可選功能作為一組 TypeScript 函式庫進行實現,你可以把它們匯入你的應用中。

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Angular 的基本構成要素是 NgModule,它為元件提供了編譯的上下文環境。 NgModule 會把相關的程式碼收集到一些功能集中。Angular 應用就是由一組 NgModule 定義出的。 應用至少會有一個用於引導應用的根模組,通常還會有很多特性模組

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping, and typically has many more feature modules.

  • 元件定義檢視。檢視是一組可見的螢幕元素,Angular 可以根據你的程式邏輯和資料來選擇和修改它們。 每個應用都至少有一個根元件。

    Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

  • 元件使用服務。服務會提供那些與檢視不直接相關的功能。服務提供者可以作為依賴注入到元件中, 這能讓你的程式碼更加模組化、更加可複用、更加高效。

    Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

模組、元件和服務都是使用裝飾器的類別,這些裝飾器會標出它們的型別並提供元資料,以告知 Angular 該如何使用它們。

Modules, components and services are classes that use decorators. These decorators mark their type and provide metadata that tells Angular how to use them.

  • 元件類別的元資料將元件類別和一個用來定義檢視的範本關聯起來。 範本把普通的 HTML 和 Angular 指令繫結標記(markup)組合起來,這樣 Angular 就可以在渲染 HTML 之前先修改這些 HTML。

    The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.

  • 服務類別的元資料提供了一些資訊,Angular 要用這些資訊來讓元件可以透過依賴注入(DI)使用該服務。

    The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI).

應用的元件通常會定義很多檢視,並進行分級組織。Angular 提供了 Router 服務來幫助你定義檢視之間的導航路徑。 路由器提供了先進的瀏覽器內導航功能。

An app's components typically define many views, arranged hierarchically. Angular provides the Router service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.

參閱 Angular 詞彙表 以瞭解對 Angular 重要名詞和用法的基本定義。

See the Angular Glossary for basic definitions of important Angular terms and usage.

要想檢視本頁所講的範例程式,參閱現場演練 / 下載範例

For the sample app that this page describes, see the現場演練 / 下載範例.

模組

Modules

Angular 定義了 NgModule,它和 JavaScript(ES2015) 的模組不同而且有一定的互補性。 NgModule 為一個元件集聲明瞭編譯的上下文環境,它專注於某個應用領域、某個工作流或一組緊密相關的能力。 NgModule 可以將其元件和一組相關程式碼(如服務)關聯起來,形成功能單元。

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

每個 Angular 應用都有一個根模組,通常命名為 AppModule。根模組提供了用來啟動應用的引導機制。 一個應用通常會包含很多特性模組。

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

像 JavaScript 模組一樣,NgModule 也可以從其它 NgModule 中匯入功能,並允許匯出它們自己的功能供其它 NgModule 使用。 比如,要在你的應用中使用路由器(Router)服務,就要匯入 Router 這個 NgModule。

Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.

把你的程式碼組織成一些清晰的特性模組,可以幫助管理複雜應用的開發工作並實現可複用性設計。 另外,這項技術還能讓你獲得延遲載入(也就是按需載入模組)的優點,以儘可能減小啟動時需要載入的程式碼體積。

Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading—that is, loading modules on demand—to minimize the amount of code that needs to be loaded at startup.

更深入的討論,參閱模組簡介

For a more detailed discussion, see Introduction to modules.

元件

Components

每個 Angular 應用都至少有一個元件,也就是根元件,它會把元件樹和頁面中的 DOM 連線起來。 每個元件都會定義一個類別,其中包含應用的資料和邏輯,並與一個 HTML 範本相關聯,該範本定義了一個供目標環境下顯示的檢視。

Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.

@Component() 裝飾器表明緊隨它的那個類別是一個元件,並提供範本和該元件專屬的元資料。

The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.

裝飾器是一些用於修飾 JavaScript 類別的函式。Angular 定義了許多裝飾器,這些裝飾器會把一些特定種類的元資料附加到類別上,以便 Angular 瞭解這些類別的含義以及該如何使用它們。

Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.

到網上學習關於裝飾器的更多知識。

Learn more about decorators on the web.

範本、指令和資料繫結

Templates, directives, and data binding

範本會把 HTML 和 Angular 的標記(markup)組合起來,這些標記可以在 HTML 元素顯示出來之前修改它們。 範本中的指令會提供程式邏輯,而繫結標記會把你應用中的資料和 DOM 連線在一起。 有兩種型別的資料繫結:

A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding:

  • 事件繫結讓你的應用可以透過更新應用的資料來響應目標環境下的使用者輸入。

    Event binding lets your app respond to user input in the target environment by updating your application data.

  • 屬性繫結讓你將從應用資料中計算出來的值插入到 HTML 中。

    Property binding lets you interpolate values that are computed from your application data into the HTML.

在檢視顯示出來之前,Angular 會先根據你的應用資料和邏輯來執行範本中的指令並解析繫結表示式,以修改 HTML 元素和 DOM。 Angular 支援雙向資料繫結,這意味著 DOM 中發生的變化(比如使用者的選擇)同樣可以反映回你的程式資料中。

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

你的範本也可以用管道轉換要顯示的值以增強使用者體驗。比如,可以使用管道來顯示適合使用者所在本地環境的日期和貨幣格式。 Angular 為一些通用的轉換提供了預定義管道,你還可以定義自己的管道。

Your templates can use pipes to improve the user experience by transforming values for display. For example, use pipes to display dates and currency values that are appropriate for a user's locale. Angular provides predefined pipes for common transformations, and you can also define your own pipes.

要了解對這些概念的深入討論,參閱元件介紹

For a more detailed discussion of these concepts, see Introduction to components.

服務與依賴注入

Services and dependency injection

對於與特定檢視無關並希望跨元件共享的資料或邏輯,可以建立服務類別。 服務類別的定義通常緊跟在 “@Injectable()” 裝飾器之後。該裝飾器提供的元資料可以讓你的服務作為依賴被注入到客戶元件中。

For data or logic that isn't associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.

依賴注入(或 DI)讓你可以保持元件類別的精簡和高效。有了 DI,元件就不用從伺服器獲取資料、驗證使用者輸入或直接把日誌寫到控制檯,而是會把這些任務委託給服務。

Dependency injection (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

更深入的討論,參閱服務和 DI 簡介

For a more detailed discussion, see Introduction to services and DI.

路由

Routing

Angular 的 Router 模組提供了一個服務,它可以讓你定義在應用的各個不同狀態和檢視層次結構之間導航時要使用的路徑。 它的工作模型基於人們熟知的瀏覽器導航約定:

The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. It is modeled on the familiar browser navigation conventions:

  • 在位址列輸入 URL,瀏覽器就會導航到相應的頁面。

    Enter a URL in the address bar and the browser navigates to a corresponding page.

  • 在頁面中點選連結,瀏覽器就會導航到一個新頁面。

    Click links on the page and the browser navigates to a new page.

  • 點選瀏覽器的前進和後退按鈕,瀏覽器就會在你的瀏覽歷史中向前或向後導航。

    Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

不過路由器會把類似 URL 的路徑對映到檢視而不是頁面。 當用戶執行一個動作時(比如點選連結),本應該在瀏覽器中載入一個新頁面,但是路由器攔截了瀏覽器的這個行為,並顯示或隱藏一個檢視層次結構。

The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies.

如果路由器認為當前的應用狀態需要某些特定的功能,而定義此功能的模組尚未載入,路由器就會按需延遲載入此模組。

If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can lazy-load the module on demand.

路由器會根據你應用中的導航規則和資料狀態來攔截 URL。 當用戶點選按鈕、選擇下拉框或收到其它任何來源的輸入時,你可以導航到一個新檢視。 路由器會在瀏覽器的歷史日誌中記錄這個動作,所以前進和後退按鈕也能正常工作。

The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser's history, so the back and forward buttons work as well.

要定義導航規則,你就要把導航路徑和你的元件關聯起來。 路徑(path)使用類似 URL 的語法來和程式資料整合在一起,就像範本語法會把你的檢視和程式資料整合起來一樣。 然後你就可以用程式邏輯來決定要顯示或隱藏哪些檢視,以根據你制定的訪問規則對使用者的輸入做出響應。

To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.

更深入的討論,參閱路由與導航

For a more detailed discussion, see Routing and navigation.

接下來呢?

What's next

你已經學完了 Angular 應用的主要構成要素的基礎知識。 下面這張圖展示了這些基礎部分之間是如何關聯起來的。

You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.

  • 元件和範本共同定義了 Angular 的檢視。

    Together, a component and template define an Angular view.

    • 元件類別上的裝飾器為其添加了元資料,其中包括指向相關範本的指標。

      A decorator on a component class adds the metadata, including a pointer to the associated template.

    • 元件範本中的指令和繫結標記會根據程式資料和程式邏輯修改這些檢視。

      Directives and binding markup in a component's template modify views based on program data and logic.

  • 依賴注入器會為元件提供一些服務,比如路由器服務就能讓你定義如何在檢視之間導航。

    The dependency injector provides services to a component, such as the router service that lets you define navigation among views.

這些主題的詳情在下列頁面中有介紹:

Each of these subjects is introduced in more detail in the following pages.

當你熟悉了這些基礎構成要素之後,就可以在本文件中進一步檢視它們的詳情了。 要學習能幫你建構和發佈 Angular 應用的更多工具和技巧,參閱後續步驟:工具與技巧

When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see Next steps: tools and techniques.