成為優秀Angular開發者所需要學習的19件事

一款to-do app基本等同於前端開發的“Hello world”。雖然涵蓋了建立應用程式的CRUD方面，但它通常只涉及那些框架或庫也能做到的皮毛而已。

Angular看起來似乎總是在改變和更新 - 但實際上，還是有一些事情仍然保持不變。以下是關於Angular所需要學習的核心概念的概述，以便大家可以正確地利用JavaScript框架。

說到Angular，我們需要學習很多東西，很多人被困在初學者的圈子裡，僅僅是因為不知道去哪裡搜尋或者應該搜尋什麼關鍵詞。下面我們會說到的這個指南（也是對Angular本身的一個快速摘要），我其實很希望我在第一次開始使用Angular 2+時就已經有了。

1.模組化Angular架構

理論上，你可以將所有Angular程式碼放在一個頁面上並放入一個大型函式中，但不建議這樣做，這也不是一種有效的方法來構造程式碼，並且違背了Angular存在的目的。

Angular將模組的概念作為框架架構的重要組成部分，這是指只有一個存在理由的程式碼集合。你的Angular app基本上由模組組成 - 有些是獨立的，有些是共享的。

有多種方法可以在您的應用程式中構造模組，深入瞭解不同的體系結構也可以幫助確定如何在應用程式增長時擴充套件應用程式，它還可以幫助隔離程式碼並防止產生程式碼耦合。

搜尋關鍵詞：

• Angular架構模式

• 可擴充套件的Angular應用架構

2.單向資料流和不可變性

早在Angular 1中，雙向繫結就俘獲了許多前端開發人員的心。這實際上是Angular最初的賣點之一。然而，隨著時間的推移，當應用程式開始變得更加複雜時，它開始在效能方面產生問題。

事實證明，並不是在任何地方都需要雙向繫結的。

雙向繫結在Angular 2+中仍然是可實現的，但只有在開發人員明確請求時才能進行雙向繫結 – 這樣就迫使程式碼背後的人員考慮資料方向和資料流，它還允許應用程式透過確定資料的流動方式來更加靈活地處理資料。

搜尋關鍵詞：

• Angular資料流最佳實踐

• Angular中的單向流

• 單向繫結的優點

3.屬性型和結構型指令

指令是HTML透過自定義元素的擴充套件。屬性型指令允許您更改元素的屬性，結構型指令透過在DOM中新增或刪除元素來更改佈局。

例如，ngSwitch和ngIf是結構型指令，因為它評估引數並確定DOM的某些部分是否應該存在。

屬性型指令是附加到元素、元件或其他指令的自定義行為。

學習如何使用這兩個指令可以擴充套件應用程式的功能，並減少專案中重複程式碼的數量。屬性型指令還可以幫助集中在應用程式不同部分使用的某些行為。

搜尋關鍵詞：

• Angular屬性型指令

• Angular結構型指令

• Angular結構型指令模式

4.元件生命週期鉤子

每個軟體都有自己的生命週期，決定了如何建立、渲染和刪除某些內容。Angular的元件生命週期是這樣的：
create → render → render children → check when data-bound properties change → destroy → remove from DOM

我們能夠在這個週期內抓住關鍵時刻，並在特定時刻或事件中鎖定他。這允許我們根據元件存在的不同階段建立適當的響應並配置行為。

例如，在呈現頁面之前可能需要載入一些資料，你可以透過ngOnInit()來實現這一點，或者你可能需要斷開與資料庫的連線，這可以透過ngOnDestroy()來實現。

搜尋關鍵詞：

• Angular生命週期鉤子

• 元件生命週期

5.Http和可觀察物件服務

這並不是Angular特有的功能，而是來自ES7。Angular只是碰巧將其作為框架支援功能的一部分來實現，並且恰好理解了這一點，它也可以很好地轉換為React、Vue和任何JavaScript相關的庫或框架。

可觀察物件服務是允許你有效處理資料的模式 - 允許你在基於事件的系統中解析、修改和維護資料。你無法完全逃避Http和可觀察物件，因為一切都是資料。

搜尋關鍵詞：

• JavaScript可觀察物件模式

• Angular HTTP和可觀察物件

• ES7可觀察功能

6.Smart/Dumb元件架構

在編寫Angular應用程式時，我們傾向於將所有內容都放入元件中。但是，這並不是最佳做法。Angular中Smart/Dumb元件的概念需要更多的討論，尤其是在初學者圈子裡。

元件是否Smart/Dumb決定了它在應用程式的總體規劃中扮演的角色。Dumb元件通常是無狀態的，其行為易於預測和理解。因此，儘可能使你的元件變得Dumb。
Smart元件更難掌握，因為它會涉及到輸入和輸出。要正確利用Angular的功能，請研究Smart/Dumb元件架構，它將為你提供有關如何處理程式碼及其相互關係的模式和思維方式。

搜尋關鍵詞：

• Smart/Dumb Angular 元件

• 無狀態的Dumb元件

• 演示元件

• Angular中的Smart元件

7.應用程式結構和最佳實踐

在結構和最佳實踐方面，CLI只能帶您到目前為止。構建Angular應用程式（或任何一般應用程式）就像構建一個房子。社群多年來一直在最佳化設定流程，從而實現最有效和最有效的應用。

Angular也不例外。

那些試圖學習Angular的人對Angular的大多數抱怨往往是由於缺乏結構知識；語法是很容易上手的，而且清晰明確。然而，應用程式的結構知識需要理解上下文背景、需求以及它們如何在概念和實踐層面組合到一起。瞭解Angular不同的潛在應用程式結構及其最佳實踐，將會讓你對如何構建應用程式擁有一個全新的視角。

搜尋關鍵詞：

• 單一儲存庫Angular apps

• Angular庫，Angular包

• Angular

• Angular微應用程式

• 單片儲存庫

8.模板繫結語法

繫結是JavaScript框架的結晶，這也是存在的首要原因之一。模板繫結在靜態HTML和JavaScript之間架起了橋樑，Angular的模板繫結語法充當這兩種技術之間的促進者。

一旦你學會了如何以及何時使用它們，將一個曾經是靜態的頁面轉換為互動式的頁面就會變得容易的多，也不那麼令人煩躁了。研究繫結的不同場景，例如屬性繫結、事件、插值和雙向繫結。

搜尋關鍵詞：

• Angular屬性繫結

• Angular事件繫結

• Angular雙向繫結，Angular插值

• Angular傳遞常量

9.特性模組和路由

在Angular中，特性模組的能力被低估了。它實際上是一種非常出色的用來組織和響應業務需求的方式。從長遠來看，它限制了責任並有助於防止程式碼汙染。

有五種型別的特性模組（領域特性模組、帶路由的特性模組、路由模組、服務特性模組和可識部件特性模組），每種模組處理特定型別的功能。學習將特性模組與路由結合使用可以幫助建立離散的功能集，併為你的應用程式應用良好和清晰的關注點分離。

搜尋關鍵詞：

• Angular特性模組

• Angular中的共享特性結構

• 特性模組提供商

• 延遲載入路由和特性模組

10.表單和驗證（響應式表單和驗證器）

表單是任何前端開發中不可避免的一部分。

與表單一起出現的還有驗證。

在Angular中，有很多方法可以構造智慧的、資料驅動的表單。最流行的表單迭代是響應式表單。但是，還有其他選項，即模板驅動表單和自定義驗證器。

瞭解驗證器如何與CSS協同工作將有助於加快工作流程，並將應用程式轉變為一個驗證錯誤的準備空間。

搜尋關鍵詞：

• Angular形式驗證

• 模板驅動驗證

• 響應式表單驗證

• Angular中的同步和非同步驗證器

• 內建驗證器

• Angular自定義驗證器

• 跨欄位交叉驗證

11.內容投影

Angular有一個叫做內容投影的東西，它能夠有效地將資料從父元件傳遞給子元件。雖然這可能聽起來很複雜，但實際上是在檢視中放入檢視以生成母版檢視的行為。

我們通常理解表面意義上的內容投影 - 當我們在父檢視中巢狀子檢視時。然而，為了擴充套件我們的理解，我們還需要了解資料如何在不同檢視之間傳遞。這是理解內容投影派上用場的地方。

瞭解內容投影可以幫助你確定應用程式的資料流以及發生可變性的位置。

搜尋關鍵詞：

• Angular內容投影

• Angular父子檢視關係

• Angular檢視資料關係

12.onPush變化檢測

預設情況下，Angular使用預設的變化檢測策略。這意味著將始終檢查元件。雖然使用預設值沒有任何問題，但它可能是檢測變化的一種低效方法。

對於小型應用程式來說，執行速度和效能都還算不錯。但是，一旦應用程式達到一定的大小，執行起來就會變得非常麻煩，尤其是在舊版瀏覽器中。

onPush 變化檢測策略將顯著加快應用程式的速度，因為它依賴於特定觸發器而不是持續檢查以檢視是否發生了任何事情。

搜尋關鍵詞：

• Angular onPush變化檢測

13.路徑保護，預載入，延遲載入

如果你有某種型別的登入，你將需要路徑保護。您可以保護某些檢視免受未經授權檢視的影響，這是是許多應用程式中必不可少的要求。路徑保護充當路由器和請求路由之間的介面。由決策者決定某條路線是否被允許訪問。路徑保護的世界中有很多東西需要探索 - 即基於令牌過期、使用者身份驗證和路徑安全性等路徑決策。

預載入和延遲載入還可以透過加快應用程式的載入時間來增強使用者體驗。值得注意的是，預載入和延遲載入不僅僅是決定是否要載入特定的影像集，它還可以增強繫結的體系結構，並載入可能存在於不同範圍和域上的應用程式的不同部分。

搜尋關鍵詞：

• Angular路徑保護

• Angular身份驗證模式

• Angular預載入和延遲載入模組

• Angular安全路徑模式

14.自定義管道

使用Angular管道使資料格式化變得無比簡單。雖然許多預配置和開箱即用管道涵蓋了諸如日期、貨幣、百分比和字元大小寫等許多內容，但它並不能涵蓋你需要的所有內容。

這就是自定義管道派上用場的地方。你可以輕鬆建立自己的過濾器並根據自己的喜好轉換資料格式。這真的很容易，所以去看看吧！

搜尋關鍵詞：

• Angular自定義管道

15.@viewChild和@ContentChild修飾器

viewChild和contentChild是元件相互通訊的方式。Angular的重點在於，你有多個元件，它們像拼圖一樣被編譯在一起，但如果這些元件彼此隔離，那麼這個拼圖就不會真正發揮多大作用。

這就是viewChild和contentChild的用武之地。學習使用這兩種修飾器讓你可以訪問相關元件。這使得資料共享的任務更容易實現，並且可以傳輸由相關元件觸發的資料和事件。

搜尋關鍵詞：

• Angular修飾器

• Angular中的Viewchild和contentchild

• Angular元件資料共享

16.動態元件和ng-template

元件是Angular的構建基塊。但是，並非所有元件都是固定的，它們有些需要動態建立，而不是預先編譯。

動態元件允許應用程式動態建立某些元件。靜態元件假設事物不會改變。它可以透過預期的輸入和輸出進行預測。

但是，動態元件是根據需要呈現的。在構建可能正在偵聽外部源及其更新的應用程式或頁面上發生操作的反應時，它們變得非常方便。

搜尋關鍵詞：

• Angular中的動態元件

• 動態元件和ng-templating

17.@Host @Hostingbinding和exportAs

@Host，@Hostingbinding和exportAs是Angular指令修飾器，它們擴充套件了所附加的引數。它們還使你能夠建立簡潔的模板，以便在應用程式中匯出以供使用。

如果以上聽起來令人困惑，那麼你應該首先查詢Angular指令及其存在的目的。@Host，@Hostingbinding和exportAs是指令的特性，這些特性有助於現實它。

搜尋關鍵詞：

• Angular指令模式

• Angular的@Host，@Hostingbinding和exportAs

18.使用RxJs進行狀態管理

應用程式的狀態最終決定顯示給使用者的資料。如果你的狀態是亂七八糟的一團義大利麵條，很可能你的整個資料結構會因為任何改變而變得脆弱不堪。

當你開始瞭解狀態是如何在Angular中工作時，你將瞭解資料的行為方式和原因。

雖然Angular有自己的狀態管理系統，但RxJs是集中狀態及其相關資料的絕佳方法。資料可能會在父-子關係鏈中丟失。RxJs透過建立一個集中式儲存來解耦。

搜尋關鍵詞：

• Angular RxJs

• Flux / Redux原理

• Angular狀態管理原則

19.依賴注入和區域

“依賴注入”通常是一個龐大的概念，所以如果您對這個概念不是很熟悉，那麼這是您真的需要查詢的一個內容。有多種方法可以在Angular中高效地建立依賴注入，主要是透過建構函式來實現的。這是一種只匯入您需要的東西的方法，從而提高應用程式的效率，而不是載入所有東西。

和“依賴注入”一樣，“區域”也是Angular獨有的概念。它是應用程式從頭到尾檢測非同步任務的一種方法。這一點很重要，因為這些非同步任務能夠更改應用程式的內部狀態，從而更改檢視。“區域”促進了變更檢測過程。

搜尋關鍵詞：

• Angular區域

• 依賴注入

• Angular DI

歡迎點選“ 京東雲 ”瞭解更多精彩內容

最後的話

Angular是一個很大的話題。雖然構建Angular應用程式可能有助於學習過程，但有時你就是不知道自己不知道什麼。剛開始的時候，你很難去了解未知的東西，希望這篇簡短的指南能超越你通常用的Angular教程帶給你一些啟發，讓你更全面的瞭解Angular。

*掃碼關注京東雲開發者社群，每天都有精彩行業資訊哦！*