本篇介紹 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 目錄下的檔案及其說明。

檔案 說明
app/app.component.{ts,html,css,spec.ts} 定義 AppComponent 用的設定檔、HTML 樣板、CSS 檔與 unit test 設定檔。整個應用程式會以這個根組件為基礎,以樹狀的方式組成。
app/app.module.ts 定義 AppModule,告訴 Angular 如何組織整個應用程式。目前它只包含一個 AppComponent,後來會再增加其他的組件。
assets/* 放置圖片或其他檔案的地方,在佈署應用程式時,這些檔案會直接被複製過去。
environments/* 這個目錄中每個檔案代表一個建構環境,當建立應用程式時,對應設定檔中所設定的變數會被放入應用程式中使用。
browserslist 用來指定要支援的瀏覽器與版本。
favicon.ico 網站的圖示。
index.html 主要網頁檔,Angular CLI 會自動更新這個檔案,開發者不需要更動它。。
karma.conf.js Unit 測試的設定檔,用於 ng test
main.ts 應用程式主要的進入點,編譯(JIT 編譯器,亦可換成 AOT 編譯器)並組織整個應用程式,放進瀏覽器執行。
polyfills.ts 不同的瀏覽器有不同的網頁標準支援度,Polyfills 可以減低這些差異。
styles.css 全域的 CSS 設定檔。
test.ts Unit 測試的進入點。
tsconfig.{app|spec}.json TypeScript 編譯器的設定檔,tsconfig.app.json 是應用程式用的,tsconfig.spec.json 是 Unit 測試用的。
tslint.json 執行 ng lint 時所用的設定檔(TSLint 與 Codelyzer 用的設定檔)。

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

e2e/ 放置 End-to-End Tests 的目錄。
node_modules/ Node.js 放置套件的目錄。
.editorconfig 程式碼編輯器設定檔(只是為了讓每位觀看程式碼的開發者,都可以使用相同的編輯器設定而已)。
.gitignore Git 設定檔。
angular.json Angular CLI 的設定檔。
package.json npm 設定檔。
protractor.conf.js End-to-End Tests 的設定檔。
README.md 專案的基本說明檔。
tsconfig.json TypeScript 編譯器設定檔。
tslint.json 執行 ng lint 時所用的設定檔(TSLint 與 Codelyzer 用的設定檔)。