Erste Schritte mit AngularJS-Grundlagen_AngularJS

Diesbezüglich weiß ich eigentlich nicht, wen ich ansprechen soll oder wo ich mit dem Schreiben beginnen soll, deshalb werde ich hier mit dem Schreiben nach einer einfachen Idee beginnen

1.eckiges.element
2.angular.Bootstrap

Wir wissen sehr gut, dass Angular die Anwendung von ng-app automatisch für Sie initialisiert. Der Initialisierungsprozess ist in die folgenden Schritte unterteilt

1. Angular wird beim Laden des Dokuments automatisch initialisiert. Es findet zuerst den durch die ng-app-Anweisung angegebenen Knoten.
2. Modulbezogene Anweisungen laden
3. Erstellen Sie einen Injektor (Abhängigkeitsmanager) für die Anwendung
4. Beginnen Sie mit der angegebenen ng-app als Stammknoten mit der Kompilierung des Dom

Nun initialisieren wir es selbst und erstellen etwas, das dem Befehl ng-app entspricht. angle.element ist ein Wrapper, der ursprüngliche DOM-Elemente oder HTML-Strings als jQuery-Elemente umschließt. angle.Bootstrap kann das Skript manuell initialisieren. Wir verwenden diese beiden, um dieses Skript zu initialisieren

Code kopieren Der Code lautet wie folgt:

Dies ist außerhalb von ng-app~~{{1 2}}

Dies ist in ng-app~~~ {{1 2}}

2.Compiler

Wir sehen deutlich, dass es sich bei den offiziellen Dokumenten von AngularJs ausschließlich um Kamel-Case-Nomenklaturen wie ngApp, ngModule, ngBind usw. handelt. Der HTML-Compiler ermöglicht es uns, Elementattribute und Tags selbst zu definieren Verhaltensweisen werden als Anweisungen bezeichnet.
Die offizielle Dokumentation erklärt den Compiler wie folgt

Code kopieren Der Code lautet wie folgt:

Compiler
Compiler ist ein Angular-Dienst, der das DOM auf der Suche nach Attributen durchläuft. Der Kompilierungsprozess erfolgt in zwei Phasen.

Kompilieren: Durchlaufen Sie das DOM und sammeln Sie alle Anweisungen. Das Ergebnis ist eine Verknüpfungsfunktion.

Link: Kombinieren Sie die Anweisungen mit einem Bereich und erstellen Sie eine Live-Ansicht, und alle Benutzerinteraktionen mit der Ansicht werden im Bereichsmodell widergespiegelt Quelle der Wahrheit.

Einige Anweisungen wie ng-repeat clone DOM-Elemente einmal für jedes Element in einer Sammlung verbessern die Leistung, da die geklonte Vorlage nur einmal kompiliert und dann für jede Kloninstanz einmal verknüpft werden muss.

Compiler ist ein Dienst von Angular, der für das Durchlaufen von DOM-Knoten und die Suche nach Attributen verantwortlich ist. Die Kompilierung ist in zwei Phasen unterteilt:

1. Kompilieren: Durchlaufen Sie die Knoten, sammeln Sie alle Anweisungen und geben Sie eine Verknüpfungsfunktion zurück
2. Link: Binden Sie Anweisungen an einen Bereich und erstellen Sie eine Live-Ansicht. Alle Änderungen am Bereich werden in der Ansicht widergespiegelt (Aktualisierung der Ansicht); jede Benutzeraktivität (Änderung) an der Vorlage wird im Bereichsmodell widergespiegelt (bidirektionale Bindung). Dadurch kann das Scope-Modell die korrekten Werte widerspiegeln.
Einige Anweisungen, wie zum Beispiel ng-repeat, kopieren ein bestimmtes Element (Kombination) einmal für jedes Element in der Sammlung. Die beiden Phasen Kompilierung und Verknüpfung verbessern die Leistung. Denn die geklonte Vorlage muss nur einmal kompiliert und dann für jedes Element in der Sammlung einmal verknüpft werden (ähnlich wie beim Vorlagen-Caching).

3. Erstellen Sie Schritt für Schritt Ihre eigene Richtlinie

1. Richtlinie verstehen
Verstehen Sie zunächst, dass Direktiven der Kamel-Kasten-Benennung folgen, wie z. B. ngModule. Beim Kompilieren sieht die Übereinstimmung wie folgt aus, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Direktive kann x- oder data- als Präfix verwenden und Trennzeichen wie:, - oder _ verwenden, um Benennungsmethoden in Groß- und Kleinschreibung umzuwandeln, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

Im Allgemeinen verwenden wir ng-bind, um ngBind zu entsprechen, diesem Format
$compile kann Anweisungen basierend auf Elementnamen, Attributen, Klassennamen und Kommentaren zuordnen

Code kopieren Der Code lautet wie folgt:

Während des Kompilierungsprozesses gleicht der Compiler eingebettete Ausdrücke (z. B. {{something}}) in Text und Attributen über den $interpolate-Dienst ab. Diese Ausdrücke werden als Uhren registriert und im Rahmen des Digest-Zyklus aktualisiert. Hier ist eine einfache Interpolation:
Hallo {{username}}!

2. Kompilierungsschritte

Drei Schritte der HTML-„Kompilierung“:

1. Konvertieren Sie zunächst HTML über die Standard-API des Browsers in DOM-Objekte. Dies ist ein wichtiger Schritt. Weil die Vorlage analysierbares (der Spezifikation entsprechendes) HTML sein muss. Dies kann mit den meisten Vorlagensystemen verglichen werden, die im Allgemeinen auf Zeichenfolgen und nicht auf DOM-Elementen basieren.
2. Die Kompilierung des DOM wird durch den Aufruf der Methode $comple() abgeschlossen. Diese Methode durchläuft das DOM und stimmt mit der Direktive überein. Wenn die Übereinstimmung erfolgreich ist, wird sie zusammen mit dem entsprechenden DOM zur Direktivenliste hinzugefügt. Solange alle mit dem angegebenen DOM verknüpften Direktiven identifiziert sind, werden sie nach Priorität sortiert und ihre „compile()“-Funktionen werden in dieser Reihenfolge ausgeführt. Die Kompilierungsfunktion der Direktive hat die Möglichkeit, die DOM-Struktur zu ändern und ist für die Generierung des Parsings der Funktion link() verantwortlich. Die Methode $compile() gibt eine kombinierte Verknüpfungsfunktion zurück, bei der es sich um eine Sammlung von Verknüpfungsfunktionen handelt, die von den eigenen Kompilierungsfunktionen aller Direktiven zurückgegeben werden.
3. Verbinden Sie die Vorlage über die im vorherigen Schritt zurückgegebene Verknüpfungsfunktion mit dem Bereich. Dies wiederum ruft die eigene Verknüpfungsfunktion der Direktive auf, die es ihnen ermöglicht, einige Listener für das Element zu registrieren und einige Überwachungen in Verbindung mit dem Bereich einzurichten. Das Ergebnis ist eine bidirektionale, sofortige Bindung zwischen dem Bereich und dem DOM. Wenn sich der Bereich ändert, erhält das DOM die entsprechende Antwort.

Code kopieren Der Code lautet wie folgt:

var $compile = ...; // in Ihren Code eingefügt
var Scope = ...;
var html = '

';
// Schritt 1: HTML in DOM-Element analysieren
var template = angle.element(html);
// Schritt 2: Kompilieren Sie die Vorlage
var linkFn = $compile(template);
// Schritt 3: Verknüpfen Sie die kompilierte Vorlage mit dem Bereich.
linkFn(scope);

ngAttr-Attributbindung

Code kopieren Der Code lautet wie folgt:

Das ist alles für heute, und ich werde morgen mit dem Schreiben und Erstellen der Direktive beginnen ~~~ Halten Sie die Länge nicht zu lang, es gibt viele Hauptkonzepte in diesem Kapitel~~~