###### tags: `Tutorial` `Web` `Angular` `VisualStudio Code` `Andy`

# Web & Angular & VisualStudio Code Tutorial

在本篇文章中，我希望能夠帶一些網頁基本觀念給剛踏進這個領域的人，另外也會簡單的介紹一下 ==前端框架 - Angular==的架構及==IDE - VisualStudio Code==，若有疑問或建議也歡迎多多指教。

## 網頁基礎知識

首先，先來了解一下我們幾乎天天都會用到的網頁是怎麼運作的吧！

### 當你搜尋網址的時候會發生甚麼事

下面這張圖顯示了整個Web運作的流程，訊息量不少，我們一步一步來解說。

1. 輸入網址後，`DNS(Domain Name System)`會==尋找該網址鍊接的特定IP位址==，首先會檢查4種不同層級的 Cache，由先到後依序為：
* 檢查**瀏覽器緩存**
* 瀏覽器檢查**操作系統緩存**
* 檢查**路由器緩存**
* 檢查**ISP緩存**
2. 若以上的 Cache 都找不到請求網址，則`ISP(Internet Service Provider)`的 DNS 服務器會==發起 DNS 查詢==。此查詢目的是搜索 Internet 上的多個 DNS 服務器，直到找到正確的網站 IP 地址，最後返回瀏覽器。
3. 瀏覽器發起與匹配 IP 地址的服務器進行 TCP 連接，而建立TCP的連接會經過三步過程，稱為==TCP/IP 三向握手==。
4. 建立好 TCP 連線後，瀏覽器就可以向網絡服務器==發送 HTTP 請求==去進行請求資源或提交表單等等的溝通。
5. 網絡服務器（即 `Apache`、`IIS`等），它==接收來自瀏覽器的請求並將其傳遞給請求處理程序以讀取並生成響應==。
6. 服務器發出 HTTP 響應，服務器響應包含您請求的網頁以及狀態碼、壓縮類型（Content-Encoding）、如何緩存頁面（Cache-Control）、要設置的任何 cookie、隱私信息等。其中狀態代碼非常重要，因為它告訴我們響應的狀態。有五種使用數字代碼詳細說明的狀態。
* 1xx 僅表示信息性消息
* 2xx 表示某種成功
* 3xx 將客戶端重定向到另一個 URL
* 4xx 表示客戶端出錯
* 5xx 表示服務器端出錯
7. 瀏覽器渲染HTML內容。

### 網頁的組成

網頁是透過哪些語言所組成的呢？主要有三大種：
1. HTML - HyperText Markup Language 超文本標記語言
2. CSS - Cascading Style Sheets 層疊樣式表
3. JS - JavaScript


接著就根據這三個語言做簡單的說明：

#### HTML

如果以汽車來比喻的話，HTML對於網頁來說就像汽車的骨架，是整個==網頁的基底==，所有你看到的文字、按鈕及圖片等都是使用HTML去撰寫。

#### CSS

CSS對於網頁來說則像是漂亮的車殼與內裝，負責整個網頁的==排版、色調等UI的美化==，CSS的存在也是很重要的，試想一個很醜的網頁，使用者才剛開起來就想關掉了，就算功能再厲害也沒有用。

↑ 移除CSS樣式的網頁 ↑

↑ 加上CSS樣式的網頁 ↑

#### JS

JS對於網頁來說就如同煞車、油門及方向盤，可以用它來增添網頁與==使用者的互動性==，例如撰寫一些按鈕監聽事件、顯示或隱藏畫面上的物件及呼叫API跟後端去要資料等。

## Angular 基礎知識

對網頁有基本的知識後，我們要如何開始撰寫呢？
單論"撰寫"這件事是很簡單的，直接新增一個記事本就可以開始撰寫一個網頁，只要語法及附檔名正確，寫完後點開html檔就會用預設的瀏覽器開啟了，相信部分有資工背景的人在學校課堂中應該也都做過這件事。
不過現況來說絕大部分的網頁撰寫都會使用==框架 及 IDE==來幫助我們更快速且順利的開發，接下來要介紹的`Angular`就是目前較熱門的框架之一。

### Angular 簡介

`Angular`在目前的前端三大框架(`Vue`、`React`、`Angular`)中，被認為是最難上手的框架，那為何要選用這個框架？它又有那些優點呢？以下條列我認為這個框架的優點供參考：

1. 強大的內建功能 – `Angular` 內建許多好用、強大的功能，例如路由（`routing`）、依賴注入（`dependency injection`）、響應式表單（`reactive form`）等等，當然也少不了 HttpClient 這類必備的基本功能。
2. 妥善的模組化 – 模組（`module`）與元件（`component`）的機制，讓我們可以妥善的解藕我們的程式，搭配 `DI` 注入讓我們程式好開發又好維護
3. 使用`TypeScript`語言 - `Angular` 使用強型別的 `JavaScript`: `TypeScript` 開發，有效發揮強型別語言的好處，讓我們在開發時期就能發現多數的錯誤，提高開發效率還能減少 bug。
4. 強大的CLI - 使用`Angular CLI`可以讓我們只需要下簡單的指令就可以完成許多事，像是建立元件、模組及運行網頁等。

也因為`Angular`的架構比較完整及嚴謹，所以更適合拿來==開發大型的專案==，但同時也因此會造成初學時會有陣痛期。

## VisualStudio Code 基礎知識

有了框架，當然也要有好用的整合開發環境(IDE)，甚麼是IDE呢？
IDE是一種輔助程式開發人員開發的應用軟體，通常包括程式語言編輯器、自動構建工具及除錯器，讓我們可以==更快速、更直覺及更方便的開發程式碼並能及早發現錯誤==，而目前我們公司寫前端使用IDE就是微軟旗下的產品`VisualStudio Code`。

### VisualStudio Code 簡介

↑ VisualStudio Code的圖形化介面 ↑

VisualStudioCode的介面淺顯易懂，接下來就針對常用的部分做說明：

* 第一個圖示會開啟專案資料夾區，在這裡可以看到所有的專案檔案。

* 第二個圖示可以對專案所有的檔案進行文字搜尋及取代。

* 第三個圖示則是Git的版控管理，在這裡可以查看變更、進行認可、推送及拉取等Git操作。

* 第五個圖示是擴充套件的管理，在這裡可以下載一些套件來讓我們的IDE更好用更智慧。在這裡順便推薦一下一定要裝==Will保哥==整理好的`Angualr Extension Pack`，安裝時它會自動安裝所有保哥在開發Angular時推薦使用的套件，簡單來說就是個超讚套件懶人包！

## 學習資源

有了這些基礎觀念後，接著就可以開始學習更多更深入的內容囉！礙於隱私性問題，我把學習資源的連結整理好放在公司NAS裡面，以下提供路徑，可以使用檔案總管直接開起來。
\\192.168.140.150\共用區\程式開發\學習資源整理.txt

## 參考連結
* [當您在瀏覽器的地址欄中輸入 URL 時會發生什麼？](https://blog.knowbe4.com/what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser)
* [當您在瀏覽器中鍵入 URL 並按 Enter 時會發生什麼？](https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a)
* [網頁的三大基本組成語言](https://codingbeginner01.com/html-css-javascript/)
* [Angular 深入淺出三十天-By Leo大](https://ithelp.ithome.com.tw/articles/10202021)
* [網站一條龍 - 從架站到前端](https://ithelp.ithome.com.tw/articles/10259252)