前端網頁工程師入門必備！認識Angular－菜鳥救星RookieSavior

前端網頁工程師入門必備！認識Angular

文、意如老師

參考目錄：
第1篇、前端網頁工程師－Angular初探篇
第2篇、建立第一個Angular專案
第3篇、認識Angular中的路由（Routing）與元件（Component）
第4篇、認識Angular中的路由導覽（Nav）
第5篇、認識Angular中的模組（NgModule）
第6篇、認識Angular中的模板（Template）語法
第7篇、認識Angular中的*ngIf、*ngFor、ngSwitch語法
第8篇、認識Angular官方所推薦的模組化元件－Angular Material
第9篇、Angular－使用 Flex-Layout模組來建立網站基本框架
第10篇、Angular－實作左側欄加上導覽列
第11篇、Angular－實作上方標題列
第12篇、Angular－綜合應用實作篇(1)－實作按鈕切換圖片
第13篇、Angular－綜合應用實作篇(2)－表單輸入後按下Enter，或離開輸入框時，取得輸入的值並顯示出來
第14篇、Angular－抓取API資料，並將抓回來的資料呈現在表格上

任務一：Angular是什麼？
任務二：認識Angular CLI
任務三：環境建置
3-1 : 安裝Ｎode
3-2 : 安裝Angular CLI
3-3：建立Angular專案
3-4 : 啟動專案
任務四：認識基本專案架構

任務一：Angular是什麼？

Angular是由Google 基於TypeScript編寫的Javascript前端框架，也可以稱為是一個開發平台，在Angular2版本中整合了許多功能。

例如我們常用的
i18n－多國語系化
Animation－動畫
Router－提供路由機制開發SPA
Angular CLI－命令列工具，可用來建立專案、建立應用和函式庫程式碼
這些好用的功能已全都整合至Angular2中。

任務二：認識Angular CLI

Angular CLI 是一個開發工具，利用cmd指令下 ng 命令可用來執行多種開發任務，例如：建立專案、使用函式庫程式碼、測試、打包和發佈。

認識CLI常用指令：

指令	描述
ng build	編譯Angular開發的程式到輸出目錄為dist/中
ng config	angular.json 文件中檢索或設置 Angular 配置值
ng help	列出可用命令及其簡短描述
ng new	創建一個Angular工作區
ng serve	建構應用程式並啟動開發伺服器，當檔案變化時重新建構
ng run	可選自定義構建器配置運行Architect目標
ng generate	根據原理圖去生成或修改檔案
ng test	對指定專案進行單元測試
ng e2e	編譯並啟動Angular程式，並執行端到端測試

任務三：環境建置

任務3-1：安裝Node
安裝Angular，必須安裝Node與npm套件管理器。
所以先到Node官網下載並安裝（預設npm也會一起被安裝）
https://nodejs.org/en/download/

裝好打開Terminal或Cmd輸入npm-v，如果有看到npm版本號，代表已安裝成功。

任務3-2：安裝 Angular CLI
指令：npm install -g @angular/cli
查詢是否安裝成功，輸入指令ng v，查詢版本資訊，如出現以下畫面即代表安裝成功。

任務3-3：建立Angular專案
首先透過指令ng new 來建立一個工作區，並初始化專案，也會使用git進行版本控制。
先開啟cmd或terminal，輸入cd 指令到預設要放專案的目錄後，再輸入以下指令。
指令：ng new myproject
此時會問
would you like to add Angular routing ? 按下y繼續
Which stylesheet format would you like to use? 按下Enter繼續

安裝完成後會出現以下文字
Packages installed successfully .
Successfully initialized git .
代表已經建立成功，查看我們的目錄已經多了一些初始化的資料。

任務3-4：啟動專案
1. 先到cd 到剛剛建立的目錄，指令 cd myproject
2. 接著把專案build起來，指令 ng serve –open

ng serve 指令會啟動伺服器，並可查看檔案狀態，只要有任何改變就會重新建構
–open 或簡寫 -o 都可以自動開啟瀏覽器
自動開啟瀏覽器，或自行開啟瀏覽器在網址列輸入：http://localhost:4200/
有出現以下畫面即代表專案已經編譯並啟動成功。

任務四：認識基本專案架構

剛剛建立好的myproject專案，架構預設如下：

接下來認識幾個比較重要的檔案、資料夾

目錄	說明
myproject	專案資料夾根、目錄
/src	開發的程式碼都會放這裡
/src/app/	包含整個網頁應用程式的模組（Module）、模板（Template）、元件（Component）、服務（Service）、服務（Service）
/src/assets/	放置圖片等靜態資源（Image、CSS、Font）
/src/environments/	放置環境變數設定檔
/src/environments/ environments.ts	標準開發環境變數設定檔production：false
/src/environments/ environment.prod.ts	生產環境變數設定檔（production：true）
angular.json	Angular CLI 設定檔 Angular workspace 和 project 的預設配置
tsconfig.json	TypeScript 編譯設定檔