Angular 新手入門

現在該看一下Google的Angular框架了,這是另一個你經常會遇到的前端框架。在本文中,我們將會探索Angular所提供的功能、安裝必備工具、建立範例應用程式,並進一步瞭解Angular的基本架構。

預備知識: 熟悉基本的HTMLCSS、以及 JavaScript程式語言,具備 終端機/命令列環境 (en-US)的基本知識。
學習目標: 設立本機的Angular開發環境,建立初始應用程式,瞭解Angular基本運作方式。

什麼是Angular?

Angular是一個基於TypeScript的開發平台。身為一個平台,Angular包含:

  • 一個元件化的框架,用來建構可延展的Web應用程式。
  • 一整套經深思熟慮而整合出來的函式庫,包含各種不同的功能,包含路由機制、表單管理、Client/Server通訊,以及更多。
  • 一組完善的開發工具,幫助你開發、建置、測試、更新你的程式碼。

你能使用Angular去開發多種不同規模的專案,小至單人應用式專案,大至大型企業級專案。Angular的設計宗旨是讓後續更新升級十分容易,因此你能輕鬆的使用最新版本進行開發。最棒的是,Angular的開發生態圈龐大,有超過一百七十萬的使用者、套件開發者以及內容創作者。

在開始探索Angular之前,你要先瞭解Angular CLI。Angular CLI是一種快速、簡單、備受推崇的Angular程式開發方式。Angular CLI能讓許多任務變得更容易,以下是一些範例:

ng build 編譯Angular開發的程式到輸出目錄
ng serve 建構應用程式並啟動開發伺服器,當檔案變化時重新建構
ng generate 根據原理圖去生成或修改檔案
ng test 對指定專案進行單元測試
ng e2e 編譯並啟動Angular程式,並執行端到端測試

在建造應用程式時,你會發現Angular CLI是很實用的工具。

你會建立的專案

這一系列的教學會帶領你建立一個待辦事項程式。透過這個程式,你會學到如何使用Angular管理、編輯、增加、刪除和篩選項目。

前置工作

想在本地端安裝Angular,你必須安裝:

  • Node.js

    Angular需要使用Node.js的當前版、活躍LTS版或是長期維護LTS版若需特定版本的資訊,可以參閱在package.json檔案之中的engines關鍵字。

    若想更了解如何安裝 Node.js,可參閱nodejs.org。若你不確定你目前使用的Node.js版本號,請在終端機輸入node -v查閱。

  • npm套件管理器

    Angular、Angular CLI以及Angular應用程式都依賴 npm套件 來實現許多特性與功能。想下載並安裝npm套件,你需要使用npm套件管理器。本教學使用npm客戶端命令列介面,該介面預設安裝在Node.js。欲檢查你是否安裝了npm客戶端,請在終端視窗中執行npm -v



設置你的應用程式

你可以在終端機裡透過使用Angular命令列介面(CLI)來產生、建置、測試和佈署Angular應用程式。請在終端機裡執行以下指令來安裝Angular命令列介面:

npm install -g @angular/cli

Angular CLI的指令開頭均為ng,接著是你希望CLI進行的事項。在桌面目錄中,使用 ng new指令創建一個名為todo的專案:

ng new todo --routing=false --style=css

使用ng new指令會在桌面創建一個小型入門Angular的專案。其他的標籤,--routing--style,則是定義專案中的導航與樣式。本教學導覽會在後續篇章詳細解釋這些特性。

如果被詢問是否使用嚴格型別檢查模式,可以回覆「同意」。

輸入cd指令切換到你新開的專案:

cd todo

想執行你的todo專案,請使用ng serve

ng serve

當CLI詢問是否使用情況分析,回覆no

在瀏覽器中,導至http://localhost:4200/來查看你新建的專案。如果你更改任何原始資料夾,應用程式會自動加載更新。

ng serve運行時,你或許會想開啟第二個終端機視窗來運行其他指令。如果你想中斷應用程式運行,請在終端機內按下Ctrl+c

熟悉你的Angular程式

本教學導覽主要是用的程式原始檔在src/app資料夾內。由CLI自動產生的主要檔案如下:

  1. app.module.ts:列出此專案使用的所有檔案。此檔案在專案中扮演中央樞紐的角色。
  2. app.component.ts:又被稱為元件類別(Class),內含此專案主要頁面的相關邏輯
  3. app.component.html:內含AppComponent所使用的網頁html。這個檔案的內容也被視為元件模板(Template),此模板定義你在瀏覽器中看到的畫面。
  4. app.component.css:內含AppComponent裡面的樣式。當你想定義某些樣式給特定模組使用,卻不希望影響到整體程式時,便可使用此檔案進行設定。

一個Angular的元件由三部份構成,分別是:模板、樣式、類別。舉例來說,app.component.tsapp.component.html、以及app.component.css一同構成AppComponent。此結構會將邏輯、畫面、樣式分開,如此一來便能讓程式更易於維護與擴張。

如此一來,你就能在一開始便依循最佳的實作慣例。

Angular CLI也能產生app.component.spec.ts的元件測試檔案,但本次教學導覽不會深入探討測試的部分,所以你可以忽略這個檔案。

一旦你建立一個元件,CLI就會按照你的命名在目錄中建立此四個檔案。

Angular的專案結構

Angular基本上是用TypeScript作為主要開發的語言。 簡單來說,TypeScript是JavaScript的超集合,也就是說在JavaScript中使用的語法也同樣適用於TypeScript。 而TypeScript比純JavaScript更加強化型別的規範、寫法也更簡潔,因此使用TypeScript可以寫出更好維護的程式碼,並減少報錯的機率。

在Angular框架裡,主要是由許多元件(Components)來組成。 一個元件包含HTML頁面架構、樣式以及帶有元件裝飾器@Component()的TypeScript類別(class)。

類別

類別(class)裡會放這個元件的邏輯、規則, 舉例來說像是函式、事件監聽、屬性和參考等等。 類別會放在一個像是feature.component.ts的檔案裡,而feature就是你的元件名稱。 所以你可以建立一些檔案,並且命名為像是header.component.tssignup.component.ts或是feed.component.ts。 當你建立一個元件,它會帶有@Component() 這樣的裝飾器,裡面會有檔案的路徑指向,告訴Angular要去哪裡找HTML和CSS檔案。 一個基本的元件寫法如下:

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

@Component({
  selector: 'app-item',
  // 接下來的檔案路徑會指出其它檔案在什麼位置
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})

export class ItemComponent {
// 程式碼寫在這裡
}

這個元件會被稱為ItemComponent,它的選擇器是app-item。 這個選擇器就像HTML的標籤,你可以把它放在其它的模版裡。 當瀏覽器渲染到選擇器的時候,就會把這個元件的模版給渲染出來。 這份教學文件會指引你建立兩個元件,並把其中一個放到另一個元件裡。

Angular的元件模組具備高度封裝性,讓專案結構看起來更直覺。 而Angular的元件也讓專案更易於做單元測試、讓程式碼更易於解讀。

HTML模版

每個元件都會有HTML模版去告訴瀏覽器要如何渲染頁面。HTML可以直接內嵌寫在類別(Class)的檔案內,或是用檔案路徑去指明其位置。

而要去指明位在他處的HTML檔案,就要使用templateUrl這個屬性,範例如下:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
}

當你把HTML內嵌寫在類別(Class)的檔案內時,要使用template這個屬性,並用反引號把HTML包起來,範例如下:

@Component({
  selector: 'app-root',
  template: `<h1>Hi!</h1>`,
})

export class AppComponent {
}

Angular還擴充了HTML的語法,讓你可以在元件中使用動態插值。 當你的元件狀態改變時,Angular會自動重新渲染該節點。 下面的例子中會使用插值去插入一段文字來示範這個功能。

<h1>{{ title }}</h1>

雙花括號的地方就是告訴Angular插值顯示的地方。 title的值就是從元件的類別來的:

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

@Component ({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'To do application';
}

當載入完元件和它的模版時,會在瀏覽器看到如下的呈現:

<h1>To do application</h1>

Styles

每個專案裡會有個全域性的樣式設定檔案styles.css,所有的元件都可以繼承它,並且再各自增加或覆寫它的樣式設定。 你可以直接在裝飾器@Component()裡寫出這個元件特有的樣式,或是用路徑指明它的CSS檔案位置。

要直接在元件裝飾器內設定樣式,就要使用styles這個屬性,範例如下:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['h1 { color: red; }']
})

但基本上,元件通常會把樣式另外寫在一個檔案,並用styleUrls去指明它的檔案路徑,如下:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

以此去寫出這個元件特定的樣式,讓你更容易去維護你的CSS檔案。

總結

以上這些就是關於Angular的簡介。這時候的你,應該已經對Angular的運作有基本的了解,並準備建立一個Angular的專案。在下一篇文章裡,我們會更深入的應用這些知識,並且試著用Angular去寫一個「待辦清單」。

In this module