19 Dinge, die Angular-Entwickler lernen müssen

Dieser Artikel stellt Ihnen 19 Dinge vor, die Sie lernen müssen, um ein ausgezeichneter Angular-Entwickler zu werden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine To-Do-App entspricht im Grunde der „Hallo Welt“ der Front-End-Entwicklung. Während die CRUD-Aspekte der Anwendungserstellung behandelt werden, kratzt dies meist nur an der Oberfläche dessen, was ein Framework oder eine Bibliothek leisten kann.

Angular scheint sich ständig zu verändern und zu aktualisieren – aber in Wirklichkeit gibt es einige Dinge, die immer noch gleich bleiben. Im Folgenden finden Sie einen Überblick über die Kernkonzepte, die Sie über Angular lernen müssen, damit Sie das JavaScript-Framework ordnungsgemäß nutzen können. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Apropos Angular: Viele Menschen sind im Kreis der Anfänger gefangen, einfach weil sie nicht wissen, wo sie suchen sollen oder welche Schlüsselwörter sie verwenden sollen suchen nach. Diese Anleitung, über die wir weiter unten sprechen werden (und eine kurze Zusammenfassung von Angular selbst), hätte ich mir tatsächlich gewünscht, als ich zum ersten Mal mit Angular 2+ angefangen habe. ?? von Angulars Existenz.

Angular verwendet das Konzept von Modulen als wichtigen Teil der Framework-Architektur, der sich auf eine Codesammlung bezieht, die nur einen Existenzgrund hat. Ihre Angular-App besteht im Wesentlichen aus Modulen – einige davon sind eigenständig und andere werden gemeinsam genutzt.

Es gibt viele Möglichkeiten, Module in Ihrer Anwendung zu strukturieren, und ein tieferes Verständnis verschiedener Architekturen kann auch dabei helfen, zu bestimmen, wie die Anwendung skaliert werden soll, wenn sie wächst. Es kann auch dabei helfen, Code zu isolieren und Codekopplung zu verhindern.

---

Suchbegriffe:

Angular-Architekturmuster

Skalierbare Angular-Anwendungsarchitektur

2. Einseitiger Datenfluss und Unveränderlichkeit
Schon bei Angular. 1. Bidirektionale Bindungen wurden erfasst die Herzen vieler Frontend-Entwickler. Dies war tatsächlich eines der ursprünglichen Verkaufsargumente von Angular. Wenn die Anwendung jedoch mit der Zeit komplexer wird, entstehen Leistungsprobleme.

Es stellt sich heraus, dass eine Zwei-Wege-Bindung nicht überall erforderlich ist.

Eine bidirektionale Bindung ist in Angular 2+ weiterhin möglich, jedoch nur, wenn der Entwickler dies ausdrücklich anfordert – dies zwingt die Person hinter dem Code, über die Datenrichtung und den Datenfluss nachzudenken, und ermöglicht es der Anwendung auch, zu bestimmen, wie Daten fließen um flexibler damit umgehen zu können.

---

Suchbegriffe:

Best Practices für den Angular-Datenfluss

Einseitiger Fluss in Angular

• Vorteile der unidirektionalen Bindung
3. Attributtyp- und Strukturtypanweisungen
Direktiven sind Erweiterungen von HTML durch benutzerdefinierte Elemente. Mit Attributdirektiven können Sie die Eigenschaften eines Elements ändern, und Strukturdirektiven ändern das Layout, indem Sie Elemente zum DOM hinzufügen oder daraus entfernen.

Beispielsweise sind ngSwitch und ngIf Strukturanweisungen, da sie Parameter auswerten und bestimmen, ob bestimmte Teile des DOM vorhanden sein sollen.

Attributdirektiven sind benutzerdefinierte Verhaltensweisen, die an Elemente, Komponenten oder andere Anweisungen angehängt sind.

---

Wenn Sie lernen, diese beiden Anweisungen zu verwenden, können Sie die Funktionalität Ihrer Anwendung erweitern und die Menge an doppeltem Code in Ihrem Projekt reduzieren. Attributierte Direktiven können auch dazu beitragen, bestimmte Verhaltensweisen für die Verwendung in verschiedenen Teilen der Anwendung zu fokussieren.

Suchbegriffe:

Angular-Attributanweisung

Angular-Strukturanweisung

• Angular-Strukturanweisungsmuster
4. Komponenten-Lebenszyklus-Hook
Jede Software hat ihr eigenes Leben Zyklus, der bestimmt, wie bestimmte Inhalte erstellt, gerendert und gelöscht werden. Der Komponentenlebenszyklus von Angular sieht folgendermaßen aus:

Wir können Schlüsselmomente in diesem Zyklus erfassen und ihn auf einen bestimmten Moment oder ein bestimmtes Ereignis festlegen. Dies ermöglicht es uns, geeignete Reaktionen zu erstellen und Verhalten basierend auf den verschiedenen Phasen der Existenz der Komponente zu konfigurieren.

---

Zum Beispiel müssen Sie möglicherweise einige Daten laden, bevor Sie die Seite rendern. Dies können Sie über ngOnInit() erreichen, oder Sie müssen möglicherweise die Verbindung zur Datenbank trennen, was über ngOnDestroy() erreicht werden kann.

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

Winkel-Lebenszyklus-Haken

Komponenten-Lebenszyklus

5.Http und Observable Object Services

---

Dies ist keine Angular-spezifische Funktion, sondern stammt aus ES7. Angular implementiert dies zufällig als Teil der Support-Funktionalität des Frameworks und versteht dies zufällig, und es lässt sich auch gut in React, Vue und alle JavaScript-bezogenen Bibliotheken oder Frameworks übersetzen.

Observable Object Services sind Muster, die es Ihnen ermöglichen, effizient mit Daten zu arbeiten – so dass Sie Daten in einem ereignisbasierten System analysieren, ändern und verwalten können. Sie können HTTP und Observables nicht vollständig entkommen, da alles Daten sind.

Suchbegriffe:

• JavaScript Observable Object Pattern

• Angular HTTP und Observable Objects

• ES7 Observable Features

6. Smart/Dumb Component Architecture

---

Beim Schreiben von Angular Bei Anwendungen tendieren wir dazu, alles in Komponenten zu packen. Dies ist jedoch keine bewährte Vorgehensweise. Das Konzept der Smart/Dumb-Komponenten in Angular bedarf insbesondere in Einsteigerkreisen weiterer Diskussion.

Ob eine Komponente intelligent/dumm ist oder nicht, bestimmt die Rolle, die sie bei der Gesamtplanung der Anwendung spielt. Dumme Komponenten sind im Allgemeinen zustandslos und ihr Verhalten ist leicht vorherzusagen und zu verstehen. Machen Sie Ihre Komponenten daher so dumm wie möglich. Intelligente Komponenten sind schwieriger zu beherrschen, da sie Eingabe und Ausgabe erfordern. Um die Leistungsfähigkeit von Angular richtig zu nutzen, studieren Sie die Smart/Dumb-Komponentenarchitektur, die Ihnen Muster und Denkweisen für den Umgang mit Code und seinen Wechselbeziehungen liefert.

Suchbegriffe:

• Smart/Dumb Angular-Komponente

• Stateless Dumb-Komponente

• Demo-Komponente

• Intelligente Komponente in Angular

7. Anwendungsstruktur und Best Practices

---

Das CLI kann Sie in Bezug auf Struktur und Best Practices nur bedingt weiterbringen. Das Erstellen einer Angular-Anwendung (oder einer anderen Anwendung im Allgemeinen) ist wie der Bau eines Hauses. Die Community optimiert seit Jahren den Einrichtungsprozess, um die effizienteste und effektivste Anwendung zu erzielen.

Angular ist keine Ausnahme.

Die meisten Beschwerden über Angular von denen, die Angular lernen möchten, sind auf mangelnde Strukturkenntnisse zurückzuführen. Strukturelle Kenntnisse der Anwendung erfordern jedoch ein Verständnis für den Kontext, die Anforderungen und deren Zusammenspiel auf konzeptioneller und praktischer Ebene. Wenn Sie die verschiedenen potenziellen Anwendungsstrukturen von Angular und ihre Best Practices verstehen, erhalten Sie eine neue Perspektive auf die Erstellung von Anwendungen.

Suchbegriffe:

• Einzelnes Repository Angular-Apps

• Angular-Bibliotheken, Angular-Pakete

• Angular

• Angular-Mikroanwendungen

• Monolithisches Repository

8 Bindungssyntax

---

Bindung ist die Kristallisation des JavaScript-Frameworks, was einer der Gründe für seine Existenz überhaupt ist. Die Vorlagenbindung schließt die Lücke zwischen statischem HTML und JavaScript, wobei die Vorlagenbindungssyntax von Angular als Vermittler zwischen diesen beiden Technologien fungiert.

Sobald Sie lernen, wie und wann Sie sie verwenden, wird die Umwandlung einer einst statischen Seite in eine interaktive Seite viel einfacher und weniger nervig. Studieren Sie verschiedene Bindungsszenarien, z. B. Eigenschaftsbindung, Ereignisse, Interpolation und bidirektionale Bindung.

Suchbegriffe:

• Angular-Eigenschaftsbindung

• Angular-Ereignisbindung

• Winkel-Zwei-Wege-Bindung, Winkelinterpolation

• Angular-Übergabekonstanten

9.Features Module und Routing

---

In Angular wird die Leistungsfähigkeit von Feature-Modulen unterschätzt. Es ist tatsächlich eine hervorragende Möglichkeit, geschäftliche Anforderungen zu organisieren und darauf zu reagieren. Auf lange Sicht schränkt es die Haftung ein und hilft, Codeverschmutzung zu verhindern.

Es gibt fünf Arten von Feature-Modulen (Domänen-Feature-Modul, Feature-Modul mit Routing, Routing-Modul, Service-Feature-Modul und Identifizierbare-Komponenten-Feature-Modul). Jedes Modul behandelt eine bestimmte Art von Funktionalität. Das Erlernen der Verwendung von Feature-Modulen mit Routing kann dabei helfen, diskrete Feature-Sets zu erstellen und eine gute und klare Trennung von Belangen auf Ihre Anwendung anzuwenden.

Suchbegriffe:

• Angular-Feature-Module

• Gemeinsame Feature-Struktur in Angular

• Feature-Modul-Anbieter

• Lazy Loading von Routing- und Feature-Modulen

10. Formulare und Validierung (Responsive Formulare und Validatoren)

---

Formulare sind ein unvermeidlicher Bestandteil jeder Front-End-Entwicklung.

Authentifizierung erscheint auch mit dem Formular.

Es gibt viele Möglichkeiten, intelligente, datengesteuerte Formulare in Angular zu erstellen. Die beliebteste Formiteration ist die reaktive Form. Es gibt jedoch auch andere Optionen, nämlich vorlagengesteuerte Formulare und benutzerdefinierte Validatoren.

Wenn Sie verstehen, wie Validatoren mit CSS arbeiten, können Sie Ihren Arbeitsablauf beschleunigen und Ihre Anwendung in einen für Validierungsfehler bereiten Bereich verwandeln.

Suchbegriffe:

• Angular formale Verifizierung

• Vorlagengesteuerte Verifizierung

• Responsive Formularverifizierung

• Synchrone und asynchrone Validatoren in Angular

• Integrierte Validatoren

• Benutzerdefinierte Angular-Validatoren

• Feldübergreifende Kreuzvalidierung

11. Inhalt Projektion

---

Angular hat etwas namens Inhaltsprojektion, die effektiv Daten von übergeordneten Komponenten an untergeordnete Komponenten weitergibt. Auch wenn sich das kompliziert anhört, handelt es sich tatsächlich um den Vorgang, Ansichten innerhalb von Ansichten zusammenzufügen, um eine Masteransicht zu erstellen.

Normalerweise verstehen wir Inhaltsprojektion im oberflächlichen Sinne – wenn wir untergeordnete Ansichten in einer übergeordneten Ansicht verschachteln. Um unser Verständnis zu erweitern, müssen wir jedoch auch verstehen, wie Daten zwischen verschiedenen Ansichten übertragen werden. Hier ist es hilfreich, die Inhaltsprojektion zu verstehen.

Das Verständnis der Inhaltsprojektion kann Ihnen dabei helfen, den Datenfluss Ihrer Anwendung zu bestimmen und festzustellen, wo Schwankungen auftreten.

Suchbegriffe:

• Angulare Inhaltsprojektion

• Angulare Eltern-Kind-Ansichtsbeziehung

• Angulare Ansichtsdatenbeziehung

12.onPush-Änderungserkennung

---

Standardmäßig Angular Verwenden Sie die Standardstrategie zur Änderungserkennung. Dies bedeutet, dass die Komponente immer überprüft wird. Obwohl die Verwendung von Standardwerten nichts Falsches ist, kann sie eine ineffiziente Methode zur Erkennung von Änderungen sein.

Für eine kleine Anwendung sind Laufgeschwindigkeit und Leistung nicht schlecht. Sobald eine Anwendung jedoch eine bestimmte Größe erreicht, kann die Ausführung insbesondere in älteren Browsern sehr umständlich werden.

Die Änderungserkennungsstrategie von onPush wird Ihre Anwendung erheblich beschleunigen, da sie auf spezifischen Auslösern basiert und nicht auf ständigen Überprüfungen, um festzustellen, ob etwas passiert ist.

Suchschlüsselwörter:

• Angular onPush-Änderungserkennung

13. Pfadschutz, Vorladen, verzögertes Laden

---

Wenn Sie über eine Art Anmeldung verfügen, benötigen Sie Pfadschutz. Sie können bestimmte Ansichten vor unbefugten Ansichten schützen, was in vielen Anwendungen eine wesentliche Anforderung ist. Der Pfadschutz fungiert als Schnittstelle zwischen Routern und Anforderungsrouten. Es ist der Entscheidungsträger, der entscheidet, ob eine Route befahren werden darf. In der Welt des Pfadschutzes gibt es viel zu entdecken – nämlich Pfadentscheidungen basierend auf Dingen wie Token-Ablauf, Benutzerauthentifizierung und Pfadsicherheit.

Vorladen und Lazy Loading verbessern auch das Benutzererlebnis, indem sie die Ladezeit Ihrer App beschleunigen. Es ist erwähnenswert, dass es beim Vorladen und Lazy Loading nicht nur um die Entscheidung geht, ob ein bestimmter Satz von Bildern geladen werden soll, sondern dass es auch die Architektur des Bundles verbessern und verschiedene Teile der Anwendung laden kann, die möglicherweise in unterschiedlichen Bereichen und Domänen vorhanden sind.

Suchbegriffe:

• Angular Path Protection

• Angular Authentication Mode

• Angular Preloading und Lazy Loading Module

• Angular Safe Path Mode

14.Since Defining Pipes

---

Die Verwendung von Angular Pipes macht die Datenformatierung unglaublich einfach. Während viele vorkonfigurierte und sofort einsatzbereite Pipelines viele Dinge wie Datumsangaben, Währungen, Prozentsätze und Groß-/Kleinschreibung abdecken, decken sie nicht alles ab, was Sie benötigen.

Hier kommen benutzerdefinierte Pipelines zum Einsatz. Sie können ganz einfach Ihre eigenen Filter erstellen und das Datenformat nach Ihren Wünschen konvertieren. Es ist wirklich einfach, also probieren Sie es aus!

Suchschlüsselwörter:

• Angular Custom Pipeline

15. @viewChild- und @ContentChild-Dekoratoren

---

viewChild und contentChild sind die Art und Weise, wie Komponenten miteinander kommunizieren. Der springende Punkt bei Angular ist, dass Sie über mehrere Komponenten verfügen, die wie ein Puzzle zusammengesetzt sind. Wenn diese Komponenten jedoch voneinander isoliert sind, bringt das Puzzle nicht wirklich viel.

Hier kommen viewChild und contentChild ins Spiel. Wenn Sie lernen, diese beiden Dekoratoren zu verwenden, erhalten Sie Zugriff auf verwandte Komponenten. Dies erleichtert die Aufgabe des Datenaustauschs und ermöglicht die Übertragung von Daten und Ereignissen, die von zugehörigen Komponenten ausgelöst werden.

Suchbegriffe:

• Angular-Modifikator

• Viewchild und Contentchild in Angular

• Angular-Komponentendatenfreigabe

16. Dynamische Komponenten und NG-Vorlage

---

Komponenten sind die Bausteine ​​von Angular. Allerdings sind nicht alle Komponenten fest und einige von ihnen müssen dynamisch erstellt und nicht vorkompiliert werden.

Dynamische Komponenten ermöglichen es Anwendungen, bestimmte Komponenten dynamisch zu erstellen. Statische Komponenten gehen davon aus, dass sich die Dinge nicht ändern. Es kann aus den erwarteten Ein- und Ausgängen vorhergesagt werden.

Dynamische Komponenten werden jedoch bei Bedarf gerendert. Sie sind sehr praktisch, wenn Sie Reaktionen erstellen, bei denen Aktionen in einer Anwendung oder Seite stattfinden, die möglicherweise auf externe Quellen und deren Aktualisierungen lauscht.

Suchbegriffe:

• Dynamische Komponenten in Angular

• Dynamische Komponenten und NG-Templating

17. @Host @Hostingbinding und exportAs

---

@Host, @Hostingbinding und exportAs sind Angular-Anweisungsdekoratoren, die die Parameter erweitern, an die sie angehängt sind. Sie ermöglichen Ihnen auch die Erstellung sauberer Vorlagen, die zur Verwendung in Ihrer Anwendung exportiert werden können.

Wenn das oben Genannte verwirrend klingt, sollten Sie zunächst nach Angular-Direktiven und ihrem Existenzzweck suchen. @Host, @Hostingbinding und exportAs sind Attribute der Direktive, die bei der Implementierung helfen.

Suchschlüsselwörter:

• Angular Directive Pattern

• Angular’s ​​​​@Host, @Hos tingbinding und exportAs

18. Zustandsverwaltung mit RxJs

---

Der Status der endgültigen Entscheidung Dem Benutzer angezeigte Daten. Wenn Ihr Bundesstaat ein chaotisches Durcheinander aus Spaghetti ist, ist die Wahrscheinlichkeit groß, dass Ihre gesamte Datenstruktur gegenüber Änderungen anfällig wird.

Wenn Sie beginnen zu verstehen, wie der Zustand in Angular funktioniert, werden Sie verstehen, wie und warum sich Daten verhalten.

Während Angular über ein eigenes Statusverwaltungssystem verfügt, ist RxJs eine hervorragende Möglichkeit, den Status und die zugehörigen Daten zu zentralisieren. In der Eltern-Kind-Beziehungskette können Daten verloren gehen. RxJs entkoppelt Dinge, indem es einen zentralen Speicher erstellt.

Suchbegriffe:

• Angular RxJs

• Flux/Redux-Prinzip

• Angular State Management Prinzipien

19. Abhängigkeitsinjektion und Zonen

---

„Abhängigkeitsinjektion“ ist normalerweise der Fall Ein riesiges Konzept. Wenn Sie damit nicht sehr vertraut sind, sollten Sie unbedingt nachschlagen. Es gibt mehrere Möglichkeiten, eine Abhängigkeitsinjektion in Angular effizient zu erstellen, hauptsächlich durch Konstruktoren. Auf diese Weise können Sie Ihre Anwendung effizienter gestalten, indem Sie nur das importieren, was Sie benötigen, anstatt alles zu laden.

Wie „Abhängigkeitsinjektion“ ist auch „Bereich“ ein einzigartiges Konzept für Angular. Auf diese Weise kann eine Anwendung asynchrone Aufgaben vom Anfang bis zum Ende erkennen. Dies ist wichtig, da diese asynchronen Aufgaben den internen Status der Anwendung und damit die Ansicht ändern können. „Zonen“ erleichtern den Änderungserkennungsprozess.

Suchbegriffe:

• Angular Zone

• Dependency Injection

• Angular DI

Final Words

---

Angular ist ein tolles Thema. Während das Erstellen von Angular-Anwendungen den Lernprozess unterstützen kann, weiß man manchmal einfach nicht, was man nicht weiß. Wenn Sie zum ersten Mal anfangen, ist es schwer, etwas zu verstehen, das Sie nicht wissen. Ich hoffe, dieser kurze Leitfaden kann Ihnen über Ihre üblichen Angular-Tutorials hinaus Inspiration geben und Ihnen ein umfassenderes Verständnis von Angular vermitteln.

Originaladresse: https://medium.com/better-programming/19-things-you-need-to-learn-to-become-an-efficient-angular-developer-c0ccfa51222a

Mehr Programmierung für Weitere Informationen zu diesem Thema finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von19 Dinge, die Angular-Entwickler lernen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!