Was Sie für eine effektive Entwicklung des Angular-Frameworks wissen müssen

Es wird angenommen, dass in der Front-End-Entwicklung das Äquivalent von " Hallo Welt " eine Anwendung ist - eine Liste von Aufgaben. Ja, dies ermöglicht es Ihnen, den CRUD-Aspekt beim Erstellen einer Anwendung abzudecken, aber die Funktionen des verwendeten Frameworks oder der verwendeten Bibliothek werden häufig sehr oberflächlich beeinflusst.

Angular ändert sich ständig und wird aktualisiert, aber etwas bleibt gleich. Ich werde über die grundlegenden Angular-Konzepte sprechen, die Sie lernen müssen, wenn Sie dieses JavaScript-Framework optimal nutzen möchten.

Es gibt viel zu lernen, mit Angular zu arbeiten, und Neulinge bleiben oft auf der ersten Ebene stecken, nur weil sie nicht wissen, wo und wonach sie suchen sollen. Aus diesem Grund habe ich einen Leitfaden geschrieben (der eine kurze Zusammenfassung der Grundlagen von Angular enthält), der mir selbst sehr nützlich wäre, als ich gerade mit Angular 2+ angefangen habe.

Übersetzt nach Alconost

1. Die modulare Architektur von Angular

Theoretisch können Sie den gesamten Angular-Code auf einer Seite und in einer großen Funktion platzieren. Dies wird jedoch nicht empfohlen: Dies ist eine ineffiziente Methode zur Strukturierung des Codes, die Sie daran hindert, den Zweck von Angular aufzudecken.

Ein Teil der Architektur dieses Frameworks ist die aktive Nutzung des Konzepts von Modulen, bei denen es sich um Code handelt, der einen einzigen Zweck hat. Eine Angular-Anwendung besteht im Wesentlichen aus Modulen, von denen einige isoliert sind, während andere üblich sind.

Es gibt verschiedene Möglichkeiten, Module in einer Anwendung zu organisieren. Indem Sie verschiedene Architekturstrukturen untersuchen, können Sie entscheiden, wie die Anwendung während der Entwicklung skaliert werden soll, und lernen, wie Sie Code isolieren und die gegenseitige Abhängigkeit verringern.

Was zu googeln:

• Winkelarchitekturmuster,
  
• Angular skalierbare Anwendungsarchitektur.
  

2. Einwegdatenfluss und Unveränderlichkeit

Die bilaterale Bindung hat in den Tagen von Angular 1 die Herzen vieler Front-End-Entwickler erobert - tatsächlich war dies eines der Hauptmerkmale dieses Frameworks. Mit der Entwicklung der Anwendung führte dieser Ansatz jedoch zu Leistungsproblemen.

Es stellte sich heraus, dass eine bidirektionale Bindung nicht überall erforderlich ist

Angular 2+ macht es immer noch möglich, es zu implementieren, aber dafür muss es explizit angefordert werden - daher muss der Entwickler über Datenströme und deren Richtung nachdenken. Darüber hinaus kann die Anwendung Daten flexibler verarbeiten, da Sie festlegen können, wie sie übertragen werden sollen.

Was zu googeln:

• Arbeit mit Datenströmen in Angular,
  
• unidirektionaler Fluss in Angular,
  
• Vorteile des Einweg-Schnappens.
  

3. Attributive und strukturelle Richtlinien

Eine Direktive ist eine Erweiterung von HTML mit zusätzlichen Elementen. Mit Attributanweisungen können Sie die Eigenschaften eines Elements ändern. Strukturanweisungen ändern das Layout durch Hinzufügen oder Entfernen von DOM-Elementen.

Zum Beispiel sind ngSwitch und ngIf strukturelle Anweisungen: Sie bewerten Parameter und bestimmen, ob bestimmte Teile des DOM vorhanden sein sollen.

Attributanweisungen sind benutzerdefinierte Verhaltensweisen, die an ein Element, eine Komponente oder andere Anweisungen angehängt sind.

Indem Sie lernen, die Anweisungen dieser beiden Typen zu verwenden, können Sie die Funktionen Ihrer eigenen Anwendung erweitern und die Doppelung von Code im Projekt reduzieren. Attributanweisungen helfen auch dabei, das spezifische Verhalten zu zentralisieren, das in verschiedenen Teilen der Anwendung verwendet wird.

Was zu googeln:

• Angular Attribut Direktiven,
  
• Winkelstrukturrichtlinien,
  
• Angular Structural Directive Templates.
  

4. Handler für den Komponentenlebenszyklus

Jede Anwendung hat einen Lebenszyklus, der bestimmt, wie Objekte erstellt, verarbeitet und dann gelöscht werden. Im Angular-Framework sieht der Komponentenlebenszyklus ungefähr so ​​aus:

  →  →    →       →  →   DOM 

Wir haben die Möglichkeit, die wichtigsten Punkte dieses Zyklus zu verarbeiten und uns auf bestimmte Zeitpunkte oder Ereignisse zu konzentrieren. Auf diese Weise können Sie geeignete Antworten erstellen und das Verhalten an die verschiedenen Phasen der Komponente anpassen.

Wenn Sie beispielsweise vor dem Rendern der Seite einige Daten laden möchten, können Sie dies über ngOnInit() tun. Wenn Sie die Verbindung zur Datenbank trennen müssen, kann dies zum Zeitpunkt von ngOnDestroy() .

Was zu googeln:

• Komponenten-Lebenszyklus-Handler in Angular;
  
• Komponentenlebenszyklus.
  

5. Beobachtete Dienste und HTTP

Beobachtete Dienste sind kein einzigartiges Merkmal von Angular, sondern etwas von ES7. Diese Funktionalität wurde jedoch im Rahmen des Frameworks implementiert, und die entsprechenden Ideen werden auch gut auf React, Vue und andere JavaScript-bezogene Bibliotheken und Frameworks übertragen.

Was zu googeln:

• JavaScript-Beobachtermuster
  
• beobachtete Objekte und HTTP in Angular,
  
• Beobachtete Objekte in ES7.
  

6. Die Architektur intelligenter und dummer Komponenten

Beim Schreiben von Anwendungen auf Angular wird häufig alles in einer Komponente gespeichert, dies ist jedoch nicht der beste Ansatz. Das Konzept der intelligenten und dummen Komponenten in Angular verdient definitiv mehr Aufmerksamkeit, insbesondere bei Anfängern.

Die Rolle der Komponente im allgemeinen Plan der Anwendung wird dadurch bestimmt, ob sie „dumm“ oder „intelligent“ ist. "Dumme" Komponenten verfolgen normalerweise nicht den Zustand und ihr Verhalten ist leicht vorherzusagen und zu verstehen - wenn möglich, sollten Komponenten auf diese Weise hergestellt werden.

Intelligente Komponenten sind schwieriger zu verstehen, da sie Ein- und Ausgänge umfassen. Um die Funktionen von Angular optimal nutzen zu können, sollten Sie die Architektur intelligenter und dummer Komponenten verstehen: Auf diese Weise beherrschen Sie Muster und Denkweisen, mit denen Sie produktiveren Code schreiben und die richtige Interaktion innerhalb der Anwendung aufbauen können.

Was zu googeln:

• kluge und dumme Winkelkomponenten,
  
• dumme staatenlose Komponenten
  
• Präsentationskomponenten
  
• intelligente eckige Komponenten.
  

7. Standardanwendungsstrukturen

Die Möglichkeit, bei der Festlegung der Struktur der Anwendung mit der Befehlszeile zu arbeiten, ist nützlich, aber kein Allheilmittel. Das Erstellen einer Anwendung auf Angular (und jeder Anwendung im Allgemeinen) ähnelt dem Erstellen eines Hauses: Es gibt gut etablierte Prozesse, die von der Community seit vielen Jahren optimiert wurden und es Ihnen ermöglichen, effizientere und produktivere Anwendungen zu schreiben.

Und Angular ist hier keine Ausnahme.

Die meisten Beschwerden über Angular sind von denen zu hören, die versuchen, es zu studieren, ohne die Struktur zu verstehen. Eine klare und präzise Syntax wird im laufenden Betrieb erfasst. Um jedoch die Struktur der Anwendung zu verstehen, müssen Sie den Kontext, die Anforderungen und die Zusammenhänge auf konzeptioneller und praktischer Ebene kennen. Nachdem Sie die verschiedenen möglichen Strukturen von Angular-Anwendungen und Empfehlungen für ihre Anwendung untersucht haben, erhalten Sie eine Vorstellung davon, wie Sie Ihre eigenen schreiben können.

Was zu googeln:

• Winkelanwendungen mit einem Repository,
  
• Winkelbibliotheken, Winkelpakete,
  
• Winkelbündel
  
• Winkelmikroanwendungen.
  
• Monorepositories.
  

8. Syntax für die Vorlagenbindung

Das Highlight des fraglichen JavaScript-Frameworks ist die Bindung, und es ist auch einer der Gründe für seine Erstellung geworden. Die Vorlagenbindung kombiniert statisches HTML und JavaScript, und die Vorlagenbindungssyntax von Angular fungiert als Vermittler zwischen den beiden Technologien.

Wenn Sie lernen, diese Funktionen richtig und rechtzeitig zu nutzen, wird es viel einfacher und angenehmer, eine statische Seite in etwas Interaktives zu verwandeln. Untersuchen Sie verschiedene Bindungsszenarien: Eigenschaftsbindung, Ereignisbindung, Interpolation und bidirektionale Bindung.

Was zu googeln:

• Bindung an Eigenschaften in Angular,
  
• Ereignisbindung in Angular,
  
• Zweiwegebindung in Angular, Interpolation in Angular,
  
• Konstanten an Angular übergeben.
  

9. Routing- und Funktionsbausteine

Im Fall von Angular werden Funktionsmodule normalerweise unterschätzt, obwohl dies eine hervorragende Möglichkeit ist, eine Reihe von Geschäftsanforderungen zu optimieren und einzuschränken. Sie helfen, Verantwortlichkeiten zu differenzieren und Codeverschmutzung langfristig zu verhindern.

Es gibt fünf Arten von Funktionsmodulen (Domäne, Routing, Routing, Service und Widget), und jedes verfügt über eigene Funktionen. Indem Sie lernen, wie Funktionsmodule in Kombination mit Routing verwendet werden, können Sie separate Funktionssätze erstellen und eine verständliche und bequeme Trennung der Anwendungsfunktionen bereitstellen.

Was zu googeln:

• Winkelfunktionsbausteine,
  
• gemeinsame funktionelle Strukturen in Angular,
  
• Funktionsmodulanbieter.
  
• Lazy Loading mit Routing- und Funktionsbausteinen.
  

10. Formular- und Datenvalidierung (reaktive Formulare und Validatoren)

Formulare sind ein wesentlicher Bestandteil der Front-End-Entwicklung.

Und wo es Formulare gibt, gibt es eine Datenüberprüfung.

Sie können intelligente Formulare erstellen, die auf verschiedene Weise gut mit Daten im Angular-Framework zusammenarbeiten. Reaktive Formulare sind der häufigste Ansatz. Es gibt jedoch andere Optionen, nämlich Vorlagen- und benutzerdefinierte Validatoren.

Wenn Sie wissen, wie Validatoren und CSS funktionieren, können Sie Ihren Workflow beschleunigen und Ihre Anwendung auf die Fehlerbehandlung vorbereiten.

Was zu googeln:

• Formularvalidierung in Angular,
  
• vorlagenbasierte Datenvalidierung,
  
• Validierung reaktiver Formen,
  
• synchrone und asynchrone Validatoren in Angular,
  
• eingebaute Validatoren
  
• benutzerdefinierte Validatoren in Angular,
  
• Felder überprüfen.
  

11. Projektion von Inhalten

Das Angular-Framework verfügt über ein Konzept wie das Projizieren von Inhalten, mit dem Sie Daten effektiv von übergeordneten auf untergeordnete Komponenten übertragen können. Auf den ersten Blick mag dies kompliziert erscheinen, aber in diesem Fall werden die Ansichten tatsächlich in anderen Ansichten platziert - dies erstellt die Hauptansicht.

Oft wird die Projektion von Inhalten oberflächlich verstanden: als ob wir untergeordnete Ansichten in die übergeordnete Ansicht einbetten würden. Für ein tieferes Verständnis des Frameworks ist es jedoch erforderlich zu verstehen, wie Daten zwischen verschiedenen Darstellungen übertragen werden. Hier ist die Kenntnis des Konzepts der Projektion von Inhalten hilfreich.

Nachdem Sie die Projektion von Inhalten untersucht haben, lernen Sie, den Anwendungsdatenstrom zu verstehen und festzustellen, wo Änderungen vorgenommen werden.

Was zu googeln:

• Projektion von Inhalten in Angular,
  
• Beziehung der Eltern- und Kinderansichten in Angular,
  
• Beziehungen zwischen Daten in Winkelansichten.
  

12. Änderungserkennungsstrategie "onPush"

Standardmäßig verwendet Angular eine Standardstrategie zur Erkennung von Änderungen, bei der Komponenten immer überprüft werden. Es ist nichts Falsches daran, das Standardverhalten zu verwenden. Eine solche Erkennung von Änderungen kann jedoch unwirksam sein.

Für kleine Anwendungen bleiben Geschwindigkeit und Leistung zufriedenstellend. Sobald die Anwendung jedoch eine bestimmte Größe erreicht, verlangsamt sich der Start einiger Elemente, insbesondere in älteren Browsern.

Die onPush Änderungserkennungsstrategie beschleunigt die Anwendung erheblich, da sie nicht auf einer ständigen Überprüfung beruht, sondern vom Betrieb bestimmter Trigger abhängt.

Was zu googeln:

• OnPush-Änderungen in Angular erkennen.
  

13. Routenverteidiger, vor und verzögertes Laden

Wenn die Anwendung über eine Kontoanmeldung verfügt, benötigen Sie Routenverteidiger. Unter dem Strich sollen bestimmte Ansichten vor unbefugtem Anzeigen geschützt werden, was in vielen Fällen obligatorisch ist. Routenverteidiger fungieren als Schnittstelle zwischen dem Router und der angeforderten Route: Sie bestimmen, ob der Zugriff auf eine bestimmte Route zugelassen werden soll oder nicht. Dies ist ein ziemlich umfangreiches Thema: Dazu gehört beispielsweise das Problem, Entscheidungen über das Routing auf der Grundlage des Gültigkeitszeitraums von Token, der Authentifizierung von Benutzerrollen und des Schutzes von Routen zu treffen.

Um das Laden der Anwendung zu beschleunigen und die Arbeit damit zu vereinfachen, hilft auch das vorläufige und verzögerte Laden. Es sollte auch beachtet werden, dass diese Tools nicht nur die Entscheidung ermöglichen, ob ein bestimmter Satz von Bildern heruntergeladen werden soll, sondern auch dazu beitragen, die zugehörige Architektur zu verbessern und verschiedene Teile der Anwendung zu laden, die sich möglicherweise in verschiedenen Domänen und Definitionsbereichen befinden.

Was zu googeln:

• Routenwächter in Angular,
  
• Authentifizierungsmuster in Angular,
  
• Winkelmodule vor und nach dem Laden
  
• sichere Routenvorlagen in Angular.
  

14. Benutzerdefinierte Kanäle

Angular Framework-Kanäle vereinfachen die Datenformatierung erheblich. Viele Arten der Formatierung (Datumsangaben, Währungen, Prozentsätze und Groß- und Kleinschreibung von Zeichen) werden bereits von vorkonfigurierten, gebrauchsfertigen Kanälen abgedeckt, Sie benötigen jedoch wahrscheinlich etwas anderes.

Und hier sind nicht standardmäßige Kanäle nützlich, die es einfach machen, eigene Filter zu erstellen und Datenformate auf die gewünschte Weise zu konvertieren. Es ist ziemlich einfach - probieren Sie es aus.

Was zu googeln:

• Nicht-Standard-Kanäle in Angular.
  

15. Dekorateure @ViewChild und @ContentChild

ViewChild und ContentChild werden zur Kommunikation zwischen Komponenten verwendet. Das Wesen des Angular-Gerüsts besteht darin, dass mehrere zusammengesetzte Komponenten wie ein Mosaik verwendet werden. Dieses Design kann jedoch nichts tun, wenn seine Teile voneinander isoliert sind.

Dazu werden die ViewChild und ContentChild Dekoratoren benötigt. Nachdem Sie ihre Verwendung gelernt haben, können Sie auf verwandte Komponenten zugreifen. Dies vereinfacht den Datenaustausch und ermöglicht das Übertragen von Daten und Ereignissen, die durch verwandte Komponenten verursacht werden.

Was zu googeln:

• Winkeldekorateure,
  
• ViewChild und ContentChild in Angular,
  
• Datenaustausch zwischen Komponenten in Angular.
  

16. Dynamische Komponenten und "ng-template"

Im Angular-Framework werden Anwendungen auf der Basis von Komponenten erstellt. Es sind jedoch nicht alle Komponenten statisch - einige müssen im laufenden Betrieb erstellt und nicht vorkompiliert werden.

Von der Anwendung im laufenden Betrieb erstellte Komponenten werden als dynamisch bezeichnet. Statische Komponenten setzen eine gewisse Unveränderlichkeit voraus: Wir erwarten bestimmte Werte am Ein- und Ausgang und das entsprechende vorhersagbare Verhalten.

Dynamische Komponenten werden nach Bedarf gerendert. Sie sind praktisch, wenn Sie Anwendungen erstellen, die externe Quellen abhören, ihren Status ändern oder Reaktionen auf Aktionen auf der Seite darstellen können.

Was zu googeln:

• dynamische Komponenten in Angular,
  
• dynamische komponenten und ng-template.
  

17. Host , Hostbindung und "exportAs"

@Host , @HostBinding sind Dekoratoren, und exportAs ist eine Eigenschaft des @Directive-Dekorators. Ihr Zweck ist es, die Wirkung der Parameter, an die sie gebunden sind, zu erweitern. Sie bieten auch die Möglichkeit, kleine Exportvorlagen zur Verwendung in der Anwendung zu erstellen.

Wenn das oben Gesagte unverständlich klingt, sollten Sie die Angular-Anweisungen studieren und ihren Zweck verstehen. @Host , @HostBinding und exportAs sind wichtige Elemente des Richtlinienkonzepts.

Was zu googeln:

• Verwendungsmuster für Winkelanweisungen
  
• @Host , @HostBinding und exportAs in Angular.
  

18. Zustandsverwaltung mit NgRx

Der Status der Anwendung bestimmt letztendlich die dem Benutzer angezeigten Daten. Und wenn es sich bei der Anwendung um ein Bündel Spaghetti handelt, besteht die Möglichkeit, dass die gesamte Datenstruktur unzuverlässig wird und bei Änderungen einfach abstürzt.

Wenn Sie verstehen, warum in Angular Zustände benötigt werden, können Sie verstehen, wie und warum sich Daten so und nicht anders verhalten.

Das Angular-Framework verfügt über ein eigenes Zustandsverwaltungssystem, aber NgRx kann Zustände und zugehörige Daten viel besser zentralisieren. Daten können in der Eltern-Kind-Beziehungskette verloren gehen, und NgRx erstellt ein zentrales Repository für sie und beseitigt dieses Problem.

Was zu googeln:

• Angular NgRx,
  
• Flux- und Redux-Prinzipien
  
• Angular State Management-Prinzipien.
  

19. Zonen und Abhängigkeitsinjektion

Die Abhängigkeitsinjektion ist im Allgemeinen ein umfangreiches Konzept. Wenn Sie also nicht ganz mit dem Thema vertraut sind, sollten Sie mehr verstehen. Innerhalb von Angular gibt es verschiedene Möglichkeiten, Abhängigkeiten sorgfältig einzufügen. Dies erfolgt jedoch hauptsächlich mithilfe des Konstruktors. Sie können also nicht alles hintereinander herunterladen, sondern das Notwendigste importieren - und damit die Effizienz der Anwendung steigern.

Wie bei der Abhängigkeitsinjektion gab es vor Angular „Zonen“. Sie ermöglichen es der Anwendung, asynchrone Aufgaben zu erkennen. Dies ist wichtig, da asynchrone Aufgaben den internen Status der Anwendung und damit die Präsentation ändern können. Zonen erleichtern das Erkennen von Änderungen.

Was zu googeln:

• Zonen in Angular,
  
• Abhängigkeitsinjektion
  
• Winkel DI.
  

Fazit

Angular ist ein umfangreiches Thema, das es zu erkunden gilt. Wenn Sie Anwendungen in diesem Framework erstellen, können Sie viel lernen, aber manchmal ist völlig unklar, wonach Sie suchen und wo Sie graben müssen. Am Anfang kann es schwierig sein, in einer unbekannten Umgebung zu navigieren. Hoffentlich hat dieses kurze Tutorial einen Einblick in Konzepte gegeben, die über die üblichen Angular-Tutorials hinausgehen, und einen breiteren Blick auf dieses Framework als Ganzes ermöglicht.

Über den Übersetzer

Der Artikel wurde von Alconost übersetzt.

Alconost lokalisiert Spiele , Anwendungen und Websites in 70 Sprachen. Muttersprachliche Übersetzer, Sprachtests, Cloud-Plattform mit API, kontinuierliche Lokalisierung, Projektmanager rund um die Uhr, jedes Format von Zeichenfolgenressourcen.

Wir machen auch Werbe- und Schulungsvideos - für Websites, die verkaufen, Image, Werbung, Schulung, Teaser, Expliner, Trailer für Google Play und den App Store.

→ Lesen Sie mehr