Einführung in Angular 2 Cheat Sheet
Angular 2 ist ein Open-Source-Framework, das über JavaScript erstellt wurde. Es wurde hauptsächlich für die Entwicklung von Front-End-Webanwendungen verwendet. Es ist der Nachfolger von AngularJS. Es ist in TypeScript geschrieben. Es wird von Google entwickelt. Angular 2 basiert auf modernem JavaScript, das ES6 verwendet. Angular 2 bietet bessere Event-Handling-Funktionen, leistungsstarke Vorlagen und eine bessere Unterstützung für mobile Geräte und Desktop-Webanwendungen. Es ist auch kompatibel mit Mobilgeräten und auf allen Plattformen wie Windows, Mac und Linux.
Angular 2 verfügt über wichtige Funktionen zum Entwickeln von Anwendungen, die Komponenten, Typografien und Dienste sind. Angular 2 besteht aus verschiedenen Komponenten: Modulen, Komponenten, Vorlagen, Metadaten und Diensten. Komponenten helfen bei der Erstellung von Anwendungen in vielen Modulen und helfen bei der Aufrechterhaltung der Anwendung für eine längere Zeit. Die verschiedenen Codesätze wurden von verschiedenen Anwendungsmodulen verwaltet und verwendet, die von der Service-Funktion verwaltet wurden. Module helfen dabei, die Anwendung in ein logisches Teil zu unterteilen, das zur Ausführung einer bestimmten Aufgabe codiert wurde.
Befehle und Inhalt von Angular 2-Spickzettel
Angular 2 Cheat Sheet verfügt über eine umfangreiche Bibliothek, die skalierbar, erweiterbar und interaktiv ist und viele integrierte Methoden zur Berechnung allgemeiner Vorgänge enthält. Es gibt verschiedene Syntax für Vorlagen, NgModules, integrierte Anweisungen, Formulare und andere Konfigurationen:
| Vorlagensyntax | BESCHREIBUNG |
| Es bindet die Eigenschaft 'value' an das Ausdrucksergebnis 'name' | |
| Es bindet das Attribut 'Rolle' an das Ausdrucksergebnis 'Meine Rolle'. | |
| Die Methode read Text wird aufgerufen, wenn ein Klickereignis ausgelöst wird. | |
| Es bindet die Eigenschaft an eine interpolierte Zeichenfolge | |
|
Hallo mein Name)) | Es bindet den Kontext an eine interpolierte Zeichenfolge |
| Es richtet die Zwei-Wege-Bindung ein. | |
|
… | Das Symbol * verwandelt das aktuelle Element in ein eingebettetes Temp. |
|
Student: ((student? .Sname)) | ? Dieser Navigationsoperator gibt an, dass das Schülerfeld optional ist |
| Es bindet die Breite der Stileigenschaft, um das Ergebnis mysize auszudrücken. | |
| Wird für die Datenbindung und den Ereignisbindungsausdruck in der Vorlage verwendet. | |
|
Autonummer: ((vehicleNumber | myCarNuFormat)) | Es transformiert den aktuellen Wert der Fahrzeugnummer über die Pipe mycarNuformat. |
| Das Element wird von einer HTML-Komponente unterschieden | |
| Es bindet die Präsenz der Klasse an den Wahrheitsausdruck. |
NgModules: - Die verschiedenen Ngmodule-Direktiven sind:
| Richtlinien | BESCHREIBUNG |
| @NgModule ((Deklarationen ..)) | Es definiert ein Modul, das Anweisungen usw. enthält. |
| Deklarationen: (MyRedComponent, MyBlueComponent, MyDatePipe) | Es wird die Liste der zu diesem Modul gehörenden Komponenten, Richtlinien und Rohre angezeigt. |
| Exporte: (MyRedComponent, MyDatePipe) | Es wird eine Liste der Komponenten und Leitungen angezeigt, die zum Importieren dieses Moduls sichtbar sind |
| Importe: (BrowserModule, SomeOtherModule) | Es wird eine Liste der Module angezeigt, die in dieses Modul importiert werden sollen |
| Anbieter: (MyService, (supply:…)) | Es enthält die Liste der Abhängigkeitsinjektionsanbieter, die für den Inhalt des Moduls sichtbar sind |
| entryComponents: (SomeComponent, OtherComponent) | Es wird eine Liste der Komponenten bereitgestellt, auf die in einer erreichbaren Vorlage nicht verwiesen wird. |
Es sind andere Direktiven und Komponentenänderungserkennungs- und Lebenszyklus-Hooks verfügbar, die implementiert werden können, wenn Klassenmethoden angegeben sind:
| Richtlinien | Beschreibung |
| Konstruktor (myService: MyService, …) (…) | Es wird zum Einfügen von Abhängigkeiten verwendet. |
| ngOnChanges (changeRecord) (…) | Sie wird nach jeder Änderung der Eingabeeigenschaften und vor der Verarbeitung von Inhalten oder untergeordneten Ansichten aufgerufen |
| ngOnInit () (…) | Sie wird nach dem Konstruktor aufgerufen und initialisiert die Eigenschaften |
| ngDoCheck () (…) | Es wird jedes Mal aufgerufen, wenn Eigenschaften von Komponenten oder Anweisungen überprüft werden. Es dient zur Erweiterung für die Durchführung einer Zollkontrolle. |
| ngAfterContentInit () (…) | Es wird nach ngOninit aufgerufen, wenn der Inhalt der Komponenten oder Anweisungen initialisiert wurde. |
| ngAfterContentChecked () (…) | Es wird nach jeder Prüfung des Inhalts der Komponente oder Direktive aufgerufen. |
| ngAfterViewInit () (…) | Es wird nach ngaftercontentint aufgerufen, wenn die Direktive für Komponentenansichten und untergeordnete Ansichten initialisiert wurde. |
| ngAfterViewChecked () (…) | Es wird nach jeder Überprüfung von Komponentenansichten und untergeordneten Ansichten aufgerufen, in denen sich die Direktive bereits befindet. |
| ngOnDestroy () (…) | Es wird einmal aufgerufen, bevor die Instanz zerstört wird. |
Kostenlose Tipps und Tricks zur Verwendung von Angular 2-Spickzettel-Befehlen: -
- In Angular2-Spickzettel: platformBrowserDynamic (). BootstrapModule (AppModule); Hilft beim Bootstrapping der Anwendung mit der Root-Komponente aus der angegebenen.
- In Angular2 listet bootstrap: (MyAppComponent) die Komponenten auf, die gebootet werden sollen, wenn dieses Modul gebootet wird.
- Diese Anweisung ist in angualr2 integriert, um einen Teil des Dom-Baums auf der Grundlage des Ausdrucks zu entfernen oder neu zu erstellen.
- Es wandelt das Listenelement und seinen Inhalt in eine Vorlage um und wird verwendet, um eine Ansicht für jedes Element in der Liste zu erstellen.
- „ConditionExpres sion“> Diese Direktive wird verwendet, um die Vorlagen basierend auf dem Ausdruckswert oder in einfachen Worten wie switch case in oops auszuwählen.
- In diesen Anweisungen können Sie einem HTML-Element mit CSS Stile zuweisen, auf die direkt zugegriffen werden kann.
- Diese Anweisung bindet die CSS-Klassen für das Element an vertrauenswürdige Kartenwerte.
- Diese Direktive bietet die bidirektionale Bindung, Analyse und Validierung für Formularsteuerelemente.
- Selektor: '.cool-button: not (a)' Dies ist eine Direktivenkonfiguration, die den CSS-Selektor angibt, der diese Direktive in der Vorlage identifiziert. Eltern-Kind-Selektor wird nicht unterstützt.
- Anbieter: (MyService, (provision:…)) Hier finden Sie eine Liste der Anbieter von Abhängigkeitsinjektionen für Direktiven und Kinder.
- (supply: MyService, useClass: MyMockService) setzt oder überschreibt den Anbieter, damit der Dienst der Klasse entspricht.
- (supply: My Value, use Value: 4) Setzt oder überschreibt den Provider-Wert auf 4
Fazit - Angular 2 Spickzettel
Angular 2-Spickzettel enthält viele Funktionen und verschiedene Anweisungen. Für die Entwicklung stehen Module zur Verfügung, mit denen Benutzer und Entwickler die Anwendung interaktiver gestalten können, um Probleme und Funktionen zu verfolgen. Es ist umfangreich und für andere Anwendungen wiederverwendbar. Angular2 verwendet das Typoskript, das sich vollständig von der früheren AngularJS-Version unterscheidet.
Der eckige 2 Spickzettel ist einfacher zu lernen, da seine Lernkurve sowohl für Anfänger als auch für Studenten einfach und direkt ist. Die Kenntnis von JavaScript wäre von Vorteil, wenn Sie Angular für die Entwicklung verwenden. Es ist immer gut, sich neu zu qualifizieren.
Empfohlene Artikel
Dies ist eine Anleitung zum Angular 2-Spickzettel. Hier haben wir den Inhalt und den Befehl sowie die kostenlosen Tipps und Tricks zum Angular 2-Spickzettel besprochen. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren -
- Der Spickzettel von UNIX
- Spickzettel HTML
- Spickzettel CCNA
- Spickzettel JQuery