---
# System prepended metadata

title: Angular零到有建立專案
tags: [Angular, Web, Front End]

---

###### 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)
```

![](https://i.imgur.com/qM87uHs.png)


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

### Step2:用Visual Studio開啟專案
 - 開啟資料夾
 ![](https://i.imgur.com/RkXKjPF.png)
 - 到專案根目錄點選開啟
 ![](https://i.imgur.com/8bTMoar.png)
 - 開啟專案
 ![](https://i.imgur.com/agCdqPw.png)

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

```
1. ng serve  (Default Port:4200)
2. ng serve --port portnumber
```
![](https://i.imgur.com/0qjdeaa.png)

在執行過程中，會詢問是否要將執行過程的一些資訊回傳Google，這邊我們直接輸入Y
![](https://i.imgur.com/xWW9c1T.png)

編譯完後專案就會啟動，此時會給你一個URL Link
![](https://i.imgur.com/avfMxPF.png)

點選後就會看到網頁畫面
![](https://i.imgur.com/P3atM10.png)


## NgrOK

### 簡介

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

![](https://i.imgur.com/oZq8OjO.png)

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

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

### 使用

 - [Step1:先到官網下載]((https://ngrok.com/download))
 - Step2:解壓縮到自己想放置的路徑
 ![](https://i.imgur.com/S6ysyhk.png)
 - Step3:下Cmd Run啟用Ng Project
 ```
 ng serve --port 4200 --disable-host-check
 ```
 - Step4:當Ng Project啟用後，開啟Cmder並到ngrok目錄下
 ![](https://i.imgur.com/JT7ZbgG.png)

 - Step5:下ngrok指令Run起對應Port
 ```
   ngrok http -host-header=rewrite 4200
 ```
 ![](https://i.imgur.com/OTLZZLT.png)

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