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.
Suchbegriffe:
Skalierbare Angular-Anwendungsarchitektur
Suchbegriffe:
Einseitiger Fluss in Angular
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-AttributanweisungAngular-Strukturanweisung
create → render → render children → check when data-bound properties change → destroy → remove from DOM
Suchbegriffe:
Komponenten-Lebenszyklus
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
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
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
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
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
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
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
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:
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
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:
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
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
@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
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
„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
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!
So ändern Sie phpmyadmin auf Chinesisch
Was ist der Unterschied zwischen JD International Self-Operated und JD Self-Operated?
Was ist ein Browser-Plugin?
So erstatten Sie den von Douyin aufgeladenen Doucoin zurück
So öffnen Sie eine GFF-Datei
So implementieren Sie Farbschriftarten in CSS
Was ist NodeJS?
Verwendung von Oracle-Einsätzen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
