18 häufige Angular-Interviewfragen (mit Antwortanalyse)

Dieser Artikel fasst 18 häufige eckigeInterviewfragen zusammen (mit Antwortanalyse), um Ihnen dabei zu helfen, Grundwissen zu sortieren und Ihren Winkelwissensvorrat zu erweitern. Es lohnt sich, sie zu sammeln, kommen Sie vorbei und werfen Sie einen Blick darauf!

1. Welcher Mechanismus wird für die Datenbindung in Angular verwendet? Beschreiben Sie das Prinzip im Detail.

Antwort: Dirty-Checking-Mechanismus.

Analyse:

Die bidirektionale Datenbindung ist einer der Kernmechanismen von AngularJS. Wenn sich Daten in der Ansicht ändern, werden diese im Modell aktualisiert. Wenn sich die Daten im Modell ändern, wird die Ansicht natürlich auch synchron aktualisiert. [Verwandte Tutorial-Empfehlungen: „Angular Tutorial“] Das Prinzip besteht darin, dass Angular eine Überwachungswarteschlange für das Scope-Modell einrichtet, um Datenänderungen zu überwachen und die Ansicht zu aktualisieren. Jedes Mal, wenn Sie etwas an die Ansicht binden, fügt AngularJS ein $watch in die $watch-Warteschlange ein, um zu erkennen, ob es Änderungen im überwachten Modell gibt. Wenn der Browser ein Ereignis empfängt, das vom Angular-Kontext verarbeitet werden kann, wird die $digest-Schleife ausgelöst, durchläuft alle $watches und aktualisiert schließlich den Dom.

2. Wie wird die bidirektionale Datenbindung von AngularJS implementiert?

Antwort:

1 Jedes bidirektional gebundene Element verfügt über einen Beobachter

2. Wenn bestimmte Ereignisse auftreten, wird die Digest-Dirty-Data-Erkennung aufgerufen.

Zu diesen Ereignissen gehören: Inhaltsänderungen von Formularelementen, Ajax-Anfrageantworten, durch Klicken auf Schaltflächen ausgeführte Funktionen usw.

3. Die Dirty-Data-Erkennung erkennt alle Watcher-Elemente im Rootscope.

$digest-Funktion ist Dirty-Data-Überwachung

3. Welche Plug-Ins von Drittanbietern haben Sie bei der Entwicklung von AngularJS-Projekten verwendet?

Antwort: AngularUi UI-Router Oclazyload usw. Im Anhang finden Sie einen Artikel, der einen genaueren Blick darauf wirft https://segmentfault.com/a/1190000003858219

4. Was ist der Unterschied zwischen ng-show/ng-hide und ng-if?

Antwort: Wir alle wissen, dass ng-show/ng-hide tatsächlich über die Anzeige ausgeblendet und angezeigt wird. Und ng-if steuert tatsächlich das Hinzufügen und Löschen von Dom-Knoten. Wenn wir also Dom-Knoten gemäß unterschiedlichen Bedingungen laden, ist die Leistung von ng-if besser als die von ng-show.

Antwort: Laienhaft ausgedrückt ist die RootScrope-Seite der Vater aller RootScrope-Seiten und aller Bereiche aller RootScrope-Seiten.

Analyse:

Sehen wir uns an, wie man ro o o tSc o p e und rootScope sowie rootScope und Scope generiert.

Schritt 1: Angular analysiert ng-app und erstellt $rootScope im Speicher.

Schritt2: Angular setzt die Analyse fort, findet den Ausdruck {{}} und analysiert ihn in eine Variable.

Schritt 3: Dann wird das Div mit ng-controller analysiert und auf eine Controller-Funktion verwiesen. Zu diesem Zeitpunkt wird die Controller-Funktion zu einer $scope-Objektinstanz.

6. Nennen Sie mindestens drei Möglichkeiten, die Kommunikation zwischen verschiedenen Modulen zu implementieren?

Antwort:

Service

Ereignisse, gebundene Ereignisse angeben

Verwenden Sie $rootScope
• Controller verwenden Sie direkt $parent, $$childHead usw.
• Direktive zum Angeben von Attributen für die Datenbindung
• 7. Wie funktioniert der Ausdruck {
• {yourModel}}?

Antwort: Es basiert auf dem $interpolation-Dienst. Nach der Initialisierung des Seiten-HTML werden diese Ausdrücke gefunden und markiert, sodass jedes Mal, wenn ein {{}} auftritt, ein $watch gesetzt wird. $interpolation gibt eine Funktion mit Kontextparametern zurück. Wenn die Funktion schließlich ausgeführt wird, wird der Ausdruck auf diesen Bereich analysiert.

8. $http in Angular

Antwort: $http ist ein Kerndienst in AngularJS, der zum Lesen von Daten von Remote-Servern verwendet wird.

Wir können den integrierten http-Dienst nutzen, um direkt mit der Außenwelt zu kommunizieren. Der http-Dienst kommuniziert direkt mit der Außenwelt. Der http-Dienst kommuniziert direkt mit der Außenwelt. Der http-Dienst kapselt einfach das native XMLHttpRequest-Objekt des Browsers.

9. Was passiert, wenn ng-repeat ein Array iteriert, wenn das Array dieselben Werte enthält, und wie kann das Problem gelöst werden?

Antwort: Es wird angezeigt, dass Duplikate in einem Repeater nicht zulässig sind, um das Problem zu lösen. Natürlich können Sie auch jeden gewöhnlichen Wert verfolgen, solange jedes Element im Array eindeutig identifiziert werden kann (wodurch die Zuordnung zwischen Dom und Daten hergestellt wird)

10 Ist AngularJS ein MVC- oder MVVM-Framework? ：mvvm

Analyse:

Erklären Sie zunächst Ihr Verständnis von MVC und MVVM:Zunächst einmal: Warum brauchen wir MVC? Da die Größe des Codes immer größer wird, ist die Aufteilung der Verantwortlichkeiten der allgemeine Trend. Aus Gründen der Bequemlichkeit der späteren Wartung hat die Änderung einer Funktion keine Auswirkungen auf andere Funktionen. Und zur Wiederverwendung, weil ein Großteil der Logik gleich ist. MVC ist nur ein Mittel, das ultimative Ziel ist Modularisierung und Wiederverwendung.

Vorteile von mvvm

Geringe Kopplung: Die Ansicht kann unabhängig vom Modell geändert und geändert werden, und dasselbe ViewModel kann von mehreren Ansichten wiederverwendet werden. Änderungen in Ansicht und Modell können unabhängig voneinander vorgenommen werden.

Wiederverwendbarkeit: Einige Ansichtslogiken können in ViewModel platziert werden

Unabhängige Entwicklung: Entwickler können sich auf die Entwicklung von Geschäftslogik und Daten konzentrieren (ViewModemvvmdi);

Testbarkeit: Klare Ansichtsanalyseebene einfacher und einfacher, die Geschäftslogik der Präsentationsschicht zu testen.

Das MVVM-Muster in Angular ist hauptsächlich in vier Teile unterteilt:

Ansicht: Es konzentriert sich auf die Anzeige und das Rendering der Benutzeroberfläche und enthält eine Reihe von Deklarative Direktiven-Ansichtsvorlage.

ViewModel: Es ist für die Interaktion und Zusammenarbeit zwischen View und Model verantwortlich. Es ist für die Bereitstellung angezeigter Daten für View verantwortlich und bietet eine Möglichkeit für das Befehlsereignis Zum Betreiben des Modells spielt das $scope-Objekt die Rolle dieses

Modells: Es ist ein Kapselungsträger für die Geschäftslogik der Anwendung Es ist egal, wie es angezeigt oder bedient wird. Daher enthält das Modell keine Logik im Zusammenhang mit der Schnittstellenanzeige. In Webseiten geben die meisten Modelle Daten vom Ajax-Server oder globalen Konfigurationsobjekten zurück Diese. Der Ort für modellbezogene Geschäftslogik ist ein Domänendienst, der von mehreren Controllern oder anderen Diensten wiederverwendet werden kann.

Controller: Dies ist nicht das Kernelement des MVVM-Musters, aber es ist verantwortlich Für die Initialisierung des ViewModel-Objekts kombinieren Sie einen oder mehrere Dienste, um das Geschäftsdomänenmodell zu erhalten, und platzieren Sie es auf dem ViewModel-Objekt, sodass die Anwendungsschnittstelle beim Starten einen verwendbaren Zustand erreicht.

mvcs Schnittstelle und Logik sind eng miteinander verbunden , und die Daten werden direkt aus der Datenbank gelesen, und die Schnittstellendaten werden vom Ansichtsmodell abgerufen. Welche Rollen haben $scope, Controller, Direktive? , und Service spielen in MVVM in AngularJS

Antwort: Wenn Sie es nicht wissen, ist die Analyse der ersten Frage sehr klar, lesen Sie sie noch einmal sorgfältig durch

12 Wie steuern Sie die angemessene Belastung statischer Ressourcen? im Winkelprojekt

Antwort: Keine

13. Worauf müssen Sie beim logischen Denken achten?

Antwort:

1. Vereinfachen Sie den Code (dies ist, was alle Entwickler haben müssen)

2. Zu diesem Zeitpunkt fragen Sie sich vielleicht, warum nicht

Ihre Antwort ist: DOM-Operationen können Erscheint nur in Anweisungen. Der letzte Ort, an dem es erscheinen sollte, ist der Betrieb. Angular befürwortet eine testgetriebene Entwicklung. Wenn DOM-Operationen im Dienst oder Controller auftreten, bedeutet dies, dass der Test nicht bestanden werden kann. Dies ist natürlich nur ein Punkt. Wichtig ist einer der Vorteile der Verwendung von Angular, nämlich der bidirektionalen Datenbindung, sodass Sie sich auf die Verarbeitung der Geschäftslogik konzentrieren können, ohne sich mit Unmengen von DOM-Operationen befassen zu müssen. Wenn der Angular-Code immer noch voller verschiedener DOM-Operationen ist, warum nicht einfach JQuery verwenden, um ihn zu entwickeln?

Was ist testgetriebene Entwicklung? Machen Sie es bekannt:

Testgetriebene Entwicklung, der vollständige englische Name lautet Testgetriebene Entwicklung, kurz TDD, ist eine neue Entwicklungsmethode, die sich vom herkömmlichen Softwareentwicklungsprozess unterscheidet. Es erfordert das Schreiben von Testcode, bevor der Code für eine bestimmte Funktion geschrieben wird, und dann nur das Schreiben des Funktionscodes, der den Test erfolgreich macht, und das Vorantreiben der gesamten Entwicklung durch Tests. Dies hilft beim Schreiben von prägnantem, benutzerfreundlichem und qualitativ hochwertigem Code und beschleunigt den Entwicklungsprozess.

14. So kommunizieren Sie zwischen Controllern

Antwort:

Ereignis

Es gibt zwei Möglichkeiten: Eine davon ist sc o p e.scope.emit, und dann erhalten Sie die Parameter durch Abhören des ro o t Sco p e event ; Das andere ist das Ereignis von rootScope zum Abrufen von Parametern; das andere ist rootScope.b r o a d a s t , das Parameter durch Abhören von Broadcasts und durch Abhören von Scope-Ereignissen erhält.

In der neuesten Version von Angular gibt es keinen Leistungsunterschied. Der Hauptgrund ist, dass die Richtung des Ereignisversands je nach tatsächlicher Situation unterschiedlich ist.

2. Dienst

Sie können einen dedizierten Ereignisdienst erstellen oder ihn entsprechend der Geschäftslogik aufteilen und die Daten im entsprechenden $rootScope speichern

Diese Methode ist vielleicht etwas schmutzig, aber es ist ist praktischer, das heißt, die Daten werden im Root-Scope gespeichert, sodass sich jeder Sub-RootScope in jedem Sub-RootScope befindet, sodass jeder Sub-Scope aufgerufen werden kann, aber Sie müssen auf den Lebenszyklus achten

4. Verwenden Sie sc o p e direkt. Diese Methode hat noch weitere Nachteile. Es wird offiziell nicht empfohlen, Attribute zu verwenden, die mit $$ beginnen, was nicht nur die Kopplung erhöht, sondern auch die Behandlung asynchroner Probleme erfordert und die Reihenfolge der Bereiche nicht festgelegt ist. Nicht empfohlen

Die andere besteht darin, Parameter über den lokalen Speicher, globale Variablen oder PostMessage moderner Browser zu übergeben. Vermeiden Sie diese Methode, sofern keine besonderen Umstände vorliegen.

15. Mehrere Parameter benutzerdefinierter Anweisungen

Antwort:

Lassen Sie uns über einige häufige Parameter sprechen, wie zum Beispiel:

restrict: Die Deklarationsform der Anweisung in Dom E (Element) A (Attribut) C (Klasse). Name) M (Anmerkung)

Vorlage: zwei Formulare, ein HTML-Text; eine Funktion, die zwei Parameter akzeptiert, tElemetn und tAttrs, und eine Zeichenfolge zurückgibt, die die Vorlage darstellt. Die Vorlagenzeichenfolge muss ein Root-DOM-Element haben

templateUrl: zwei Formen, eine ist eine Zeichenfolge, die den Pfad der externen HTML-Datei darstellt, die andere ist eine Funktion, die zwei Parameter akzeptieren kann, die Parameter sind tElement und tAttrs und gibt eine externe HTML-Datei zurück path String

compile (Objekt oder Funktion): Die Kompilierungsoption kann ein Objekt oder eine Funktion zurückgeben. Wenn die Kompilierungsfunktion festgelegt ist, bedeutet dies, dass wir DOM-Operationen ausführen möchten, bevor Anweisungen und Echtzeitdaten im DOM platziert werden. Es ist sicher, DOM-Operationen wie das Hinzufügen und Löschen von Knoten in dieser Funktion auszuführen. Wenn wir die Link-Option festlegen, erstellen wir im Wesentlichen eine PostLink()-Link-Funktion, damit die Compile()-Funktion die Link-Funktion definieren kann.

Dann gibt es das Portal: http://www.cnblogs.com/mliudong/p/4180680.html

Der Unterschied zwischen Compile und Link:

Beim Kompilieren konvertiert Compile den Dom und trifft auf den Bindungs-Listener. Sie sind Zuerst werden sie an verschiedenen Orten gespeichert, und schließlich werden sie in einer Verknüpfungsfunktion zusammengefasst und gemeinsam ausgeführt, was die Leistung verbessert. 16. Der Unterschied zwischen Angular und JQuery Ich weiß nicht, wie es geht, komm hierher) http://www.zhihu.com/question/20792064)

jquery basiert auf dem Dom-Treiber, jquery eignet sich für Projekte mit vielen Dom-Operationen

17 Kennen Sie das Formular in Angular

Antwort:

Angular hat die Art der Eingabeelemente erweitert und bietet insgesamt die folgenden 10 Typen:

Text

Nummer

• URL

• E-Mail

• Radio

• Kontrollkästchen

• versteckt

• Schaltfläche

• Senden

• Zurücksetzen

• Angular verfügt über 4 integrierte CSS-Stile für das Formular.

• ng-valid Überprüfen Sie den rechtlichen Status.

ng-invalid Überprüfen Sie den illegalen Status.

• ng-pristine Wenn Sie die native Form verwenden möchten, müssen Sie diesen Wert festlegen.

• ng-dirty Der Formular ist fehlerhaft. Datenstatus

• Angular überprüft die Attribute im Modell, wenn das Formular automatisch validiert wird. Wenn ng-model nicht festgelegt ist, kann Angular nicht wissen, ob der Wert von myForm.$invalid wahr ist.

Überprüfen Sie den Inhalt / Unordnung

• 18. Wie viel wissen Sie darüber, was Filter ist? Implementieren Sie einen benutzerdefinierten Filter

Antwort:

Datum (Datum)
Währung (Währung)
limitTo (Array- oder Stringlänge begrenzen)
orderBy (Sortieren)

Kleinbuchstaben (Kleinbuchstaben)

Großbuchstaben (Großbuchstaben)

• Zahlen (Zahlen formatieren, Tausendertrennzeichen hinzufügen und Parameter empfangen, um die Anzahl der Dezimalstellen zu begrenzen)

• filter (ein Array verarbeiten, Elemente herausfiltern, die a enthalten bestimmte Teilzeichenfolge)

• json (formatiertes JSON-Objekt)

• Filter Es gibt zwei Möglichkeiten, es zu verwenden:

Eine direkt auf der Seite:

• <p>{{now | date : ‘yyyy-MM-dd’}}</p>

  Die andere wird in js verwendet:

  $filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)
  $filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

Passen Sie a an dedupliziertes Array

• app.filter("unique", function() {
    return function(arr) {
      var n = [];
      var obj = {};
  
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
          n.push(arr[i]);
          obj[arr[i]] = 1;
        }
      }
  
      return n;
    };
  });

  Weitere Programmierkenntnisse finden Sie unter:

  Programmier-Tutorial
! !

Das obige ist der detaillierte Inhalt von18 häufige Angular-Interviewfragen (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!