Was ist Angular 2?
Zum Erstellen von Webanwendungen in HTML und JavaScript wird ein JavaScript-Framework namens Angular 2 verwendet, das von Google erstellt wurde. Bei der Arbeit mit Anwendungen mit nur einer Seite konnten die Hindernisse, denen man häufig gegenübersteht, mit Angular 2 überwunden werden.
Module im Winkel 2
In einer Anwendung werden die logischen Grenzen durch Angular 2 zusammengesetzt. Die Funktionalitäten könnten in verschiedene Module aufgeteilt werden, anstatt alles in eine Anwendung zu packen. Im Folgenden sind einige der Teile aufgeführt, aus denen ein Modul besteht:
- Um auf die Funktionen in der Anwendung zugreifen zu können, werden die Komponenten, die geladen werden müssen, mithilfe des Bootstrap-Arrays an Angular JS weitergeleitet. Die Komponente muss im Bootstrap-Array deklariert werden, damit sie in der Angular JS-Anwendung für andere Komponenten verwendet werden kann.
- Die Pipes, Derivate, Komponenten usw. werden über das Export-Array exportiert, um in anderen Modulen verwendet zu werden.
- Aus anderen Angular JS-Modulen kann die Funktionalität mithilfe des Import-Arrays importiert werden.
Die Architektur von Angular 2
Die Anatomie einer Angular 2-Anwendung wird durch das obige Diagramm beschrieben. Die Funktionalität der Anwendung wird durch jede Komponente definiert, die die logische Grenze darstellt. Komponentenübergreifende Funktionen werden mithilfe von mehrschichtigen Diensten gemeinsam genutzt.
Eine Komponente wird durch Klasse, Vorlage und Metadaten definiert. Die Eigenschaften und Methoden bestehen aus der Klasse. Die Funktionalität der Klasse wird erweitert und mit Hilfe von Metadaten dekoriert. Die HTML-Ansicht der Anwendung kann mit Hilfe der Vorlage definiert werden.
Diese Anwendung verfügt über ein Stammmodul und mehrere Komponenten, die die Funktionalität voneinander trennen.
Ähnlich wie das Root Angular-Modul verfügt das Feature-Modul über mehrere Komponenten, die die Funktionalität verteilen.
In einer Angular JS-Anwendung wird der logische Code durch die Komponenten definiert.
- Das Binden und Ableiten erfolgt über die Vorlage, die den HTML-Code der Anwendung enthält und die Ansicht der Anwendung darstellt.
- Die Eigenschaften und Methoden sind in der Klasse vorhanden, die die Ansicht der Anwendung unterstützt und in TypeScript definiert ist. Es hat den Klassennamen, den Eigenschaftsnamen, den Eigenschaftstyp und den Wert.
- Mit einem Decorator werden die Metadaten definiert, die die zusätzlichen Daten enthalten.
Winkel 2 Eigenschaften
Die Leistungsfähigkeit eines HTML wird mithilfe eines benutzerdefinierten HTML-Elements, das als Direktive bezeichnet wird, erweitert. Die Direktiven in Angular 2 sind ngif und ngFor.
- In echten Szenarien werden dem HTML-Code mit Hilfe des Elements ngif Elemente hinzugefügt, die jedoch nicht hinzugefügt werden, wenn sie mit False ausgewertet werden. Vertreten durch.
- Basierend auf der for-Schleifenbedingung wird das ngFor-Element verwendet.
Die Datenbindung ist eine der Funktionen in Angular 2. In einer Eigenschaft einer Klasse kann die Eigenschaft eines HTML-Tags eine Bindung sein.
In Angular 2 ist die Fehlerbehandlung eine Option für die Anwendungen. Die ReactJS-Fangbibliothek ist enthalten und die Fangfunktion wird verwendet. Unten finden Sie den Fehlerbehandlungscode.
Zur Error-Handler-Funktion ist der Link in der catch-Funktion enthalten. An die Konsole wird der Fehler von der Fehlerbehandlungsfunktion gesendet. Die Ausführung wird fortgesetzt, nachdem der Fehler wieder in das Hauptprogramm geworfen wurde. Dadurch wird der Fehler an die Konsole weitergeleitet.
Benutzer werden mithilfe von Routing zu verschiedenen Seiten geleitet, nachdem eine Option auf der Hauptseite ausgewählt wurde.
Dabei können die Daten mit Hilfe mehrerer Filter und Pipes transformiert werden.
- In Kleinbuchstaben umwandeln.
- In Großbuchstaben umwandeln.
- Aus einer Eingabezeichenfolge kann ein Datenabschnitt erstellt werden. Die Slice-Startposition wird durch den Start referenziert und die Endposition wird durch das Ende referenziert.
- Die Eingabezeichenfolge kann mit Hilfe der Datumsfunktion in das Datumsformat konvertiert werden.
- In das Währungsformat wird die Eingabezeichenfolge mit Hilfe der Währungsfunktion konvertiert.
- In das Prozentformat wird die Eingabezeichenfolge mit der Prozentfunktion konvertiert.
Mit Hilfe von Angular 2 können auch benutzerdefinierte Pipes erstellt werden.
- Der Name der Pipe wird durch den Pipename definiert.
- Die benutzerdefinierte Rohrklasse wird durch die Rohrklasse definiert.
- Für die Arbeit mit der Pipe wird die Transformationsfunktion verwendet.
- An die Pipe werden die Parameter von Parameters übergeben.
- Der Rückgabetyp der Pipe wird durch den Rückgabetyp definiert.
Der Lebenszyklus von Angular 2
Von der Initiierung bis zum Ende der Anwendung hat die Angular 2-Anwendung ihren Lebenszyklus.
Dieses Diagramm zeigt den gesamten Lebenszyklus von Angular 2. Nachfolgend finden Sie die Beschreibung.
- Die Änderung des Werts einer datengebundenen Eigenschaft wird mit der Methode ngOnChanges beschrieben.
- Nachdem Angular die datengebundenen Eigenschaften angezeigt hat, wird während der Initialisierung der Komponente die Methode ngOnInit aufgerufen.
- Wenn Angular selbst keine Änderungen erkennen konnte, wird der ngDoCheck zur Erkennung verwendet.
- Wenn in der Ansicht der Komponente der externe Inhalt vom Angular projiziert wird, wird der Befehl ngAfterContentInit als Antwort aufgerufen.
- Sobald der projizierte Inhalt vom Angular überprüft wurde, wird der Befehl ngAfterContentChecked als Antwort aufgerufen.
- Sobald die Ansichten und untergeordneten Ansichten der Komponente durch Angular initialisiert wurden, wird ngAfterInit aufgerufen.
- NgAfterViewChecked wird aufgerufen, nachdem die Komponenten und untergeordneten Ansichten vom Angular überprüft wurden.
- Vor der Zerstörung der Richtlinie oder der Komponente durch den Angular werden die NGOs zerstört, was die Aufräumphase darstellt.
Services ist eine weitere Eigenschaft von Angular 2, die verwendet wird, wenn verschiedene Module eine gemeinsame Funktionalität benötigen. Unter verschiedenen Modulen könnte die Datenbankfunktionalität wiederverwendet werden. Die Datenbankfunktionalität kann von diesem erstellten Dienst verwendet werden.
Warum brauchen wir Angular 2?
- Angular 2 bietet Funktionen, die beim Debuggen und Verstehen des Codes sowie der Entwicklung und Bearbeitung helfen.
- Die Kodierung wird mit Hilfe von Angular 2 konsistenter.
- Angular 2 bietet umfangreiche Bindungsmöglichkeiten. Seine Eigenschaftsbindungsfunktion ermöglicht die Steuerung von DOM. Die Reaktion auf ein Ereignis aus der Sicht konnte mit Hilfe der Ereignisbindung erreicht werden.
- Eine voll funktionsfähige Routing-Funktion bietet Angular 2.
- Angular 2 bietet umfassende Dokumentation und Community-Unterstützung, die eine Lösung für nahezu jedes Problem bietet.
Fazit
Angular 2 ist eines der gefragtesten Frameworks für die Webentwicklung und dasjenige, das Sie zum Erstellen Ihrer nächsten Webanwendung benötigen.
Empfohlene Artikel
Dies ist eine Anleitung zu Was ist Angular 2 ?. Hier diskutieren wir die Einführung, die Module in Angular 2, Angular 2 und den Lebenszyklus von Angular 2. Sie können auch unsere anderen Artikel lesen, um mehr zu erfahren.
- Wie installiere ich Angular 2?
- R Programmiersprache
- Arten von Websites
- Arten von Web-Hosting