iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

後轉前要多久系列 第 27

【後轉前要多久】# Day27 Angular - 介紹

終於進入到Angular環節了,
個人學習過程中主要以保哥的Angular教學為主。

Angular 簡介

Angular是基於TypeScript的網頁應用框架,主要由Google團隊把拔維護的跨平台程式語言,
除了可做網頁之外,搭配Electron框架可做出桌面型應用程式。

Angular是純前端的程式,僅會有html、CSS、JS、圖檔等靜態檔案,
不會有任何後端的程式,頂多是接後端API的資料來進行頁面呈現。

Angular logo

Angular中文意思是 多角形的、稜角分明的,有讓網頁各元件彼此分工、各司其職的味道在。
透過Angular,我們能快速將網頁的每個區塊拆分成各個部件,
藉由元件化的開發模式(如:模組包含模組、元件中包含子元件)來進行網頁設計與開發,
好處是不會經由程式碼直接對DOM進行操作 (像JS、JQuery會頻繁的透過querySelector等方式來指定DOM元素),
省掉這個步驟可讓工程師專注於處理頁面呈現及撰寫商務邏輯。

缺點是一開始學習的難度非常高,學習曲線陡峭的令人想放棄。

Angular具有程式碼預先產生機制(Angular Universal),可將HTML預先產生好、將靜態HTML傳送給client瀏覽器呈現後再啟動Angular應用程式。透過router機制達到延遲載入功能,在開發SPA單頁應用網站時非常方便。

除了JavaScript之外,也可用Dart程式語言來開發Angular。

另外,在JS中的所有語法通通都是TS有效語法,
用TS寫好的程式碼,經由TypeScript編譯器(WebPack),在編譯時可以選擇JS版本 如:ES3、ES5、ES2015(支援class的版本)等,能編譯出各種版本的JS程式碼在瀏覽器上執行,

意即TypeScript寫好後,經過編譯後能產出支援任意版本的JavaScript程式碼

TypeSrcipt 是什麼

一言以蔽之,TypeScript就是有型別的JavaScript

可以到TS Playground來玩看看TypeScript。

AngularJS vs Angular 兩者何異

Angular剛推出時(2010年)第一版(v1)因為草創,有許多用法過於艱澀、或者說不夠好用,
於是在第二版(v2)進行大改版,一些用法不互相兼容,
因為版本差異過大,為了區分兩者,把第一版稱為AngularJS
第二版之後(2016年)的所有版本則稱為Angular、或者Angular 2+

在2.0之後或更高的版本,彼此架構就差異不大、兼容性好很多,於是就沒有新的名字。


安裝環境 (Win10)

安裝 Chocolatey

打開PowerShell(以管理員身分安裝),安裝chocolatey管理系統

> Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安裝 Node.js

安裝Node.js(以管理員身分安裝)、以及Git

> choco install -y nodejs git

之前電腦有安裝過chocolatey,但似乎未成功安裝
chocolatey未成功安裝
解決辦法是先刪除 C:\ProgramData\chocolatey 資料夾,再重新執行一次安裝。

透過choco套件管理系統安裝的程式,路徑通常都會在C:\ProgramData\chocolatey\lib底下。

安裝環境 (MacOS)

安裝 Homebrew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝 Node.js

$ brew update
$ brew install node

安裝好Node.js後,
就會有npm這套軟體套件管理系統
要先重新開啟powershell,再透過npm來下載Angular Cli

安裝 Angular Cli

下載最新版本Angular Cli

> npm i -g @angular/cli

若要指定版本,可再後面加上@版本號

如:

> npm i -g @angular/cli@9
> npm i -g @angular/cli@9.1

確認Angular版本,如果能成功執行ng指令代表Angular Cil成功安裝。

> ng --version
或者
> ng v

確認Angular版本

若要移除angular

> npm uninstall -g @angular/cli
> npm cache clean --force
> npm cache verify

建立Angular專案

透過ng來新增專案

> ng new ng-test

這一步驟會問要不要新增routing、以及樣式的格式
ng建立專案步驟

第一次建立專案有可能會跑比較久。
在Windows作業系統上,完成之後會出現一大堆的CRLF提示
CRLF提示

接著進到專案底下

> cd ng-test

執行專案

> npm start

> ng serve

若在Windows平台上使用ng serve遇到set-executionpolicy : 拒絕存取登錄機碼 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell'。等類似問題
set-executionpolicy問題
可先執行 Set-ExecutionPolicy remotesigned -Scope CurrentUser 來放寬安全性的限制。

(npm start的指令參數在 package.json)

執行完後透過瀏覽器開啟 http://localhost:4200/
有出現以下畫面代表專案成功執行

出現以下畫面代表專案成功執行


Angular 目錄架構

我們進剛產好的Angular專案資料夾底下瞧瞧。

夭壽,才剛開始就冒出這麼多的檔案?!

根目錄底下檔案
package.json 給npm看的,用來安裝、管理模組
angular.json Angular Cli的設定檔
.editorconfig 給編輯器看的,如何處理編碼、縮排字元、斷行等
.gitignore 給git看的,可設定不被git紀錄的檔案
karma Karma單元測試工具
tsconfig.json 存放TypeSrcipt相關設定 ES版本
tsconfig.app.json 針對app資料夾內的TS做出額外的定義
tsconfig.spec.json 寫單元測試TS時用到的設定檔
tslint tslint檢查程式碼品質的規則

資料夾

  • node_modules 透過npm安裝好的所有套件
  • e2e end-to-end 點對點測試工具
    • protractor 則是測試的設定檔
    • app.po.ts 由TS寫成的測試程式
  • src Angular應用程式專案主要原始碼:
    • index.html 網站首頁
    • favicon.ico 網站圖示
    • style.css global style 樣式
    • main.ts js主程式進入點,會去啟動 app/app.module (裡面又會啟動AppComponent)
    • polyfills.ts 調整支援舊瀏覽器版本時的設定檔
    • test.ts 寫單元測試,會被 karma.conf.js 檔案載入
    • typings.d.ts 定義額外的TS型別定義,例如整合JQuery到網站中
    • app 資料夾 應用程式主檔案
      • spec.ts 單元測試定義檔
    • assets 資料夾 存放所有靜態檔案。通常存放額外或共用的CSS、JS、JQuery、圖片等
      • .gitkeep 給git看的,純粹給assets資料夾進入版控用(資料夾底下若為空則不會進入git版控)
    • environments 資料夾 存放用到的環境變數,透過TS定義環境變數
      • environment.ts 開發時期用的
      • environment.prod.ts 當只有在build production版Angular才會用到

Angular 應用程式發行部署

> ng build

建置過程中呼叫webpack,將ts編譯、打包成數個JS檔案,
build完之後會產出dist資料夾,
直接將整包dist資料夾複製到伺服器底下即可直接執行。
(只會按照angular.json底下的asset配置建置檔案)

> ng build --prod

壓縮檔案讓JS更小
(從約15MB降到1.42MB)


常用指令一覽

Node.JS npm 指令

啟動服務

> npm start

更新套件

> npm update

列出套件版本

> npm list -g

> npm list -g --depth=0

查詢有無新版本

查看angular cli有無最新版本

> npm outdated -g

安裝

> npm install -g @angular@cli

Angular Cli指令

幫助

> ng -h
> ng generate --help 或 ng generate -h

版本查詢

> ng v
> ng version
> ng --version

升版

> ng update

創建

> ng new test1

啟動

> ng serve

創立元件

> ng generate component test1
> ng g c test1

建置部署

> ng build
> ng build --prod

Angular版本升級

Angular Cli分為global、local版本

更新local版本:

> ng update

自動更新 Angular Cli、Angular、TS、Webpack、rxjs版本
(自動修改package.json 裡的版本號、同時做npm update)

更新global版本:

安裝全域Angular Cli

> npm install -g @angular@cli

可參考版本升級指南及注意事項


上一篇
【後轉前要多久】# Day26 JS - 事件、監聽
下一篇
【後轉前要多久】# Day28 Angular - 四種資料繫結 Binding
系列文
後轉前要多久30

尚未有邦友留言

立即登入留言