成爲優秀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。

---

掃碼關注京東雲開發者社區，天天都有精彩行業信息哦！

閱讀原文