iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

Angular 大師之路系列 第 1

[Angular 大師之路] Day 01 - 開場閒聊

使用 Angular 作為前端開發框架也有兩三年的時間了,這段時間深深能體會到 Angular 是一個非常強大且易學的框架,只要是有點經驗的開發人員,在閱讀過官方的 Tutorial 文件 8 篇文章後,都能夠解決掉大部分的前端需求。

而這次的鐵人賽系列文,則是希望能分享 Tutorial 8 篇文章以外的更多技巧,這些知識可能在官方文件都找得到,也可能是個人的一點經驗;而些知識儘管在平常不一定會使用到,但在適當的時機,卻能幫助我們以更簡潔的程式碼來解決更複雜的問題

討論範圍

這次系列文還是會以 Angular 官方文件內容為主,加上個人的一些開發經驗,以及深入原始碼後所得到的一些心得,希望能幫助讀者們能在使用 Angular 開發網站時能更加得心應手。由於這系列是以比較進階的內容為主,因此讀者的進入門檻為至少應該能夠理解 Tuorial 文件的 8 篇文章,並有一些基本的開發經驗,以這 8 篇文章來說,讀者應該具有以下基本功力,也就是本系列文章不會著墨太多的部分:

  • 具有基本 HTML / CSS / JavaScript 與 TypeScript 知識
  • 理解使用 Angular CLI 建立的專案基本架構
  • 理解如何使用 Angular CLI 產生程式碼骨架
  • 了解基本的資料綁定方式
  • 能夠運用 *ngIf*ngFor 等基本的結構指令
  • 能夠運用 @Input@Output 讓元件與元件之間溝通
  • 了解 Service 的基本觀念
  • 懂得使用路由建立多頁面的應用程式
  • 懂得使用 HTTP 服務呼叫 API

而以上範圍之外的,就是我們真正要討論的議題,大致上會包含以下幾個大主題:

Angular 各種技巧與觀念

包含各種 Angular 重要的知識與開發技巧,如

  • 程式啟動與生命週期管理
  • 強大的相依注入
  • 樣板語法
  • 進階表單 (Reactive Form)
  • 模組化設計
  • 進階路由
  • 其他...

Angular CLI 雖然不是 Angular 框架本身的核心,但強大的功能絕對無法被忽視,所以在這個單元也會一併聊聊更多深入的 Angular CLI 技巧。

Angular 元件設計

在現代網頁程式開發中,將功能切成獨立的元件(components)再組合起來已經幾乎變成常識了,Angular 提供了很多的特色,來幫助我們打造出結實又有彈性的元件,因此從核心功能額外抽出來用幾篇文章來介紹。

Angular 官方生態圈

這部分介紹的是由 Angular 官方開發,但在 Angular CLI 中不會預設安裝的套件,這些套件多半是用來解決特定的問題,如 Server Side Rendering、Angular Elements 等等。

Angular 效能調校

在這個單元中我們將深入學習 Angular 變更偵測等觀念,以及一些效能調校的技巧。

RxJS

RxJS 是 Angular 非常重要的一個環節,卻也是很多 Angular 開發人員心中的痛,要能有一定程度的掌握 RxJS 是有些先決條件的,包含 Functional ProgrammingReactive Programming,理解這些先決條件可以幫助更容易的掌握 RxJS,這些技術在前端世界也越來越成為顯學,但 Angular 的愛用者通常多半是熟悉物件導向設計的後端工程師,因此在這邊常常會卡住;希望這個單元能幫助 Angular 開發人員減少學習 RxJS 的曲線;同時也會分享一些個人在 Angular 的架構下常用到的 RxJS 技巧。

Testing

儘管不是人人寫測試,但幾乎沒人可以否定撰寫測試程式是非常重要的一件事情,因此一定要花些篇幅來介紹,儘管只會寫基礎的測試程式,對於網站功能的品質也會有很好的幫助!

系列文章架構

由於這個系列的文章內容比較五花八門,基本上每個小主題之間沒有明顯的關聯性,都是可以獨立閱讀的,在每篇文章的開頭會加上以下幾個註記說明:

  • 類型:包含「觀念」與「技巧」兩種,「觀念」通常會比較枯燥,但若能理解對於開發會很有幫助;「技巧」則是比較有趣,但可能會需要一些觀念的輔助,才比較好理解。
  • 難度:依照個人主觀標示 3~5 顆星
  • 實用度:依照個人在實務上的經驗,主觀標示 3~5 顆星

而在每篇文章最下面,都會有數篇的參考資源,提供讀者更進一步的學習。

本日小結

Angular 真的是博大精深易學難精的框架,希望藉由這個系列文章,能幫助各位讀者往 Angular 大師之路向前邁進!!


下一篇
[Angular 大師之路] Day 02 - 更加理解 Angular CLI 之 Monorepo 應用
系列文
Angular 大師之路30

1 則留言

0
scertgogo
iT邦新手 5 級 ‧ 2018-10-17 20:25:55

冠軍先跪了

太客氣了,今年很抖啊 XD

新工作用angular 6, reactive form, routing, testing, rxjs 把我弄得半死。救命!

我要留言

立即登入留言