Eine kurze Diskussion über 12 klassische Probleme in Angular

1. Erklären Sie bitte, was die Lebenszyklus-Hooks der Angular 2-Anwendung sind.

Angular 2-Komponenten/-Direktiven haben Lebenszyklusereignisse, die von @angular/core verwaltet werden. @angular/core erstellt die Komponente, rendert sie, erstellt und rendert ihre Nachkommen. Wenn sich eine datengebundene Eigenschaft von @angular/core ändert, wird der Handler geändert und zerstört, bevor seine Vorlage aus dem DOM entfernt wird. Angular bietet eine Reihe von Lebenszyklus-Hooks (spezielle Ereignisse), die in den Lebenszyklus eingebunden werden können und bei Bedarf Aktionen ausführen. Der Konstruktor wird vor allen Lebenszyklusereignissen ausgeführt. Jede Schnittstelle verfügt über eine Hook-Methode mit dem Präfix „ng“. Beispielsweise muss die OnInit-Methode der ngOnint-Schnittstelle in der Komponente implementiert werden.

Einige Ereignisse gelten für Komponenten/Direktiven, während einige Ereignisse nur für Komponenten gelten.

• ngOnChanges: Reagiert, wenn Angular eine datengebundene Eigenschaft festlegt, die die aktuellen und vorherigen Objektwerte empfängt.
• ngOnInit: Initialisiert die Komponente/Direktive nach dem ersten ngOnChange-Trigger. Dies ist die am häufigsten verwendete Methode, um Daten für eine Vorlage von einem Backend-Dienst abzurufen.
• ngDoCheck: Erkennt und führt aus, wenn sich der Angular-Kontext ändert. Dies wird jedes Mal aufgerufen, wenn die Änderungserkennung ausgeführt wird.
• ngOnDestroy: Bereinigt, bevor Angular die Direktive/Komponente zerstört. Kündigen Sie Observables und trennen Sie sich von Event-Handlern, um Speicherlecks zu vermeiden.

Komponentenspezifische Hooks:

• ngAfterContentInit: Komponenteninhalt wurde initialisiert
• ngAfterContentChecked: Nachdem Angular den externen Inhalt der Bindungen überprüft hat, die in seine Ansicht projiziert werden.
• ngAfterViewInit: Nachdem Angular die Ansicht der Komponente erstellt hat.
• ngAfterViewChecked: Nachdem Angular die Bindungen der Ansicht der Komponente überprüft hat.

2. Welche Vorteile bietet die Verwendung von Angular 2 gegenüber Angular 1?

1. Angular 2 ist eine Plattform, nicht nur eine Sprache

2. Bessere Geschwindigkeit und Leistung

3. Einfachere Abhängigkeitsinjektion

4. Modularität und plattformübergreifend

5. Es bietet die Vorteile von ES6 und Typescript.

6. Flexibles Routing mit verzögerter Ladefunktion

7. Leichter zu lernen

3. Wie funktioniert das Routing in Angular 2?

Routing ist der Mechanismus, der es Benutzern ermöglicht, zwischen Ansichten/Komponenten zu navigieren. Angular 2 vereinfacht das Routing und bietet Flexibilität bei der Konfiguration und Definition auf Modulebene (Lazy Loading).

Die Angular-Anwendung verfügt über eine einzelne Instanz des Router-Dienstes und immer wenn sich die URL ändert, wird die entsprechende Route mit dem Routenkonfigurations-Array abgeglichen. Bei einer erfolgreichen Übereinstimmung wird die Umleitung angewendet. An diesem Punkt erstellt der Router einen Baum aus ActivatedRoute-Objekten, einschließlich des aktuellen Status des Routers. Vor der Umleitung prüft der Router durch Ausführen eines Schutzes (CanActivate), ob der neue Status zulässig ist. Route Guard ist lediglich eine Schnittstellenmethode, die der Router ausführt, um die Routenautorisierung zu überprüfen. Sobald der Guard ausgeführt wird, analysiert er die Routing-Daten und aktiviert den Router-Status, indem er die erforderlichen Komponenten in <router-outlet></router-outlet> instanziiert.

Weiterführende Literatur:

https://www.codeproject.com/Articles/1164813/Angular-Routing

https://vsavkin.com/angular-2-router-d9e30599f9ea

4. Was ist ein Ereignisemitter? Wie funktioniert es in Angular 2?

Angular 2 hat im Gegensatz zu Angular 1 keinen bidirektionalen Digest-Zyklus. In Angular 2 werden alle Änderungen, die in einer Komponente stattfinden, immer von der aktuellen Komponente an alle ihre untergeordneten Komponenten weitergegeben. Wenn Änderungen an einer untergeordneten Komponente in der Hierarchie der übergeordneten Komponenten nach oben übernommen werden müssen, können wir mithilfe der Ereignisemitter-API Ereignisse ausgeben.

Kurz gesagt ist EventEmitter eine im Modul @angular/core definierte Klasse und wird von Komponenten und Anweisungen verwendet, um benutzerdefinierte Ereignisse auszugeben.

@output() etwasGeändert = neuer EventEmitter();

Wir verwenden die Methode somethingChanged.emit(value), um das Ereignis auszugeben. Dies wird normalerweise in Settern verwendet, wenn der Wert in der Klasse geändert wird.

Mit der Abonnementmethode können Sie das Ereignisabonnement über jede Komponente des Moduls implementieren.

meinObj.somethingChanged.subscribe(val) => this.meineLocalMethod(val));

Weiterführende Literatur:

http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML

5. Wie verwende ich Codelyzer in einer Angular 2-Anwendung?

Alle Unternehmensanwendungen folgen einer Reihe von Codierungskonventionen und Richtlinien, um den Code besser zu pflegen. Codelyzer ist ein Open-Source-Tool zum Ausführen und Überprüfen der Einhaltung vordefinierter Codierungsrichtlinien. Codelyzer führt nur statische Codeanalysen für Angular- und TypeScript-Projekte durch.

Codelyzer läuft auf tslint und seine Codierungskonventionen werden normalerweise in einer tslint.json-Datei definiert. Codelyzer kann direkt über Angularcli oder über npm ausgeführt werden. Editoren wie Visual Studio Code und Atom unterstützen auch Codelyzer, der durch ein grundlegendes Setup aktiviert werden kann.

Um Codelyzer in Visual Studio Code einzurichten, können wir den Pfad zu den Tslint-Regeln unter Datei -> Optionen -> Benutzereinstellungen hinzufügen.

{

    "tslint.rulesDirectory": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}

Führen Sie den Code vom Client aus: ng lint.

Führen Sie den Code von npm aus: npm run lint

Weiterführende Literatur:

https://github.com/mgechev/codelyzer

https://www.youtube.com/watch?v=bci-Z6nURgE

6. Was ist Lazy Loading? Wie aktiviere ich Lazy Loading in Angular 2?

Die meisten Unternehmensanwendungen bestehen aus einer Vielzahl von Modulen, die für bestimmte Geschäftsfälle entwickelt wurden. Das Bündeln und vollständige Laden des gesamten Anwendungscodes verursacht beim ersten Aufruf einen enormen Leistungsmehraufwand. Durch Lazy Loading können wir nur die Module laden, mit denen der Benutzer interagiert, während die restlichen Module bei Bedarf zur Laufzeit geladen werden.

Lazy Loading beschleunigt den anfänglichen Ladevorgang einer Anwendung, indem der Code in mehrere Pakete aufgeteilt und bei Bedarf geladen wird.

Jede Angular-Anwendung muss ein Hauptmodul namens AppModule haben. Der Code sollte basierend auf dem Anwendungsfall in verschiedene Untermodule (NgModules) aufgeteilt werden.

Plunkr-Beispiel mit aktiviertem Lazy Loading:

1. Wir müssen keine Lazy-Loading-Module in das Stammmodul importieren oder deklarieren.

2. Fügen Sie die Route zum Routing der obersten Ebene (app.routing.ts) hinzu und legen Sie loadChildren fest. loadChildren ruft den absoluten Pfad vom Stammordner ab. RouterModule.forRoot() nimmt das Routen-Array und konfiguriert den Router.

3. Importieren Sie modulspezifische Routen in Untermodule.

4. Geben Sie im Untermodul-Routing den Pfad als leere Zeichenfolge "" an, d. h. als leeren Pfad. RouterModule.forChild verwendet erneut das Routen-Array, um den Router für die untergeordnete Modulkomponente zu laden und zu konfigurieren.

5. Exportieren Sie dann const routes: ModuleWithProviders = RouterModule.forChild(routes);

7. Welche Sicherheitsbedrohungen sollten wir bei Angular 2-Anwendungen beachten?

Wie jede andere clientseitige oder Webanwendung sollten auch Angular 2-Anwendungen einige grundlegende Richtlinien befolgen, um Sicherheitsrisiken zu mindern. Einige davon sind:

1. Vermeiden Sie die Verwendung/Einfügung dynamischer HTML-Inhalte in Ihren Komponenten.

2. Wenn Sie externes HTML verwenden, das also aus einer Datenbank oder von irgendwo außerhalb Ihrer Anwendung stammt, müssen Sie es bereinigen.

3. Fügen Sie keine externen URLs in die Anwendung ein, es sei denn, sie sind vertrauenswürdig. Vermeiden Sie URL-Weiterleitungen, sofern sie nicht vertrauenswürdig sind.

4. Erwägen Sie die Verwendung der AOT-Kompilierung oder Offline-Kompilierung.

5. Verhindern Sie XSRF-Angriffe, indem Sie APIs einschränken und Apps auswählen, die bekannte oder sichere Umgebungen/Browser verwenden.

Weiterführende Literatur: https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

8. Wie kann die Angular 2-Anwendung für eine bessere Leistung optimiert werden?

Die Optimierung hängt von der Art und Größe Ihrer Anwendung und vielen anderen Faktoren ab. Aber im Allgemeinen sind hier einige Dinge, die ich bei der Optimierung einer Angular 2-Anwendung berücksichtige:

1. Erwägen Sie die AOT-Kompilierung.

2. Stellen Sie sicher, dass die Anwendung gebündelt, entstellt und entstrukturiert ist.

3. Stellen Sie sicher, dass Ihre Anwendung keine unnötigen Importanweisungen enthält.

4. Stellen Sie sicher, dass nicht verwendete Bibliotheken von Drittanbietern aus der Anwendung entfernt wurden.

5. Alle Abhängigkeiten und Entwicklungsabhängigkeiten sind klar getrennt.

6. Wenn die App größer ist, würde ich Lazy Loading in Betracht ziehen, anstatt die App vollständig zu bündeln.

Weiterführende Literatur:

https://medium.com/@areai51/die-4-stufen-der-leistungsoptimierung-für-ihre-angular2-app-922ce5c1b294

https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/

9. Wie implementiere ich benutzerdefinierte Typen ohne Editorwarnungen?

In den meisten Fällen werden Bibliotheken von Drittanbietern mit ihren .d.ts-Dateien für Typdefinitionen geliefert. In einigen Fällen müssen wir einen vorhandenen Typ erweitern, indem wir ihm weitere Eigenschaften zuweisen, oder wir müssen zusätzliche Typen definieren, um TypeScript-Warnungen zu vermeiden.

Wenn wir die Typdefinition einer externen Bibliothek erweitern müssen, empfiehlt es sich, den Ordner „node_modules“ oder „existierende Typisierungsordner“ nicht zu ändern, sondern einen neuen Ordner mit dem Namen „custom types“ zu erstellen, um alle benutzerdefinierten Typen zu speichern.

Um die Typen unserer Anwendungsobjekte (JavaScript/Typescript) zu definieren, sollten wir Schnittstellen und Entitätsklassen im Ordner „Modelle“ des entsprechenden Moduls unserer Anwendung definieren.

Für diese Fälle können wir Typen definieren oder erweitern, indem wir unsere eigenen „.d.ts“-Dateien erstellen.

Weiterführende Literatur:

https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML

https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file

10. Was ist Shadow DOM? Wie trägt es zu einer besseren Leistung von Angular 2 bei?

Shadow DOM ist Teil der HTML-Spezifikation, die es Entwicklern ermöglicht, ihre eigenen HTML-Tags, CSS-Stile und JavaScript zu kapseln. Shadow DOM ermöglicht Entwicklern zusammen mit anderen Technologien, ihre eigenen erstklassigen Tags, Webkomponenten und APIs wie das <audio>-Tag zu erstellen. Zusammengefasst werden diese neuen Tags und APIs als Webkomponenten bezeichnet. Shadow DOM bietet eine bessere Trennung der Belange, indem es weniger Konflikte zwischen Stilen und Skripten mit anderen HTML-DOM-Elementen verursacht.

Da der Shadow-DOM von Natur aus statisch und für Entwickler nicht zugänglich ist, ist er ein guter Kandidat. Da der DOM zwischengespeichert wird, erfolgt die Darstellung im Browser schneller und die Leistung ist besser. Darüber hinaus kann der Schatten-DOM relativ gut verwaltet werden, während Änderungen an der Angular 2-Anwendung erkannt und das Neuzeichnen der Ansicht effizient verwaltet werden.

Weiterführende Literatur:

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

https://glazkov.com/2011/01/14/was-zum-teufel-ist-shadow-dom/

https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966

11. Was ist AOT-Kompilierung? Was sind die Vor- und Nachteile?

AOT-Kompilierung steht für Ahead Of Time-Kompilierung, bei der der Angular-Compiler Angular-Komponenten und -Vorlagen zur Build-Zeit in natives JavaScript und HTML kompiliert. Das kompilierte HTML und JavaScript werden dann auf dem Webserver bereitgestellt, sodass der Browser Kompilierungs- und Renderzeit sparen kann.

Vorteil:

1. Schnellere Downloads: Da die Anwendung bereits kompiliert ist, müssen viele mit dem Angular-Compiler verbundene Bibliotheken nicht mehr gebündelt werden und das Anwendungspaket wird kleiner, sodass die Anwendung schneller heruntergeladen werden kann.

2. Weniger HTTP-Anfragen: Wenn die Anwendung nicht für die Unterstützung von Lazy Loading gebündelt ist (oder aus irgendeinem anderen Grund), wird für jedes zugehörige HTML und CSS eine separate Serveranforderung gegeben. Aber eine vorkompilierte Anwendung richtet alle Vorlagen und Stile an den Komponenten aus, sodass die Anzahl der HTTP-Anfragen an den Server geringer ist.

3. Schnelleres Rendern: Wenn die Anwendung nicht AOT-kompiliert ist, erfolgt der Kompilierungsprozess im Browser, wenn die Anwendung vollständig geladen ist. Dazu müssen Sie warten, bis alle erforderlichen Komponenten heruntergeladen wurden, und dann, bis der Compiler die Zeit zum Kompilieren der Anwendung benötigt. Durch die AOT-Kompilierung kann eine Optimierung erreicht werden. existieren

4. Erkennen von Fehlern während der Build-Zeit: Durch die Vorkompilierung können viele Kompilierungsfehler erkannt werden, was für eine bessere Stabilität der Anwendung sorgen kann.

Mangel:

1. Gilt nur für HTML und CSS, andere Dateitypen erfordern die vorherigen Build-Schritte

2. Es gibt keinen Überwachungsmodus, Sie müssen ihn manuell erstellen (bin/ngc-watch.js) und alle Dateien kompilieren

3. Die AOT-Version der Bootstrap-Datei muss beibehalten werden (nicht erforderlich bei Verwendung von Tools wie CLI).

4. Vor dem Kompilieren ist ein Bereinigungsschritt erforderlich

Weiterführende Literatur: https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

12. Was ist der wesentliche Unterschied zwischen Observables und Promises?

Von Stack Overflow gibt es hier eine Unterscheidung:

Ein Promise behandelt ein einzelnes Ereignis, wenn ein asynchroner Vorgang abgeschlossen wird oder fehlschlägt.

Ein Observable ähnelt einem Stream (in vielen Sprachen) und ermöglicht die Übermittlung von null oder mehreren Ereignissen, wobei für jedes Ereignis eine Rückruffunktion aufgerufen wird. Observable wird normalerweise Promise vorgezogen, da es nicht nur Promise-Funktionen, sondern auch andere Funktionen bietet. Mit Observable können Sie 0, 1 oder mehr Ereignisse verarbeiten. Sie können in beiden Fällen die gleiche API verwenden. Observable ist stornierbar, was ebenfalls ein Vorteil gegenüber Promise ist. Wenn die Ergebnisse der HTTP-Anforderung an den Server oder einer anderen asynchronen Operation nicht mehr benötigt werden, kann der Abonnent des Observable das Abonnement kündigen, und das Promise ruft schließlich den Erfolgs- oder Fehler-Callback auf, auch wenn Sie die Benachrichtigung oder das bereitgestellte Ergebnis nicht benötigen. Observable bietet arrayähnliche Operatoren wie map, forEach, reduce sowie leistungsstarke Operatoren wie retry() oder replay(), die recht bequem zu verwenden sind.

Versprechen vs. Observables

Versprechen:

1. Einen einzelnen Wert zurückgeben

2. Keine Stornierung

Observablen:

1. Es können mehrere Werte verwendet werden

2. Stornierbar

3. Unterstützt Map-, Filter-, Reduce- und ähnliche Operatoren

4. In ES 2016 vorgeschlagene Funktionen

5. Verwenden Sie reaktive Erweiterungen (RxJS)

6. Array-Mitglieder können entsprechend den zeitlichen Änderungen asynchron abgerufen werden

Die offizielle Version von Angular 2 wurde veröffentlicht und einige Produkte unterstützen bereits die offizielle Version von Angular 2. Wijmo reagierte am schnellsten und veröffentlichte die offizielle Version von Wijmo, die Angular2 unterstützt, wenige Stunden nach der Veröffentlichung von Angular2. Wijmo bietet Angular2-Komponenten für jedes UI-Steuerelement. Alle Angular2-Komponenten bieten vollständig deklaratives Markup.

Originallink: https://www.codeproject.com/Articles/1169073/Angular-Interview-Questions

Selbsttest-Quiz

Nachdem Sie nun etwas über Angular gelernt haben, möchten Sie auch wissen, wie gut Sie es beherrschen? Interessierte Studierende können versuchen, eine „Frage-Antwort-System-Anwendung“ zu erstellen. Die spezifischen Anforderungen sind:

• Es gibt drei Komponenten: Testansicht, Ergebnisse überprüfen und Ergebnisse anzeigen
• Akzeptiert Fragen im JSON-Format. Sie können JSON vom Server in einem vordefinierten Format senden. Die Angular2-Testanwendung muss die Antwortschnittstelle auf der Clientseite präsentieren.

Die Schnittstelle des fertigen Produkts sieht wie folgt aus:

Demo-Effekt: http://ng2-quiz.anuraggandhi.com/

Die Antwort finden Sie hier (Implementierungscode): https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

Oben finden Sie den ausführlichen Inhalt der kurzen Diskussion der 12 klassischen Probleme von Angular. Weitere Informationen zu den 12 klassischen Problemen von Angular finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!