AngularAls derzeit beliebtestes Front-End-Framework wird es von Front-End-Entwicklern allgemein begrüßt. Unabhängig davon, ob Sie neu bei Angular sind oder ein Entwickler mit Erfahrung in der Angular-Entwicklung sind, ist das Verstehen der 12 klassischen Interviewfragen in diesem Artikel eine hervorragende Möglichkeit, das Wissen und die Konzepte von Angular 2 tiefgreifend zu verstehen und zu erlernen.
In diesem Artikel werden wir mit vielen wichtigen Konzepten von Angular 2 vertraut gemacht, mit erweitertem Lesematerial und Selbstprüfungstests, damit jeder sein Verständnis von Angular bewerten kann.
Empfohlene verwandte Tutorials: „Angular Tutorial“
Angular 2-Komponenten/-Anweisungen verfügen über Lebenszyklusereignisse, die von @angular/core verwaltet werden. @angular/core erstellt die Komponente, rendert sie und erstellt und rendert ihre Nachkommen. Wenn sich die Datenbindungseigenschaften von @angular/core ändern, ändert sich auch die Handhabung, wodurch die Vorlage zerstört wird, bevor sie aus dem DOM entfernt wird. Angular bietet eine Reihe von Lebenszyklus-Hooks (spezielle Ereignisse), die in den Lebenszyklus verzweigt werden können und bei Bedarf Vorgänge 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/Anweisungen, während einige Ereignisse nur für Komponenten gelten.
Komponentenspezifische Hooks:
Angular 2 ist eine Plattform, nicht nur eine Sprache
Bessere Geschwindigkeit und Leistung
Einfachere Abhängigkeitsinjektion
Modular, plattformübergreifend.
Hervorgehoben Die Vorteile von ES6 und Typoskript.
Flexibles Routing mit Lazy Loading
Einfacher zu erlernen
Routing ist der Mechanismus, der es Benutzern ermöglicht, zwischen Ansichten/Komponenten zu navigieren. Angular 2 vereinfacht das Routing und bietet Flexibilität beim Konfigurieren und Definieren auf Modulebene (Lazy Loading).
Eine Angular-Anwendung verfügt über eine einzelne Instanz des Router-Dienstes, und immer wenn sich die URL ändert, wird die entsprechende Route mit dem Routenkonfigurationsarray abgeglichen. Bei einer erfolgreichen Übereinstimmung wird die Umleitung angewendet. Anschließend erstellt der Router einen Baum aus ActivatedRoute-Objekten, einschließlich des aktuellen Status des Routers. Vor der Umleitung prüft der Router, ob der neue Status zulässig ist, indem er den Guard (CanActivate) ausführt. Route Guard ist einfach eine Schnittstellenmethode, die Router ausführen, um die Routenautorisierung zu überprüfen. Sobald der Schutz ausgeführt wird, analysiert er die Routing-Daten und aktiviert den Router-Status, indem er die erforderlichen Komponenten in
Erweiterte Lektüre:
https://www.codeproject.com/Articles/1164813/Angular-Routing
https://vsavkin.com/angular-2-router-d9e30599f9ea# .kt4z1v957
Angular 2 verfügt im Gegensatz zu Angular 1 nicht über einen bidirektionalen Digest-Zyklus. In Angular 2 werden alle Änderungen, die in einer Komponente auftreten, immer von der aktuellen Komponente an alle ihre untergeordneten Komponenten weitergegeben. Wenn Änderungen an einer untergeordneten Komponente in der Hierarchie ihrer übergeordneten Komponente widergespiegelt werden müssen, können wir mithilfe der Ereignis-Emitter-API Ereignisse ausgeben.
Kurz gesagt, EventEmitter ist eine Klasse, die im @angular/core-Modul definiert ist und von Komponenten und Anweisungen zum Ausgeben benutzerdefinierter Ereignisse verwendet wird.
@output() somethingChanged = new EventEmitter();
Wir verwenden die Methode SomethingChanged.emit(value), um das Ereignis auszugeben. Dies wird normalerweise in Settern verwendet, wenn ein Wert in der Klasse geändert wurde.
Sie können die Abonnementmethode verwenden, um ein Ereignisemissionsabonnement über jede Komponente des Moduls zu implementieren.
myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));
Erweiterte Lektüre:
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
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, ob vordefinierte Codierungsrichtlinien eingehalten werden. Codelyzer führt nur statische Codeanalysen für Angular- und TypeScript-Projekte durch.
Codelyzer läuft auf Tslint und seine Codierungskonventionen werden normalerweise in der Datei tslint.json definiert. Codelyzer kann direkt über Angularcli oder npm ausgeführt werden. Editoren wie Visual Studio Code und Atom unterstützen auch Codelyzer, was nur eine Grundeinrichtung erfordert.
Um Codelyzer in Visual Studio Code einzurichten, können wir den Pfad zu den Tslint-Regeln unter Datei - > Benutzereinstellungen hinzufügen.
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib"
}Code wird von cli:ng lint ausgeführt.
Code von npm ausführen: npm run lint
Erweiterte Lektüre:
https://github.com/mgechev/codelyzer
https://www.youtube.com/ Anschauen? v=bci-Z6nURgE
Die meisten Unternehmensanwendungen enthalten eine Vielzahl von Modulen für spezifische Geschäftsfälle. Das Bündeln und Laden des gesamten Anwendungscodes verursacht beim ersten Aufruf einen enormen Leistungsaufwand. Durch verzögertes Laden können wir nur die Module laden, mit denen der Benutzer interagiert, während der Rest bei Bedarf zur Laufzeit geladen wird.
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 Geschäftsfall der Anwendung in verschiedene Untermodule (NgModules) unterteilt werden.
Plunkr-Beispiel mit aktiviertem Lazy Loading:
Wir müssen keine Lazy Loading-Module im Root-Modul importieren oder deklarieren.
Routing zum Top-Level-Routing (app.routing.ts) hinzufügen und LoadChildren festlegen. LoadChildren erhält den absoluten Pfad aus dem Stammordner. RouterModule.forRoot() ruft das Routen-Array ab und konfiguriert den Router.
Modulspezifische Routen in Untermodule importieren.
Geben Sie in der Submodulroute den Pfad als leere Zeichenfolge „“ an, bei der es sich um einen leeren Pfad handelt. RouterModule.forChild verwendet erneut das Routenarray, um den Router für die Submodulkomponente zu laden und zu konfigurieren.
Dann exportieren Sie die const-Route: ModuleWithProviders = RouterModule.forChild(routes);
Wie jede andere Client- oder Webanwendung sollten auch Angular 2-Anwendungen einige grundlegende Richtlinien befolgen, um Sicherheitsrisiken zu mindern. Einige davon sind:
Vermeiden Sie die Verwendung/Einfügung dynamischer HTML-Inhalte für Ihre Komponenten.
Wenn Sie externes HTML verwenden, also von irgendwo außerhalb der Datenbank oder Anwendung, müssen Sie es bereinigen.
Fügen Sie keine externen URLs in die Anwendung ein, es sei denn, diese ist vertrauenswürdig. Vermeiden Sie die URL-Umleitung, es sei denn, sie ist vertrauenswürdig.
Erwägen Sie die Verwendung der AOT-Kompilierung oder der Offline-Kompilierung.
Verhindern Sie XSRF-Angriffe, indem Sie APIs einschränken und Apps auswählen, die bekannte oder sichere Umgebungen/Browser verwenden.
Erweiterte Lektüre:https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices
Die Optimierung hängt von der Art und Größe der Anwendung und vielen anderen Faktoren ab. Aber im Allgemeinen würde ich bei der Optimierung von Angular 2-Anwendungen die folgenden Punkte berücksichtigen:
AOT-Kompilierung in Betracht ziehen.
Stellen Sie sicher, dass die Anwendung gebündelt, hässlich gemacht und geschüttelt wurde.
Stellen Sie sicher, dass Ihre Anwendung keine unnötigen Importanweisungen enthält.
Stellen Sie sicher, dass nicht verwendete Bibliotheken von Drittanbietern aus der Anwendung entfernt wurden.
Alle Abhängigkeiten und Dev-Abhängigkeiten sind klar getrennt.
Wenn die App größer ist, würde ich Lazy Loading anstelle einer vollständig gebündelten App in Betracht ziehen.
Erweiterte Lektüre:
https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.pw4m2srmr
https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/
In den meisten Fällen wird die Drittanbieterbibliothek mit ihrer .d.ts-Datei zur Typdefinition geliefert. In manchen Fällen müssen wir einen vorhandenen Typ erweitern, indem wir ihn mit einigen weiteren Eigenschaften versehen, oder wenn wir andere Typen definieren müssen, um TypeScript-Warnungen zu vermeiden.
Wenn wir die Typdefinition einer externen Bibliothek erweitern müssen, empfiehlt es sich, statt Änderungen an node_modules oder dem vorhandenen Typings-Ordner vorzunehmen, einen neuen Ordner mit dem Namen „Custom Types“ zu erstellen, um alle benutzerdefinierten Typen zu speichern.
Um den Typ der Anwendungsobjekte (JavaScript/Typescript) zu definieren, sollten wir Schnittstellen und Entitätsklassen im Modellordner des entsprechenden Moduls der Anwendung definieren.
Für diese Fälle können wir den Typ definieren oder erweitern, indem wir unsere eigene „.d.ts“-Datei erstellen.
Erweiterte Lektüre:
https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML
https://typescript.codeplex.com/wikipage?title= Schreiben%20Definition%20%28.d.ts%29%20Files
http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file
Shadow DOM ist Teil der HTML-Spezifikation, die es Entwicklern ermöglicht, ihr eigenes HTML-Markup, CSS-Stile und JavaScript zu kapseln. Shadow DOM ermöglicht es Entwicklern zusammen mit anderen Technologien, ihre eigenen First-Level-Tags, Webkomponenten und APIs wie das
Da das Schatten-DOM statischer Natur ist und für Entwickler nicht zugänglich ist, ist es ein guter Kandidat. Da das DOM zwischengespeichert wird, wird es im Browser schneller gerendert und bietet eine bessere Leistung. Darüber hinaus kann das Schatten-DOM relativ gut verwaltet werden, während Änderungen an Angular-2-Anwendungen erkannt werden können und Neuzeichnungen von Ansichten effizient verwaltet werden können.
Erweiterte Lektüre:
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
https://glazkov.com/2011/01/ 14/was-zum-Kind-ist-shadow-dom/
https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966
AOT-Kompilierung steht für Ahead Of Time-Kompilierung, bei der der Angular-Compiler beim Erstellen Angular-Komponenten und -Vorlagen in natives JavaScript und HTML kompiliert. Der kompilierte HTML- und JavaScript-Code wird auf dem Webserver bereitgestellt, sodass der Browser Kompilierungs- und Renderzeit sparen kann.
Vorteile:
Schnellere Downloads: Da die Anwendung bereits kompiliert ist, müssen viele Angular-Compiler-bezogene Bibliotheken nicht mehr gebündelt werden, und das Anwendungspaket wird kleiner, sodass die Anwendung schneller heruntergeladen wird.
Weniger HTTP-Anfragen: Wenn die Anwendung nicht gebündelt ist, um Lazy Loading zu unterstützen (oder aus irgendeinem Grund), gibt es für jedes zugehörige HTML und CSS eine separate Serveranforderung. Vorkompilierte Anwendungen richten jedoch alle Vorlagen und Stile an Komponenten aus, sodass die Anzahl der HTTP-Anfragen an den Server geringer ist.
Schnelleres Rendern: Wenn die App nicht AOT-kompiliert ist, erfolgt der Kompilierungsvorgang im Browser, wenn die App vollständig geladen ist. Dazu muss darauf gewartet werden, dass alle erforderlichen Komponenten heruntergeladen wurden, und dann darauf, dass sich der Compiler die Zeit nimmt, die Anwendung zu kompilieren. Mithilfe der AOT-Kompilierung kann eine Optimierung erreicht werden.
Fehlererkennung zur Build-Zeit: Dank der Vorkompilierung können viele Fehler zur Kompilierungszeit erkannt werden, was für eine bessere Stabilität der Anwendung sorgt.
Nachteile:
Funktioniert nur mit HTML und CSS, andere Dateitypen erfordern vorherige Erstellungsschritte
Kein Überwachungsmodus, muss manuell durchgeführt werden (bin/ngc-watch.js) und alle Dateien kompilieren
Die AOT-Version der Bootstrap-Dateien muss beibehalten werden (nicht erforderlich, wenn Tools wie CLI verwendet werden)
Vor der Kompilierung sind Bereinigungsschritte erforderlich
Erweiterte Lektüre:https://angular. io/docs /ts/latest/cookbook/aot-compiler.HTML
Von Stack Overflow ist der Unterschied:
Ein Promise behandelt ein einzelnes Ereignis, wenn ein asynchroner Vorgang abgeschlossen wird oder fehlschlägt.
Observable ähnelt einem Stream (in vielen Sprachen) und ermöglicht die Übergabe von null oder mehr Ereignissen, wenn für jedes Ereignis eine Rückruffunktion aufgerufen wird. Observable ist im Allgemeinen beliebter als Promise, 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 jeweils die gleiche API verwenden. Observable ist stornierbar, was auch Vorteile gegenüber Promise hat. Abonnenten des Observable können sich abmelden, wenn das Ergebnis der HTTP-Anfrage des Servers oder eines anderen asynchronen Vorgangs nicht mehr benötigt wird, und das Promise ruft schließlich einen Erfolgs- oder Fehlerrückruf auf, auch wenn Sie die Benachrichtigung oder das bereitgestellte Ergebnis nicht benötigen . Observable bietet Array-ähnliche Operatoren wie Map, forEach und Reduce sowie leistungsstarke Operatoren wie Retry() oder Replay(), die sehr bequem zu verwenden sind.
Promises vs Observables
1. Einen einzelnen Wert zurückgeben
2. Stornierbar
1, mehrere Werte können verwendet werden
2, Abbrechbar
3. In ES 2016 vorgeschlagene Funktionen
5. Array-Mitglieder können sich je nach Zeit ändern
Derzeit ist die offizielle Version von Angular 2 veröffentlicht und einige Produkte unterstützen auch die offizielle Version von Angular 2. Unter ihnen reagierte Wijmo am schnellsten, nur wenige Stunden nach der Veröffentlichung von Angular2, veröffentlichte Wijmo die offizielle Version von Wijmo, die Angular2 unterstützt. Wijmo stellt Angular2-Komponenten für jedes UI-Steuerelement bereit. Alle Angular2-Komponenten bieten vollständig deklaratives Markup. Originallink: https://www.codeproject.com/Articles/1169073/Angular-Interview-QuestionsSelbstprüfungsquiz
Akzeptiert Fragen im JSON-Format, Sie können das Format von vordefinieren Beim Senden von JSON vom Server muss die Angular2-Testanwendung die Antwortschnittstelle auf dem Client präsentieren
Demonstrationseffekt: http://ng2-quiz.anuraggandhi.com /
Hier antworten (Implementierungscode): https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !
Das obige ist der detaillierte Inhalt von12 klassische Interviewfragen zu Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
httpstatus500-Fehlerlösung
So starten Sie den Dienst im Swoole-Framework neu
So stellen Sie vollständig gelöschte Dateien auf dem Computer wieder her
Was ist das Prinzip und der Mechanismus von Dubbo?
So entfernen Sie die TikTok-Wasserzeichen anderer Personen aus TikTok-Videos
So stellen Sie eine Verbindung zur Datenbank in VB her
okx-Austausch
WLAN zeigt an, dass keine IP zugewiesen ist
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
