Angular 入門

Angular （通常稱為Angular 2+或Angular 2）是一個基於 TypeScript 的開源前端 Web 框架，由 Google 的 Angular 團隊以及個人和公司社群領導，以解決所有問題。構建複雜 Web 應用程式時開發人員工作流程的一部分。Angular 是來自構建 AngularJS的同一團隊的完全重寫。 ¹

該框架由幾個庫組成，其中一些是核心的（ 例如 @ angular / core ）和一些可選的（ @ angular / animations ）。

你可以通過使用 Angularized 標記編寫 HTML 模板 ，編寫元件類來管理這些模板，在服務中新增應用程式邏輯以及在模組中裝箱元件和服務來編寫 Angular 應用程式。

然後，通過啟動應用程式自舉的根模組。Angular 接管，在瀏覽器中顯示你的應用程式內容，並根據你提供的說明響應使用者互動。

可以說，開發 Angular 應用程式的最基本部分是元件。元件是 HTML 模板和控制螢幕一部分的元件類的組合。以下是顯示簡單字串的元件示例：

SRC /應用程式/ app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
    name = 'Angular';
}

每個元件都以 @Component 裝飾器函式開始，該函式接受後設資料物件。後設資料物件描述了 HTML 模板和元件類如何協同工作。

selector 屬性告訴 Angular 在 index.html 檔案中的自定義 <my-app> 標記內顯示該元件。

index.html（在 body 標籤內）

<my-app>Loading AppComponent content here ...</my-app>

template 屬性在 <h1> 標頭內定義了一條訊息。訊息以 Hello 開頭，以 {{name}} 結束，{{name}} 是一個 Angular 插值繫結表示式。在執行時，Angular 將 {{name}} 替換為元件的 name 屬性的值。插值繫結是你將在本文件中發現的眾多 Angular 功能之一。在示例中，將元件類的 name 屬性從'Angular'更改為'World'，看看會發生什麼。

這個例子是用 TypeScript 編寫的，它是 JavaScript 的超集。Angular 使用 TypeScript，因為它的型別可以通過工具輕鬆支援開發人員的工作效率。此外，幾乎所有支援都適用於 TypeScript ，因此使用純 JavaScript 編寫應用程式將很困難。但是，在 JavaScript 中編寫 Angular 程式碼是可能的; 本指南解釋瞭如何。

有關 Angular 體系結構的更多資訊，請訪問 此處