Angular開發者必須學習的19件事

這篇文章要為大家介紹一下成為優秀Angular開發者所需要學習的19件事。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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

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

說到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。

原文網址：https://medium.com/better-programming/19-things-you-need-to-learn-to-become-an-effective-angular-developer -c0ccfa51222a

更多程式相關知識，請造訪：程式設計入門！ ！

以上是Angular開發者必須學習的19件事的詳細內容。更多資訊請關注PHP中文網其他相關文章！