###### tags: `Web` `Front End` `Angular`

# Angular零到有建立專案

## 安裝環境

### 需安裝軟體
- [Visual Studio Code](https://code.visualstudio.com/)
- 下載最新版本
- VS Code建議下載Package
- Angular 10 Snippets
- Angular Extension Pack
- Angular Language Service
- Angular Schematics
- Angular Snippets (Version 11)
- CSS Formatter
- Debugger for Chrome
- Autoprefixer
- Auto Import
- [Node.js](https://nodejs.org/en/)
- 安裝完成可以到Cmd下npm -v查看是否有版本訊息
- Angular CLI 需要 Node 4.X 和 NPM 3.X 以上的版本支援。
- [安裝Angular CLI](https://angular.tw/guide/setup-local)
- npm install -g @angular/cli

- [Cmder](https://cmder.net/)
- Cmder是具有Linux指令的Terminal，除了VS Code終端機操作外，也可透過此終端機介面操作。

## 新增專案

### Step1:開啟Cmder，接著下指令

ng new (projectName)


當下完新增專案指令會有三個選項讓你做選擇
- [1.是否開啟嚴格模式](https://angular.tw/guide/strict-mode)
- 建議開啟
- 2.是否建議加入Rouing設定
- 建議開啟
- 3.選擇stylesheet
- 對SCSS不熟的建議選擇CSS

### Step2:用Visual Studio開啟專案
- 開啟資料夾
- 到專案根目錄點選開啟
- 開啟專案

### Step3:開啟VS Code終端機並運行，下指令

1. ng serve  (Default Port:4200)
2. ng serve --port portnumber


在執行過程中，會詢問是否要將執行過程的一些資訊回傳Google，這邊我們直接輸入Y

編譯完後專案就會啟動，此時會給你一個URL Link

點選後就會看到網頁畫面

## NgrOK

### 簡介

這邊稍微介紹一下ngrok，他可以讓內網伺服器與外界溝通的一個服務，簡單來說就是一個reverse proxy的工具，透過把local的port map到一個public的地址，讓外部能夠透過這個public地址連到，然後工具用reverse proxy和local實際的port取得資料。


由於這個過程，因此有個缺點，那就是速度相對較慢，尤其是ngrok的伺服器在美國因此也會減少一些速度。不過如果是爲了開發測試用，這個就不算缺點。

ngrok免費版本提供了一個動態的地址，需要進階功能或者同時map多個服務就需要付費。

### 使用

- [Step1:先到官網下載]((https://ngrok.com/download))
- Step2:解壓縮到自己想放置的路徑
- Step3:下Cmd Run啟用Ng Project

 ng serve --port 4200 --disable-host-check

- Step4:當Ng Project啟用後，開啟Cmder並到ngrok目錄下

- Step5:下ngrok指令Run起對應Port

   ngrok http -host-header=rewrite 4200


此時我們就可以看到，ngrok提供http與https URL，將網址給外部想看的使用者
http://db9d34f62661.ngrok.io
https://db9d34f62661.ngrok.io
此時他們就能連進來看實際網頁