Angular 網頁應用程式 Hello World 教學

本篇介紹 Angular 網頁應用程式的 Hello World 程式。

安裝 Node.js、NPM 與 Angular CLI

開發 Angular 應用程式需要 Node.js 8.x 與 NPM 5.x 以上的環境，先安裝最新的 Node.js：

# 安裝 Node.js
sudo apt-get install nodejs

再安裝最新的 NPM：

# 安裝最新版的 NPM
sudo npm install -g npm@latest

Angular CLI 是一個指令介面的 Angular 專案開發工具，可以用來建立專案、增加檔案、測試與佈署專案等。

Angular CLI 可使用 npm 來安裝：

# 安裝 Angular CLI
sudo npm install -g @angular/cli

建立 Angular 專案

使用 Angular CLI 產生一個新的應用程式框架：

# 建立應用程式框架
ng new my-app

Angular CLI 會自動安裝必要的 NPM 套件、並建立一個基本的專案。

接著啟動開發用的伺服器：

# 啟動開發用伺服器
cd my-app
ng serve --open

開發用的伺服器會自動檢查專案內的檔案，當有檔案變動時，就會自動重新載入。

開啟 http://localhost:4200/ 這個開發用的網址，即可看到基本的 Angular 應用程式畫面（在執行伺服器時，若加上 --open 參數，就會自動呼叫瀏覽器開啟這個網址 ）。

Angular 應用程式

編輯應用程式

在這個應用程式中，Angular CLI 自動建立了一個 Angular 的組件（component）作為根組件（root component），其名稱為 app-root，我們可以編輯 src/app/app.component.ts 這個 TypeScript 原始檔，查看這個組件。

在這個 TypeScript 原始檔中，我們可以修改組件的屬性，例如更改 title 屬性：

export class AppComponent {
  title = 'My First Angular App!';
}

這樣就可以改變上方的標語文字內容，修改完並儲存案之後，伺服器會自動偵測有變動的檔案，即時更新網頁上的呈現結果。

更改標語

若要更改標語的文字大小顏色等屬性，可以編輯 src/app/app.component.css，加入一些 CSS 設定：

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

更改 CSS 屬性

以上就是 Angular 基本的 Hello World 程式，若要進一步繼續學習 Angular 完整的應用程式開發，可以參考 Angular 官方的 Tour of Heroes Tutorial。

專案檔案結構

在整個 Angular 專案中有非常多的目錄與檔案，以下是一些 src 目錄下的檔案及其說明。

以下是一些根目錄下的檔案及其說明。