[Angular筆記30天]#1啟動Angular專案
開始學習 Angular 後決定用筆記30天的企劃紀錄所學,雖然標題叫做 Angular 筆記30天,但不一定是連續每天一篇啦,比較像是給自己的目標,至少要在這個主題發布30篇文章!也是30個學習摘要。
今天是挑戰的第一天,想必就要來講一下要「如何快速的啟動一個 Angular 專案」,還有搞懂那麼多個「檔案之間的關係」吧!
環境設置 — Angular CLI
開發 Angular 會需要用到 Angular CLI 這個非常好用的命令列工具,我們可以透過它,用簡單的命令來建立專案、開發、測試、部署、維護等。
在安裝 Angular CLI 前,需要確保已經有安裝 Node.js LTS版和 npm 套件管理器。
Node.js 可在終端機輸入
node -v
查詢目前安裝版本;npm 可在終端機輸入npm -v
確認是否有安裝。
接下來安裝 Angular CLI,只要打開終端機輸入指令:
sudo npm inatall -g @angular/cli@lastest
sudo
:電腦是 Mac 才需要加上,用來取得使用權限,指令 enter 後會需要輸入使用者密碼確認
-g
:在全域安裝 Angular CLI
@lastest
:下載最新版本,選擇性的也可以不加
如果之後需要更新 Angular CLI 到最新版本,可以輸入:
npm update -g @angular/cli
建立專案
進入想要建立專案的資料夾內,假設要建立一個名為 my-first-app
專案,在終端機輸入指令:
ng new my-first-app
ng new
指令就會將應用程式所需的檔案、套件一併自動建立,可以省去很多手動建立的時間。
接下來會冒出兩個問題:
- 是否要加入 routing ? (Y/N) 輸入 Y 或 N 即可,選擇 N 的話之後也能手動加入
- 選擇 stylesheet 格式 ? 預設是 CSS,可以依據你的需求切換成 SCSS, Sass, Less
選好之後就可以等待專案建立囉!
啟動專案
進入剛剛建立好的專案資料夾並啟動應用程式:
cd my-first-app
ng serve
ng serve
指令會啟動伺服器並監聽所有檔案,檔案一有更動就會帶動應用程式更新,因此通常在開發過程中都會保持伺服器開啟;如果要關閉伺服器,只需要輸入 ctrl + c
(⌃ + c
)。
當你看到像上圖的畫面,代表已經成功啟動伺服器,且監聽在 localhost:4200,在瀏覽器輸入 http://localhost:4200 就能看到目前應用程式的頁面,如下圖。
如果你不想這麼麻煩,也可以輸入:
ng serve -o
-o
:--open
的縮寫,它會在啟動伺服器後,直接幫你在瀏覽器中開啟應用程式
檔案之間的關係
當你在終端機上輸入指令 code .
開啟程式碼編輯器後,會看到以下這些檔案:
不看還好,一看整個傻眼,一堆檔案看得頭昏眼花,那就先關起來好了(不行!)
起始頁面和起始執行檔
首先可以看一下 angular.json
這隻檔案,主要是 Angular CLI 提供的 project 和 workplace 的預設配置。在 project 這邊可以看到以你 project title 為屬性的物件,其中可以看到下圖中紅色框起來的部分:
index
屬性值為 src/index.html
,說明起始頁面為 src 資料夾中名為 index.html 的檔案;而我們知道,頁面內容需要透過載入 JavaScript 來做出動態的畫面呈現,其中 main
屬性值 src/main.ts
就是負責這個任務的起始執行檔。
副檔名 ts 為 Typescript 程式語言的編輯檔,Typescript 相較於 JavaScript 對於資料型別的規範更為嚴謹,class 和物件導向的概念較完整,在開發較大的專案時能更好維護、避免出現資料型別轉換的錯誤;但 Typescript 無法在瀏覽器上執行,因此會經過編譯轉換成 JavaScript。
而 Angular 主要是使用 Typescript 編寫的框架,後續會常看到很多 ts 檔。
起始模組
接著將起始執行檔 main.ts
打開,可以發現裡面載入並使用了名為 AppModule
的起始模組,而這個模組被放在 app
資料夾裡。
Angular 主要會透過起始模組作為接口執行所有的模組;通常專案會依據功能拆分出多個模組,而這些模組都會在起始模組中載入,統一從起始模組被執行。
起始元件
再來打開 app.module.ts
檔觀察一下 AppModule
這個起始模組,@NgModule
內 bootstrap
屬性值為 [AppComponent]
,意思就是將 AppComponent
作為起始元件,而這個元件也被放在 app
資料夾裡。
Angular 的 UI 呈現是由元件(Component)構成,因此專案中可能建立很多個元件,這些元件都以起始元件作為接口,在 @NgModule
中載入才能被使用。
最後的最後了!請同時打開 app.component.ts
檔和 index.html
檔:
你會發現 AppComponent
這個起始元件中有三個屬性,分別是被紅色框起來的 templateUrl
和 styleUrls
,以及被黃色框起來的 selector
。
templateUrl
和 styleUrls
分別代表要使用的樣板和樣式,檔案也是來自同層資料夾的 app.component.html
和 app.component.css
。
而 selector
設定的名稱就像是 CSS 選擇器的概念一樣,會將這個元件形成名為 app-root
的 tag,有<app-root>
的地方都會被帶入 app.component.html
這隻檔案。
修改起始元件
試試看,把 app.component.html
檔的內容全部刪掉並新增 <h1>
,如下:
接著,從瀏覽器打開 http://localhost:4200/ (這邊要注意伺服器有啟動,輸入 ng serve 重新啟動專案):
江江~<app-root>
的內容的確變成 app.component.html
檔的內容了!
總結
這篇文章主介紹了如何快速開一個 Angular 專案,以及初始專案中檔案之間的關係、如何取用,因此沒有深入探討像是 @Component
, export class
等語法的部分,下一篇文章就會針對元件(component)做介紹,說明如何從0到1做出一個元件。