“ Angular是初學者友好的”-不是一個人
完整的JavaScript Web框架是什麼使Angular與眾不同？Angular是最受歡迎的JavaScript框架之一。它由Google開發和維護，用於構建現代的單頁應用程序（SPA）和漸進式Web應用程序（PWA）。
作為一個完整的框架，它具有JavaScript Web應用程序所需的一切。
它提供了經過驗證的體系結構，可通過在組件，服務，指令，管道和模塊之間劃分應用程序結構來完全分離關注點。這些是提供獨特特性和功能的不同類型的類。這種架構使開發可以在一個大型團隊中擴展並很好地工作。
它提供了Web開發的完整MVC。它提供了內置組件和模板，這些組件和模板支持高級動態渲染，此外，這些模塊還具有使用延遲加載功能來拆分包大小並減小前期主包大小的功能。
作為Web開發人員，使用Angular可以繼承所面臨的最常見問題的解決方案。這些解決方案內置在框架中。這就是它與React和其他“以視圖為中心”的庫不同的地方。
Angular開箱即用提供的最重要和最有價值的功能是Angular CLI，智能IDE工具，動態渲染，模板，依賴項注入，AOT-JIT，路由，動畫，通用服務器端渲染（SSR），測試，可訪問性，國際化，安全功能，PWA支持，Web-Workers等。
這些內置功能和工具演示並鼓勵Angular做事的方式。要充分利用該框架，您必須學習所有這些內容。
TypeScript增加了複雜性Angular的Web開發概念方法是通過對常用的有用JavaScript模式進行高層抽象來實現的。對於使用Angular的Web開發人員，這涉及學習由這些抽象產生的語法糖。
對於不熟悉TypeScript或尚未學習TypeScript的人，TypeScript為陡峭的學習曲線做出了巨大貢獻。
Angular和TypeScript的結合使人有時感覺好像它是自己的編程語言。
它使用實驗性裝飾器為其體系結構的一部分為其NgModules和類類型提供註釋。在Angular中，裝飾器是在應用程序中賦予類目的的東西。 Angular中所有受支持的類類型均以其名稱修飾（例如@Component）。
這需要轉變觀念作為Angular的新手開發人員，您發現您必須改變編程思維方式。這需要時間和令人沮喪的過程。它會大大降低您的開發效率。
這是由於…的組合反應式方法（RxJS）獨特的架構（NgModules）單一職責的角類（裝飾器）這個想法是，當您熟悉該框架時，您最終將獲得投資回報（ROI）。
由於Angular CLI的腳手架功能，Angular ROI以快速應用程序開發的形式出現。
在您熟悉該體系結構並自動知道何時應該使用Directive，Component，Service，Pipe之前，可能不會很快。
在學習懸崖上攀登之後，您會覺得自己實際上可以再次估算開發時間（通常也可以如此）。 您不太可能被Angular的“幕後”絆倒。
但是在那之前，您必須經歷學習Angular最困難的部分。
但是學習Angular最困難的部分是什麼？
1）固執己見的架構和獨特的語法
特定於Angular的抽象提供了語法糖，該糖可以實現更高級別的交互和功能。這可以通過使用TypeScript裝飾器定義模塊和組件的方式看到。
這意味著開發人員可以免除複雜性，而將細節保留在“幕後”。
Angular在很大程度上影響您構建項目的方式。充分利用Angular可以提供的功能意味著學習模塊，組件，指令，服務，管道等之間的差異。這些是Angular應用程序的基本組成部分。在類上方使用裝飾器來指示它是@Component還是@Directive。
組件和指令組件是Angular應用程序的構建塊。一個應用程序主要由許多組件組成。您通過組件模板編寫UI，組件模板通過TypeScript類與業務邏輯進行交互。
Angular提供了通過實現功能來啟用某些功能的組件接口。這些可以生命週期掛鉤的形式出現，例如使用TypeScript接口實現工具的NgOnInit。
對我來說，最難纏的就是它如何相互聯繫並結合在一起構成一個Web應用程序。
使用組件vs服務的時間很容易確定，一開始在組件vs指令之間進行選擇比較困難，但是要知道創建指令(directive)的正確情況很困難。
當我本應該在指令中指定功能時，常常會發現自己增加了組件的複雜性。
此外，偽指令(directives)可以是結構偽指令(structural directives)或屬性偽指令(attribute directives)。
首次使用指令時，最難的是從指令與應用程序進行交互的方式。 Angular具有通過更特定的語法和TypeScript裝飾器（例如@HostBinding和@HostListener）訪問DOM和主機的獨特方式。
Angular中的指令是思考DOM並習慣一些知識的一種獨特方法。
介面InterfacesAngular提供的接口相對簡單易用，但有數百種。困難在於知道在某些情況下要實現哪個接口。通常，通過花費在堆棧溢出上的時間或瀏覽其他代碼來累積對可用接口的了解，並將接口與某些功能相關聯。
作為文檔的初學者，幾乎不可能理解使用特定接口的正確情況。
模組Modules在Angular中，模塊是@NgModule。模塊有多種變體，例如域功能模塊，路由功能模塊，路由模塊，服務功能模塊，小部件功能模塊。了解差異是很棘手的，因為一定會有重疊，尤其是在您快速開發應用程序，或者沒有大量開發人員分擔工作負載的情況下。
如果您不謹慎地根據模塊的類型來組織模塊，則最終會創建複雜的混合模塊，該模塊幾乎可以完成所有工作。
Angular文檔引用了以下模塊類型：
域功能模塊(Domain feature modules)。路由功能模塊(Routed feature modules)。路由模塊(Routing modules)。服務功能模塊(Service feature modules)。小部件功能模塊(Widget feature modules)。了解這些類型之間的區別以及它們的外觀將提高其他開發人員的可讀性和對應用程序的理解。它還有助於重構和修剪您的應用程序。當您要重構應用程序的某些部分時，它可以節省時間，而無需知道先看哪裡。
服務和依賴注入另一方面，服務非常容易理解。它們應包含“業務邏輯”。
為每個特定目的創建一個新服務。這意味著他們應該堅決遵守“單一責任原則”。如果您希望某項服務處理身份驗證，則可以將其稱為AuthService，它將專門處理身份驗證，僅此而已。如果您決定需要處理用戶操作，則應創建一個名為UserService的新服務。
服務應為DRY（請勿重複）
服務是通過依賴項注入初始化的類。
要使用服務，請通過構造函數（例如構造函數（私有authService：AuthService））將服務作為依賴項注入。
之後，您將可以通過this.authService訪問AuthService。
將服務視為“業務邏輯”可以很容易地理解何時使用。
儘管這很容易概念化，但是Service可能會變得複雜。
服務的複雜性當服務彼此之間以及與應用程序的其餘部分進行交互時，服務將變得複雜。一開始，服務提供商的範圍可能很難理解。
最終，有兩種類型的服務：
SingletonNon-SingletonSingletonsSingleton Services是應用程序範圍的服務，在應用程序中只有一個服務實例。這意味著您在不同組件中使用服務時會共享變量；您正在使用同一實例。
您將使用providerIn：’root’來創建應用程序範圍的服務。或者，您可以將其保留為providerIn：’any’，並且Angular會自動將其實例化為單例，如果當前捆綁包未使用它，您將受益於搖樹。
Non-Singletons非單一服務可以在整個應用程序中具有同一服務的多個實例。這意味著在兩個不同的組件中使用服務時，您不會共享變量。
使用提供程序：組件或指令元數據（裝飾程序）中的[UserService]將提供服務的新實例。
因此，通過單例，非單例和應用程序其餘部分之間的交互，您可以看到哪裡會出現複雜性。
重要的是要使服務是否為單例變得顯而易見。您的大多數服務可能都是單例，因此這應該在一定程度上限制複雜性。
2）動態模板引擎Angular的主要功能之一是其獨特的HTML模板，其中集成了類似於XML的自定義元素。您與這些HTML模板進行交互的方式是特定於Angular的，並且與React或其他流行框架中的交互方式不同。 Angular提供了自定義屬性和HTML元素，以實現HTML的動態呈現。
對Angular HTML元素的依賴意味著有一些新概念需要學習。這些是ng-content，ng-container和ng-template。這些為DOM提供了不同的功能。但是，它們的共同點是它們都引用DOM中的元素。
在您完全理解它們“如何在幕後”工作之前，這些元素似乎是魔術。
ng-content，ng-container，ng-template之間的區別它們用於向Angular指示動態加載組件的位置。
ng-content這用於內容投影。這對於構建可重用組件至關重要。它允許您通過從外部投影到組件中來擴展和自定義組件。
ng-container這是不干擾DOM的分組元素。只需將其插入引用的位置即可。這是根據條件和模板表達式排除和包含HTML的最簡單方法。您可以在其他語法和模板變量中使用ng-container引用ng-templates。
ng-template這用於保存模板引用。您可以將模板包裝在ng-template中，以通過使用模板引用有條件地將其插入DOM中。
通過條件未顯示的元素將保留為ng模板，直到有條件地插入它們為止。
結構化指令是根據業務邏輯和應用程序數據有條件地將元素插入DOM的最有用的方法。
它們包括：
NgIfNgForNgSwitch如果這些工具無法為您提供所需的功能，您甚至可以自己編寫。
與任何單頁應用程序（SPA）一樣，動態呈現是應用程序的核心。它描述了將HTML動態插入DOM的方式。了解Angular的工作原理使開發Angular應用程序變得簡單明了且可以預測。
但同樣，Angular在“幕後”做了很多事情，使您作為開發人員的生活更加輕鬆。因此，一開始情況並不太容易預測。
3）RXJS烘焙在整個Angular框架中，都依賴RxJS庫（JavaScript Reactive Extensions）。
您基本上可以將RXJS假定為Angular的一部分。原因是Angular本身是使用RXJS構建的。
你無法逃脫。
因此，當您開始學習Angular時，您會立即註意到對反應式編程的重視。這是一個可觀察到的和無處不在的框架。您將看到HTTP客戶端，路由器事件和其他Angular提供的服務中使用的Observable。
您會注意到，無需處理數據流就無法到達任何地方，這不是一件壞事。
但是，它確實迫使您深入學習RxJS。特別是Angular與數據流交互的方式。
儘管RXJS很棒，並且對於Angular中的反應式編程必不可少，但它極大地拉近了學習曲線。
單獨學習RXJS非常耗時，因此學習Angular和RXJS必然是一個艱鉅的過程。
首先，RXJS的核心概念很容易掌握，但是遇到了很多未解決的錯誤，並且日日撓頭，這使您感到頭疼，只是意識到您沒有對RxJS的全面了解。
隨著代碼開始變得越來越複雜，RXJS運算符的內部功能將吸引您。
如果您對RXJS運算符做出假設，那麼最終您將被困住。
如果您不熟悉數據流，則需要改變觀念。儘管RxJS特定於JavaScript，但是ReactiveX（包括RxJS，Rx.NET和RxJava之類的實現的庫）可能具有您所用語言的實現。因此，您可能熟悉反應式編程和數據流處理。
處理數據流本身並不是困難的部分。困難的部分是了解操作員的工作方式
很難理解RxJS運算符如何轉換數據流和修改行為。
調試RxJS流時，不僅要觀察發射的數據，還包括發射的順序，時間，數據類型以及其行為的其他方面。
如果您不完全了解RxJS，可能會使調試應用程序變得困難。要調試代碼，您必須了解預期的行為以及實際行為如何偏離行為，以便能夠進行有效測試。
Angular中的反應式編程響應式編程意味著將一切都視為異步的，對隨時間發生的事件做出反應，而這些事件不一定是有序的。您認為數據是從帶有Observables和Promises的流一直到其目的地的。
在Angular中，這意味著從API一直到模板。
越早意識到所有內容都應該是流，那就越好
在沒有任何實際工作進入應用程序之前就意識到數據流的重要性，這意味著您可以從一開始就使用“ RxJS x Angular”最佳實踐，從而構建一個真正的端到端反應性應用程序。
在這種情況下，端到端意味著數據以可觀察到的方式開始和結束，並通過模板中的異步管道解包。避免手動訂閱。
幸運的是，Angular是鼓勵響應式編程的框架。在將RxJS與Angular結合使用時，您將開始意識到，異步管道（它是標準庫的一部分）是您最常用的Angular管道之一。
在Angular中，異步管道是端到端反應式應用程序中的最佳工具。使用data$ | async模板中的異步會自動處理可觀察對象的訂閱和取消訂閱。
在RxJS中，眾所周知的最佳做法是防止在組件類中使用subscription（）進行手動預訂。異步管道是遵循此最佳實踐的最佳工具。 RxJS提供了一個全面的庫，其中包含用於轉換，組合，創建和過濾數據流的運算符，因此大多數時候您應該能夠找到一種防止手動訂閱的方法。
您需要了解Hot Observable和Cold Observable之間的區別，RxJS流的大理石圖，不同的組件方法（Smart或Dumb）以及如何實現端到端的響應式Web應用程序。
開始了解RxJS的最佳位置是通過Learnrxjs。
Introductionis one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with…www.learnrxjs.io
如果您是一名視覺學習者，那麼可視化數據流和RxJS運算符的一種好方法是通過大理石圖。
大理石圖顯示了發射順序以及運算符如何影響可觀察數據流的行為。
RxMarbles: Interactive diagrams of Rx ObservablesLearn, build, and test Rx functions on Observablesrxmarbles.com
最大的事情是心態轉變
由於Angular為Web開髮帶來了一系列新概念，因此必須轉變思維方式。 Angular的工作方式鼓勵採用反應性方法，並結合RxJS作為反應性催化劑。
除了新的概念，方法，語法和RxJS，您還必須考慮影子DOM。 Angular採用“ Angular方式”進行所有操作的原因是因為陰影DOM和NgZone。
NgZone是跨異步任務持久化的執行上下文
Angular在與DOM交互時提供了解決方案，因為它確保任務在Angular區域內執行。這對於更改檢測很重要。
未在區域內執行的任務有被Angular檢測不到的風險。這意味著，由於Angular如何使用影子DOM和NgZone，因此無法進行DOM更新。
NgZone的存在引入了開發應用程序時要考慮的其他觀點。這意味著您必須將任務視為“在區域內”或“在區域外”。
這也意味著您幾乎不會在不知不覺中產生錯誤的情況下偏離Angular的工作方式。它迫使您學習Angular的做事方式，並完全符合Angular的Web開發方法。因此，您不能真正推遲學習Angular的某些部分。
開始學習Angular時，乍一看似乎並不熟悉，特別是如果您來自純JavaScript背景。如果您習慣使用TypeScript，將會有些熟悉，但即使您可能也無法倖免。
使用Angular來構建Web應用程序最終是有回報的，但是只有在您確定了“內幕”內容之後，才有意義。
學習Angular之前應該了解的內容作為學習Angular的初學者，認知超負荷將是一種熟悉的心理狀態。
但是一旦您掌握了語法，就會在幕後將您弄得一團糟。
不幸的是，您不知道它何時會絆倒您，要知道Angular中重要的唯一方法就是親身體驗。
這意味著一遍又一遍的故障。這需要耐心。
但是一旦解決了，一切都將變得有意義，而且回報是巨大的。
Thanks for reading! Any questions, let me know in the comments.