[[269805]] 

一款to-do app基本等同于前端開發(fā)的“Hello world”。雖然涵蓋了創(chuàng)建應(yīng)用程序的CRUD方面，但它通常只涉及那些框架或庫也能做到的皮毛而已。

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

說到Angular，我們需要學(xué)習(xí)很多東西，很多人被困在初學(xué)者的圈子里，僅僅是因?yàn)椴恢廊ツ睦锼阉骰蛘邞?yīng)該搜索什么關(guān)鍵詞。下面我們會說到的這個(gè)指南(也是對Angular本身的一個(gè)快速摘要)，我其實(shí)很希望我在***次開始使用Angular 2+時(shí)就已經(jīng)有了。

1.模塊化Angular架構(gòu)

理論上，你可以將所有Angular代碼放在一個(gè)頁面上并放入一個(gè)大型函數(shù)中，但不建議這樣做，這也不是一種有效的方法來構(gòu)造代碼，并且違背了Angular存在的目的。

Angular將模塊的概念作為框架架構(gòu)的重要組成部分，這是指只有一個(gè)存在理由的代碼集合。你的Angular app基本上由模塊組成 - 有些是獨(dú)立的，有些是共享的。

有多種方法可以在您的應(yīng)用程序中構(gòu)造模塊，深入了解不同的體系結(jié)構(gòu)也可以幫助確定如何在應(yīng)用程序增長時(shí)擴(kuò)展應(yīng)用程序，它還可以幫助隔離代碼并防止產(chǎn)生代碼耦合。

搜索關(guān)鍵詞：

• Angular架構(gòu)模式
• 可擴(kuò)展的Angular應(yīng)用架構(gòu)

2.單向數(shù)據(jù)流和不可變性

早在Angular 1中，雙向綁定就俘獲了許多前端開發(fā)人員的心。這實(shí)際上是Angular最初的賣點(diǎn)之一。然而，隨著時(shí)間的推移，當(dāng)應(yīng)用程序開始變得更加復(fù)雜時(shí)，它開始在性能方面產(chǎn)生問題。

事實(shí)證明，并不是在任何地方都需要雙向綁定的。

雙向綁定在Angular 2+中仍然是可實(shí)現(xiàn)的，但只有在開發(fā)人員明確請求時(shí)才能進(jìn)行雙向綁定 – 這樣就迫使代碼背后的人員考慮數(shù)據(jù)方向和數(shù)據(jù)流，它還允許應(yīng)用程序通過確定數(shù)據(jù)的流動方式來更加靈活地處理數(shù)據(jù)。

搜索關(guān)鍵詞：

• Angular數(shù)據(jù)流***實(shí)踐
• Angular中的單向流
• 單向綁定的優(yōu)點(diǎn)

3.屬性型和結(jié)構(gòu)型指令

指令是HTML通過自定義元素的擴(kuò)展。屬性型指令允許您更改元素的屬性，結(jié)構(gòu)型指令通過在DOM中添加或刪除元素來更改布局。

例如，ngSwitch和ngIf是結(jié)構(gòu)型指令，因?yàn)樗u估參數(shù)并確定DOM的某些部分是否應(yīng)該存在。

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

學(xué)習(xí)如何使用這兩個(gè)指令可以擴(kuò)展應(yīng)用程序的功能，并減少項(xiàng)目中重復(fù)代碼的數(shù)量。屬性型指令還可以幫助集中在應(yīng)用程序不同部分使用的某些行為。

搜索關(guān)鍵詞：

• Angular屬性型指令
• Angular結(jié)構(gòu)型指令
• Angular結(jié)構(gòu)型指令模式

4.組件生命周期鉤子

每個(gè)軟件都有自己的生命周期，決定了如何創(chuàng)建、渲染和刪除某些內(nèi)容。Angular的組件生命周期是這樣的：

create → render → render children → check when data-bound properties change → destroy → remove from DOM

我們能夠在這個(gè)周期內(nèi)抓住關(guān)鍵時(shí)刻，并在特定時(shí)刻或事件中鎖定他。這允許我們根據(jù)組件存在的不同階段創(chuàng)建適當(dāng)?shù)捻憫?yīng)并配置行為。

例如，在呈現(xiàn)頁面之前可能需要加載一些數(shù)據(jù)，你可以通過ngOnInit()來實(shí)現(xiàn)這一點(diǎn)，或者你可能需要斷開與數(shù)據(jù)庫的連接，這可以通過ngOnDestroy()來實(shí)現(xiàn)。

搜索關(guān)鍵詞：

• Angular生命周期鉤子
• 組件生命周期

5.Http和可觀察對象服務(wù)

這并不是Angular特有的功能，而是來自ES7。Angular只是碰巧將其作為框架支持功能的一部分來實(shí)現(xiàn)，并且恰好理解了這一點(diǎn)，它也可以很好地轉(zhuǎn)換為React、Vue和任何JavaScript相關(guān)的庫或框架。

可觀察對象服務(wù)是允許你有效處理數(shù)據(jù)的模式 - 允許你在基于事件的系統(tǒng)中解析、修改和維護(hù)數(shù)據(jù)。你無法完全逃避Http和可觀察對象，因?yàn)橐磺卸际菙?shù)據(jù)。

搜索關(guān)鍵詞：

• JavaScript可觀察對象模式
• Angular HTTP和可觀察對象
• ES7可觀察功能

6.Smart/Dumb組件架構(gòu)

在編寫Angular應(yīng)用程序時(shí)，我們傾向于將所有內(nèi)容都放入組件中。但是，這并不是***做法。Angular中Smart/Dumb組件的概念需要更多的討論，尤其是在初學(xué)者圈子里。

組件是否Smart/Dumb決定了它在應(yīng)用程序的總體規(guī)劃中扮演的角色。Dumb組件通常是無狀態(tài)的，其行為易于預(yù)測和理解。因此，盡可能使你的組件變得Dumb。

Smart組件更難掌握，因?yàn)樗鼤婕暗捷斎牒洼敵觥Ｒ_利用Angular的功能，請研究Smart/Dumb組件架構(gòu)，它將為你提供有關(guān)如何處理代碼及其相互關(guān)系的模式和思維方式。

搜索關(guān)鍵詞：

• Smart/Dumb Angular 組件
• 無狀態(tài)的Dumb組件
• 演示組件
• Angular中的Smart組件

7.應(yīng)用程序結(jié)構(gòu)和***實(shí)踐

在結(jié)構(gòu)和***實(shí)踐方面，CLI只能帶您到目前為止。構(gòu)建Angular應(yīng)用程序(或任何一般應(yīng)用程序)就像構(gòu)建一個(gè)房子。社區(qū)多年來一直在優(yōu)化設(shè)置流程，從而實(shí)現(xiàn)最有效和最有效的應(yīng)用。

Angular也不例外。

那些試圖學(xué)習(xí)Angular的人對Angular的大多數(shù)抱怨往往是由于缺乏結(jié)構(gòu)知識;語法是很容易上手的，而且清晰明確。然而，應(yīng)用程序的結(jié)構(gòu)知識需要理解上下文背景、需求以及它們?nèi)绾卧诟拍詈蛯?shí)踐層面組合到一起。了解Angular不同的潛在應(yīng)用程序結(jié)構(gòu)及其***實(shí)踐，將會讓你對如何構(gòu)建應(yīng)用程序擁有一個(gè)全新的視角。

搜索關(guān)鍵詞：

• 單一存儲庫Angular apps
• Angular庫，Angular包
• Angular
• Angular微應(yīng)用程序
• 單片存儲庫

8.模板綁定語法

綁定是JavaScript框架的結(jié)晶，這也是存在的首要原因之一。模板綁定在靜態(tài)HTML和JavaScript之間架起了橋梁，Angular的模板綁定語法充當(dāng)這兩種技術(shù)之間的促進(jìn)者。

一旦你學(xué)會了如何以及何時(shí)使用它們，將一個(gè)曾經(jīng)是靜態(tài)的頁面轉(zhuǎn)換為交互式的頁面就會變得容易的多，也不那么令人煩躁了。研究綁定的不同場景，例如屬性綁定、事件、插值和雙向綁定。

搜索關(guān)鍵詞：

• Angular屬性綁定
• Angular事件綁定
• Angular雙向綁定，Angular插值
• Angular傳遞常量

9.特性模塊和路由

在Angular中，特性模塊的能力被低估了。它實(shí)際上是一種非常出色的用來組織和響應(yīng)業(yè)務(wù)需求的方式。從長遠(yuǎn)來看，它限制了責(zé)任并有助于防止代碼污染。

有五種類型的特性模塊(領(lǐng)域特性模塊、帶路由的特性模塊、路由模塊、服務(wù)特性模塊和可識部件特性模塊)，每種模塊處理特定類型的功能。學(xué)習(xí)將特性模塊與路由結(jié)合使用可以幫助創(chuàng)建離散的功能集，并為你的應(yīng)用程序應(yīng)用良好和清晰的關(guān)注點(diǎn)分離。

搜索關(guān)鍵詞：

• Angular特性模塊
• Angular中的共享特性結(jié)構(gòu)
• 特性模塊提供商
• 延遲加載路由和特性模塊

10.表單和驗(yàn)證(響應(yīng)式表單和驗(yàn)證器)

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

與表單一起出現(xiàn)的還有驗(yàn)證。

在Angular中，有很多方法可以構(gòu)造智能的、數(shù)據(jù)驅(qū)動的表單。***的表單迭代是響應(yīng)式表單。但是，還有其他選項(xiàng)，即模板驅(qū)動表單和自定義驗(yàn)證器。

了解驗(yàn)證器如何與CSS協(xié)同工作將有助于加快工作流程，并將應(yīng)用程序轉(zhuǎn)變?yōu)橐粋€(gè)驗(yàn)證錯(cuò)誤的準(zhǔn)備空間。

搜索關(guān)鍵詞：

• Angular形式驗(yàn)證
• 模板驅(qū)動驗(yàn)證
• 響應(yīng)式表單驗(yàn)證
• Angular中的同步和異步驗(yàn)證器
• 內(nèi)置驗(yàn)證器
• Angular自定義驗(yàn)證器
• 跨字段交叉驗(yàn)證

11.內(nèi)容投影

Angular有一個(gè)叫做內(nèi)容投影的東西，它能夠有效地將數(shù)據(jù)從父組件傳遞給子組件。雖然這可能聽起來很復(fù)雜，但實(shí)際上是在視圖中放入視圖以生成母版視圖的行為。

我們通常理解表面意義上的內(nèi)容投影 - 當(dāng)我們在父視圖中嵌套子視圖時(shí)。然而，為了擴(kuò)展我們的理解，我們還需要了解數(shù)據(jù)如何在不同視圖之間傳遞。這是理解內(nèi)容投影派上用場的地方。

了解內(nèi)容投影可以幫助你確定應(yīng)用程序的數(shù)據(jù)流以及發(fā)生可變性的位置。

搜索關(guān)鍵詞：

• Angular內(nèi)容投影
• Angular父子視圖關(guān)系
• Angular視圖數(shù)據(jù)關(guān)系

12.onPush變化檢測

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

對于小型應(yīng)用程序來說，運(yùn)行速度和性能都還算不錯(cuò)。但是，一旦應(yīng)用程序達(dá)到一定的大小，運(yùn)行起來就會變得非常麻煩，尤其是在舊版瀏覽器中。

onPush 變化檢測策略將顯著加快應(yīng)用程序的速度，因?yàn)樗蕾囉谔囟ㄓ|發(fā)器而不是持續(xù)檢查以查看是否發(fā)生了任何事情。

搜索關(guān)鍵詞：

• Angular onPush變化檢測

13.路徑保護(hù)，預(yù)加載，延遲加載

如果你有某種類型的登錄，你將需要路徑保護(hù)。您可以保護(hù)某些視圖免受未經(jīng)授權(quán)視圖的影響，這是是許多應(yīng)用程序中必不可少的要求。路徑保護(hù)充當(dāng)路由器和請求路由之間的接口。由決策者決定某條路線是否被允許訪問。路徑保護(hù)的世界中有很多東西需要探索 - 即基于令牌過期、用戶身份驗(yàn)證和路徑安全性等路徑?jīng)Q策。

預(yù)加載和延遲加載還可以通過加快應(yīng)用程序的加載時(shí)間來增強(qiáng)用戶體驗(yàn)。值得注意的是，預(yù)加載和延遲加載不僅僅是決定是否要加載特定的圖像集，它還可以增強(qiáng)綁定的體系結(jié)構(gòu)，并加載可能存在于不同范圍和域上的應(yīng)用程序的不同部分。

搜索關(guān)鍵詞：

• Angular路徑保護(hù)
• Angular身份驗(yàn)證模式
• Angular預(yù)加載和延遲加載模塊
• Angular安全路徑模式

14.自定義管道

使用Angular管道使數(shù)據(jù)格式化變得無比簡單。雖然許多預(yù)配置和開箱即用管道涵蓋了諸如日期、貨幣、百分比和字符大小寫等許多內(nèi)容，但它并不能涵蓋你需要的所有內(nèi)容。

這就是自定義管道派上用場的地方。你可以輕松創(chuàng)建自己的過濾器并根據(jù)自己的喜好轉(zhuǎn)換數(shù)據(jù)格式。這真的很容易，所以去看看吧!

搜索關(guān)鍵詞：

• Angular自定義管道

15.@viewChild和@ContentChild修飾器

viewChild和contentChild是組件相互通訊的方式。Angular的重點(diǎn)在于，你有多個(gè)組件，它們像拼圖一樣被編譯在一起，但如果這些組件彼此隔離，那么這個(gè)拼圖就不會真正發(fā)揮多大作用。

這就是viewChild和contentChild的用武之地。學(xué)習(xí)使用這兩種修飾器讓你可以訪問相關(guān)組件。這使得數(shù)據(jù)共享的任務(wù)更容易實(shí)現(xiàn)，并且可以傳輸由相關(guān)組件觸發(fā)的數(shù)據(jù)和事件。

搜索關(guān)鍵詞：

• Angular修飾器
• Angular中的Viewchild和contentchild
• Angular組件數(shù)據(jù)共享

16.動態(tài)組件和ng-template

組件是Angular的構(gòu)建基塊。但是，并非所有組件都是固定的，它們有些需要?jiǎng)討B(tài)創(chuàng)建，而不是預(yù)先編譯。

動態(tài)組件允許應(yīng)用程序動態(tài)創(chuàng)建某些組件。靜態(tài)組件假設(shè)事物不會改變。它可以通過預(yù)期的輸入和輸出進(jìn)行預(yù)測。

但是，動態(tài)組件是根據(jù)需要呈現(xiàn)的。在構(gòu)建可能正在偵聽外部源及其更新的應(yīng)用程序或頁面上發(fā)生操作的反應(yīng)時(shí)，它們變得非常方便。

搜索關(guān)鍵詞：

• Angular中的動態(tài)組件
• 動態(tài)組件和ng-templating

17.@Host @Hostingbinding和exportAs

@Host，@Hostingbinding和exportAs是Angular指令修飾器，它們擴(kuò)展了所附加的參數(shù)。它們還使你能夠創(chuàng)建簡潔的模板，以便在應(yīng)用程序中導(dǎo)出以供使用。

如果以上聽起來令人困惑，那么你應(yīng)該首先查找Angular指令及其存在的目的。@Host，@Hostingbinding和exportAs是指令的特性，這些特性有助于現(xiàn)實(shí)它。

搜索關(guān)鍵詞：

• Angular指令模式
• Angular的@Host，@Hostingbinding和exportAs

18.使用RxJs進(jìn)行狀態(tài)管理

應(yīng)用程序的狀態(tài)最終決定顯示給用戶的數(shù)據(jù)。如果你的狀態(tài)是亂七八糟的一團(tuán)意大利面條，很可能你的整個(gè)數(shù)據(jù)結(jié)構(gòu)會因?yàn)槿魏胃淖兌兊么嗳醪豢啊?/p>

當(dāng)你開始了解狀態(tài)是如何在Angular中工作時(shí)，你將了解數(shù)據(jù)的行為方式和原因。

雖然Angular有自己的狀態(tài)管理系統(tǒng)，但RxJs是集中狀態(tài)及其相關(guān)數(shù)據(jù)的***方法。數(shù)據(jù)可能會在父-子關(guān)系鏈中丟失。RxJs通過創(chuàng)建一個(gè)集中式存儲來解耦。

搜索關(guān)鍵詞：

• Angular RxJs
• Flux / Redux原理
• Angular狀態(tài)管理原則

19.依賴注入和區(qū)域

“依賴注入”通常是一個(gè)龐大的概念，所以如果您對這個(gè)概念不是很熟悉，那么這是您真的需要查找的一個(gè)內(nèi)容。有多種方法可以在Angular中高效地創(chuàng)建依賴注入，主要是通過構(gòu)造函數(shù)來實(shí)現(xiàn)的。這是一種只導(dǎo)入您需要的東西的方法，從而提高應(yīng)用程序的效率，而不是加載所有東西。

和“依賴注入”一樣，“區(qū)域”也是Angular獨(dú)有的概念。它是應(yīng)用程序從頭到尾檢測異步任務(wù)的一種方法。這一點(diǎn)很重要，因?yàn)檫@些異步任務(wù)能夠更改應(yīng)用程序的內(nèi)部狀態(tài)，從而更改視圖。“區(qū)域”促進(jìn)了變更檢測過程。

搜索關(guān)鍵詞：

• Angular區(qū)域
• 依賴注入
• Angular DI
• ***的話

Angular是一個(gè)很大的話題。雖然構(gòu)建Angular應(yīng)用程序可能有助于學(xué)習(xí)過程，但有時(shí)你就是不知道自己不知道什么。剛開始的時(shí)候，你很難去了解未知的東西，希望這篇簡短的指南能超越你通常用的Angular教程帶給你一些啟發(fā)，讓你更全面的了解Angular。