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

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

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:

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

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

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.

ngAttr-Attributbindung

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~~~