Angular-第1課-開發環境安裝

Angular是一個網頁開發框架。除了能開發桌面版網頁，也能開發行動版的。甚至能打包成App在行動裝置上使用。這一節會安裝開發環境，並建立範例應用程式專案。

課程關鍵字：#Angular CLI

一、安裝Node.js與Angular CLI

在開發Angular應用程式前，需要安裝Node.js。我們要使用它的npm指令來安裝Angular的命令列介面（Command Line Interface，CLI），以便往後開發時能夠快速地建立相關檔案。

請到這個官方網站下載Node.js並安裝：
https://nodejs.org/en/

安裝完Node.js後，打開命令提示字元（以後稱「終端機」），執行下列命令，即可開始安裝Angular CLI。這個動作會下載Angular的命令，藉此幫助開發過程。

npm install -g @angular/cli

二、建立第一個應用程式

安裝完Angular CLI後，就能開始使用Angular的命令了。首先在終端機中切換到想存放應用程式專案的目錄，執行下面的命令即可。此處假設專案名稱為：my-app。

ng new 應用程式名稱
ng new my-app

這時會詢問是否要加入路由（route），請選擇yes。再詢問要採用哪一種樣式表（style sheet），如果沒有特別需求，選擇CSS就好。接著便會開始下載東西。完畢後，會得到一個資料夾，那個就是Angular的應用程式專案。

完畢後，讓我們啟動應用程式。在終端機進入剛剛產生的專案資料夾，執行下面命令。

ng serve --open

稍等一會兒，等到應用程式建置完畢，就會在瀏覽器自動開啟。這時可以看見一個歡迎畫面，也就是Angular的範例專案。

範例專案的歡迎畫面

值得一提的是，Angular CLI會「監視」我們對專案文件的修改，假設修改html的某個文字並儲存，CLI會自動重新建置，並刷新瀏覽器頁面。

三、專案架構簡介

後續單元的教學，會參考Angular官方的教學文件。該文件會慢慢帶我們製作出一個名為「Tour of Heroes」的應用程式。因此，請再練習建立一個Angular專案，名稱為：angular-tour-of-heroes。

ng new angular-tour-of-roes

進入剛剛產生的專案資料夾，前往/src/app目錄，會發現裡面有一些以「app.component」為開頭的檔案。

Angular應用程式是由「組件（component）」組合而成的，而上述的app.component組件是一種「容器」，它容納了其他子組件，拼湊出網頁畫面。這裡介紹目錄中的三種檔案：

1. html檔：定義了網頁畫面的配置，也被稱作layout檔。
2. css檔：提供風格樣式給html檔，如同Android的style檔。差別在於每個組件都有專屬的css檔，但Android只有一份style檔，卻要用在所有地方。
3. ts檔：包含屬於這個組件的程式碼，使用Type Script程式語言撰寫。類似Android的Activity類別。