Angular 簡介與開發環境建置 - 筆記長也NotesHazuya

Angular 簡介與開發環境建置

2020-12-22 18:31:00   Angular

自從 Laravel 結束後我就開始偷懶了@@,所以時隔半年終於要開始進行下一系列的文章了。

本次學習的是前端框架 Angular,基本上也是不定時更新~

MPA V.S. SPA

在開始介紹 Angular 之前,我們要先介紹以下兩個常見的網頁應用程式形式。

MPA (Multi-Page Application)

多頁面應用程式,是指一個應用程式利用多個 html 檔案來呈現。例如我們的網站有關於我們、首頁、聯絡我們這三個頁面,那當使用者點擊關於我們的時候,伺服器收到請求,就會將整個關於我們頁面的 html 檔案回傳給使用者。

使用者在瀏覽不同網頁的時候,就必須遇到頁面重整的問題,每點擊一個頁面就會讓整個網頁重新載入,連同其他的 JS 及 CSS檔案。

SPA (Single-Page Application)

單一頁面應用程式,顧名思義就是整個應用程式只有一個網頁。這種架構即避免了頁面重整的問題,基本上是利用 AJAX 方法來處理,在使用者發送請求並得到回覆後,僅針對需要變動的元素進行更新。

這樣的架構使得使用者在使用網頁應用程式時,體驗更相近於 Mobile / Desktop 應用程式。

 

比較

即便 SPA 在體驗上更自然,但仍然不是完美的,以下比較兩種的優缺點:

項目/架構 MPA SPA
SEO 較好 較差
使用者體驗 較差 較好(更貼近desktop)
前後端相依性 較高 較低(後端可以專注於API的設計)
no-script 模式 支援(如果網頁沒使用) 不支援(一但不能使用JavaScript就不能瀏覽網站)
適用情境 行銷或較注重SEO的網站,如:官方網站、活動網站、部落格等。 內部或以功能為導向的系統,如:空間預約、管理後台等。

Angular

在傳統的開發方法下,大多是利用 jQuery 這個函式庫來開發前端,並進行 DOM 操作。

在 Angular 下,不必在進行 DOM 操作,Angular 藉由數據驅動的方式來更新畫面,不僅如此,Angular 也導入了 MVC 設計模式、依賴注入、測試工具等,成為了一個完整的開發平台。

Angular ? AngularJS?

AngularJS 基本上算是一個函式庫,還不算是一個框架,今天所指的 Angular 通常是指第二版之後的版本。

Angular 提供了強大的 CLI 工具,在設計網頁的時候會很好用;路由機制也讓 SPA 在進行頁面切換的時候更容易。還有諸多的功能我們會在後面的文章介紹到。

TypeScript

Angular 使用 TypeScript 作為開發語言,TypeScript 可以算是 JavaScript 的增強版或是更嚴謹的版本,關於 TypeScript 這邊不多做介紹。

學習或選擇 Angular 的原因

Angular 對於過往只在後端或是首次接觸網頁開發的人來說真的很不容易上手,與過往的傳統開發方式差異很大,有很多不好理解的作法以及原理。

但是 Angular 比起其他框架而言,Angular 更像是一個開發平台而非單純框架,社群的討論度也不會比 Vue.js 或是 React 來得差。

環境建置

Node.js 以及 npm

npm 是 node.js 的套件管理工具,目前前端框架大多依賴於 npm 進行套件管理,Angular 也不例外,請直接到https://nodejs.org/ 下載即可。安裝 node.js 之後就會連帶安裝 npm,本文就不再贅述。

Angular CLI

這是 Angular 強大的地方,它結合了 Webpack 那些複雜的工具。請直接打開終端機利用下面的指令進行安裝。

npm install -g @angular/cli

安裝完成之後可以輸入以下指令查詢 Angular CLI 的版本

ng version

這樣就代表安裝成功囉!

建立第一個專案

先將終端機移動到要放置專案的目錄之下,執行以下指令

ng new Hello

下面幾種樣式表的選項可以先選擇 CSS。

這樣建立專案之後,進到專案目錄

cd Hello

之後再執行以下指令

ng serve

到瀏覽器輸入 localhost:4200 就可以看到這個畫面惹

Augury

這是 Google 官方所推出的開發者工具,可以直接到瀏覽器的應用市場安裝。

本篇就介紹到這裡,再來會介紹一下專案的目錄結構。


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。