[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@lastestsudo：電腦是 Mac 才需要加上，用來取得使用權限，指令 enter 後會需要輸入使用者密碼確認
-g：在全域安裝 Angular CLI
@lastest：下載最新版本，選擇性的也可以不加
如果之後需要更新 Angular CLI 到最新版本，可以輸入：
npm update -g @angular/cli建立專案
進入想要建立專案的資料夾內，假設要建立一個名為 my-first-app 專案，在終端機輸入指令：
ng new my-first-appng new 指令就會將應用程式所需的檔案、套件一併自動建立，可以省去很多手動建立的時間。
接下來會冒出兩個問題：
- 是否要加入 routing ? (Y/N) 輸入 Y 或 N 即可，選擇 N 的話之後也能手動加入
- 選擇 stylesheet 格式 ? 預設是 CSS，可以依據你的需求切換成 SCSS, Sass, Less
選好之後就可以等待專案建立囉！
啟動專案
進入剛剛建立好的專案資料夾並啟動應用程式：
cd my-first-app
ng serveng 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做出一個元件。
