Angular知識(shí)點(diǎn)有哪些

本篇內(nèi)容介紹了“Angular知識(shí)點(diǎn)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

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

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

搜索關(guān)鍵詞：

• Angular架構(gòu)模式

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

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

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

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

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

搜索關(guān)鍵詞：

• Angular數(shù)據(jù)流最佳實(shí)踐

• Angular中的單向流

• 單向綁定的優(yōu)點(diǎn)

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

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

例如，ngSwitch和ngIf是結(jié)構(gòu)型指令，因?yàn)樗u(píng)估參數(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)頁(yè)面之前可能需要加載一些數(shù)據(jù)，你可以通過(guò)ngOnInit()來(lái)實(shí)現(xiàn)這一點(diǎn)，或者你可能需要斷開(kāi)與數(shù)據(jù)庫(kù)的連接，這可以通過(guò)ngOnDestroy()來(lái)實(shí)現(xiàn)。

搜索關(guān)鍵詞：

• Angular生命周期鉤子

• 組件生命周期

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

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

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

搜索關(guān)鍵詞：

• JavaScript可觀察對(duì)象模式

• Angular HTTP和可觀察對(duì)象

• ES7可觀察功能

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

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

組件是否Smart/Dumb決定了它在應(yīng)用程序的總體規(guī)劃中扮演的角色。Dumb組件通常是無(wú)狀態(tài)的，其行為易于預(yù)測(cè)和理解。因此，盡可能使你的組件變得Dumb。
Smart組件更難掌握，因?yàn)樗鼤?huì)涉及到輸入和輸出。要正確利用Angular的功能，請(qǐng)研究Smart/Dumb組件架構(gòu)，它將為你提供有關(guān)如何處理代碼及其相互關(guān)系的模式和思維方式。

搜索關(guān)鍵詞：

• Smart/Dumb Angular 組件

• 無(wú)狀態(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ū)多年來(lái)一直在優(yōu)化設(shè)置流程，從而實(shí)現(xiàn)最有效和最有效的應(yīng)用。

Angular也不例外。

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

搜索關(guān)鍵詞：

• 單一存儲(chǔ)庫(kù)Angular apps

• Angular庫(kù)，Angular包

• Angular

• Angular微應(yīng)用程序

• 單片存儲(chǔ)庫(kù)

8.模板綁定語(yǔ)法

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

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

搜索關(guān)鍵詞：

• Angular屬性綁定

• Angular事件綁定

• Angular雙向綁定，Angular插值

• Angular傳遞常量

9.特性模塊和路由

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

有五種類(lèi)型的特性模塊（領(lǐng)域特性模塊、帶路由的特性模塊、路由模塊、服務(wù)特性模塊和可識(shí)部件特性模塊），每種模塊處理特定類(lèi)型的功能。學(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)證器）

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

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

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

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

搜索關(guān)鍵詞：

• Angular形式驗(yàn)證

• 模板驅(qū)動(dòng)驗(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ù)從父組件傳遞給子組件。雖然這可能聽(tīng)起來(lái)很復(fù)雜，但實(shí)際上是在視圖中放入視圖以生成母版視圖的行為。

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

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

搜索關(guān)鍵詞：

• Angular內(nèi)容投影

• Angular父子視圖關(guān)系

• Angular視圖數(shù)據(jù)關(guān)系

12.onPush變化檢測(cè)

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

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

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

搜索關(guān)鍵詞：

• Angular onPush變化檢測(cè)

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

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

預(yù)加載和延遲加載還可以通過(guò)加快應(yīng)用程序的加載時(shí)間來(lái)增強(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ù)格式化變得無(wú)比簡(jiǎn)單。雖然許多預(yù)配置和開(kāi)箱即用管道涵蓋了諸如日期、貨幣、百分比和字符大小寫(xiě)等許多內(nèi)容，但它并不能涵蓋你需要的所有內(nèi)容。

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

搜索關(guān)鍵詞：

• Angular自定義管道

15.@viewChild和@ContentChild修飾器

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

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

搜索關(guān)鍵詞：

• Angular修飾器

• Angular中的Viewchild和contentchild

• Angular組件數(shù)據(jù)共享

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

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

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

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

搜索關(guān)鍵詞：

• Angular中的動(dòng)態(tài)組件

• 動(dòng)態(tài)組件和ng-templating

17.@Host @Hostingbinding和exportAs

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

如果以上聽(tīng)起來(lái)令人困惑，那么你應(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)會(huì)因?yàn)槿魏胃淖兌兊么嗳醪豢啊?/p>

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

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

搜索關(guān)鍵詞：

• Angular RxJs

• Flux / Redux原理

• Angular狀態(tài)管理原則

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

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

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

搜索關(guān)鍵詞：

• Angular區(qū)域

• 依賴(lài)注入

• Angular DI

“Angular知識(shí)點(diǎn)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！