Angular學習筆記1 - 認識SPA

發表於 分類於

這個寒假到感覺到後面過得有點空虛，所以找了個東西讓自己的寒假變得充實一點

由於前端的東西我不常去碰，所以我的印象就停留在 MPA 的階段，還在傻傻的從 Server 端套樣板輸出頁面。現在的網頁很講求使用者體驗，像 MPA 這種方式產生出來的網頁應用，對使用者來說可能就不是那麼順暢和便利，而且後端也要花心力去整理前端的部份

原先大概就知道 Angular、Vue、React、JQuery 等前端會使用的框架，但只有一點點使用 JQuery 的經驗而已，其他都是 0 經驗

由於看到了同學在作業上使用 Angular 套版搭了一個小小的網頁，於是我想說也來玩一下

我也是碰到了 Angular 才知道了 MPA、SPA 這些東西

本次學習 Angular 的系列文章，我將參考 IThome 的這份鐵人賽系列：Angular 深入淺出三十天
並透過自己的理解撰寫文章來紀錄學習 Angular 的過程

MPA

在講 SPA 之前，要先說明一下 MPA

MPA 是指一個網頁應用程式是以多個頁面來呈現，這表示每換一次頁都需要發送一次 request 到伺服器上，然後根據 伺服器 response 的 HTML 資料來渲染，過程中會感覺到比較明顯的載入感

MPA 算是比較傳統的頁面呈現方式，然而，這樣的呈現方式由於在換頁上會需要發送 request ，然後重新載入頁面，因此在使用上會覺得換頁時會卡卡的

而 SPA 則沒有這這種問題，由於 SPA 只有在輸入網址時會發送一次取得頁面的 request

SPA

前面有說到，SPA 本身只有在輸入網址時才會發送一次取得頁面的 request ，也就是除了第一次進入網頁，或一些特殊要求外，你其實都只會在一個頁面進行操作。那這又是如何辦到的呢？

靠 AJAX

AJAX (Asynchronous JavaScript and XML)，非同步的 JavaScript 與 XML 技術。是一套綜合了多項技術的瀏覽器端網頁開發技術

取自維基百科

AJAX 可以讓瀏覽器主動發送 request 到服務端，而不須等到使用者換頁或發送表單。透過這樣的技術可以讓網頁發送 request 取得自己要的資料，而不須整理頁面。加上頁面透過 Javascript 來呈現指定的頁面，由此變可以達成在一個頁面進行各項操作的功能

而選擇頁面的部份，則使用了 Hash Tag 和 Javascript 來處理

Hash Tag

網頁的 Hash Tag 通常是用來指定符合 Hash Tag 名稱的 HTML 元素

例如說有一個網址： localhost/website#block，則瀏覽器會找到 id 為 block 的 HTML 元素，並將捲軸滾到該元素的位置

Hash Tag 不會導致換頁，因此不會發送 request，而且也接受斜線，所以可以把路徑放在 Hash Tag 中，讓 Javascript 來解析這個路徑，並將頁面呈現出來

這個部份就是前端的路由 (routing)

Angular

Angular 是一個強大的網頁框架，可透過 nodejs 來安裝，使用物件導向的方式來搭建一個 SPA 網頁，並提供大量有用的功能 (e.g. 注入器，路由)

Angular 本身是使用 TypeScript (你可以當作是 Javascript，印象中兩者其實沒差多少)，可以將專案設定成嚴格模式 (這樣在類型不符合的時候 IDE 會報錯)，因此搭建出來的程式穩固性高。

然而，Angular 本身有一個比較致命的缺點，那就是 Angular 本身很肥，一個專案檔光所需 javascript 套件裝一裝大約 380 MB 左右，建出來的網頁也偏肥，因此如果要製作輕巧的頁面，可能要斟酌一下

2021-02-18 補充：
實際上要安裝 nodejs 的原因是因為 Angular CLI 要使用
由於 Angular CLI 本身可以架設測試用的伺服器以預覽輸出的畫面
這是屬於開發環境的部份，Angular 本身是不需要 nodejs 的

結語

這篇算是我突然想到要做個紀錄才生出來的，至少會把認識、安裝到基礎功能的部份寫完。至於一些特殊寫法，進階內容就看我之後有沒有要繼續深入了。

如果有什麼理解錯誤，或寫得不好的地方，歡迎透過下方的 Gitalk 留言告訴我 (不過我並不是天天看，所以很有可能要好幾天後才會看到)

下一篇會從安裝 Angular 的部份開始講起，因為前幾天剛開始學的時候並沒有去紀錄相關內容，因此環境安裝部份我會另外使用虛擬機來建立

更新

  • 2021-02-14

    1. 將 本次學習 Angular 我將參考 ... 這段從結語移到開頭
      內文改寫：
      本次學習 Angular 的系列文章，我將參考 IThome 的這篇文章這份鐵人賽系列：Angular 深入淺出三十天並透過自己的理解撰寫文章來紀錄學習 Angular 的過程
  • 2021-02-18
    1. Angular 條目：
      • 補充說明
      • 修改：nodejs 套件的大小 大約 200 380 MB
      • 修改：一個專案檔光 nodejs的 所需 javascript套件