Tatsächlich weiß ich nicht, wer gezielt sein sollte oder wo ich mit dem Schreiben anfangen soll, daher werde ich anfangen, nach einer einfachen Idee zu schreiben.
1.angular.element
2.angular.bootstrap
Wir sind sehr klar, dass NG-App auf Knoten angewendet wird, und Angular hilft Ihnen automatisch, zu initialisieren. Der Initialisierungsprozess ist in die folgenden Schritte unterteilt
1.angular wird automatisch initialisiert, wenn der Dokument geladen wird, und zunächst wird der von der NG-App-Anweisung angegebene Knoten gefunden.
2. Ladungsmodulanweisungen
3. Erstellen Sie einen anwendungsbezogenen Injektor (Abhängigkeitsmanager)
V.
Jetzt initialisieren wir es selbst und machen etwas, das der NG-App-Richtlinie entspricht. Angular.element Dies ist der Wrapper, der das ursprüngliche DOM -Element oder das HTML -Zeichenfolge als JQuery -Element einwickelt. Angular.bootstrap kann das Skript manuell initialisieren. Wir verwenden diese beiden, um dieses Skript zu initialisieren
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "zh-cn">
<kopf>
<meta charset = "utf-8">
<title> Bootstrap-Manual </title>
<style type = "text/css">
.ng-cloak {
Anzeige: Keine;
}
</style>
</head>
<body>
Hier ist die Außenseite von Ng-App ~~ {{1+2}}
<div id = "widuu"> Dies ist in ng-App ~~~ {{1+2}} </div>
<script src = "Angular.min.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
Angular.Element (Dokument) .Ready (function () {
Angular.bootstrap (Angular.Element (document.getElementById ("widuU")));
});
</script>
</body>
</html>
2.Compiler
Wir sehen deutlich, dass das offizielle AngularJS -Dokument voller Kamel -Nomenklatur ist, wie ngapp, ngmodule, ngbind usw. sind verwandte Anweisungen. Unter ihnen ermöglicht es uns mit HTML -Compiler, Elementattribute und Tags selbst zu definieren. Angular ruft diese zusätzlichen Verhaltensrichtlinien auf.
Die offizielle Dokumentation erklärt Compiler wie diesen
Die Codekopie lautet wie folgt:
Compiler
Der Compiler ist ein Winkeldienst, der das DOM durchquert, der nach Attributen sucht. Der Zusammenstellungsprozess erfolgt in zwei Phasen.
Kompilieren: Überqueren Sie den DOM und sammeln Sie alle Richtlinien. Das Ergebnis ist eine Verknüpfungsfunktion.
Link: Kombinieren Sie die Richtlinien mit einem Umfang und erstellen Sie eine lebende Sicht. Alle Änderungen im Umfangsmodell spiegeln sich in der Ansicht wider, und alle Benutzerinteraktionen mit der Ansicht spiegeln sich im Umfangsmodell wider. Dies macht das Umfangsmodell zur einzelnen Quelle der Wahrheit.
Einige Richtlinien wie NG-Repeat-Klon-DOM-Elemente für jedes Element in einer Sammlung. Eine Kompilier- und Link -Phase verbessert die Leistung, da die klonierte Vorlage nur einmal zusammengestellt und dann für jede Kloninstanz einmal verknüpft werden muss.
Compiler ist ein Winkeldienst, der für das Durchqueren von Dom -Knoten und das Finden von Eigenschaften verantwortlich ist. Die Zusammenstellung ist in zwei Phasen unterteilt:
1. Zusammenstellung: Durchqueren Sie die Knoten und sammeln Sie alle Richtlinien, geben Sie eine Verknüpfungsfunktion zurück
2. Link: Binden Sie Richtlinien in einen Bereich und erstellen Sie eine Live -Ansicht. Alle Änderungen im Umfang werden in der Ansicht widerspiegelt (aktualisieren Sie die Ansicht). Die Aktivität eines Benutzers (Änderung) in die Vorlage wird im Umfangsmodell (Zwei-Wege-Bindung) widerspiegelt. Dadurch kann das Umfangsmodell den richtigen Wert widerspiegeln.
Einige Richtlinien wie NG-Wiederholungen kopieren ein bestimmtes Element (Kombination) einmal für jedes Element in der Sammlung. Zusammenstellung und Verknüpfung sind zwei Phasen zur Verbesserung der Leistung. Da die geklonte Vorlage nur einmal kompiliert werden muss, und dann die Elemente in jeder Sammlung einmal (ähnlich dem Vorlagen -Cache) verknüpfen muss.
3. Erstellen Sie Schritt für Schritt Ihre eigene Richtlinie
1. Richtlinie verstehen
Zunächst verstehen wir, dass die Richtlinie auf der Kamel -Nomenklatur wie Ngmodule basiert. Beim Kompilieren ist das Match so, z. B.:
Die Codekopie lautet wie folgt:
<Eingabe ng-model = "foo">
<Eingabedaten-NG: model = "foo">
Die Richtlinie kann X- oder Daten als Präfix verwenden und die:,- oder _ usw. Trennzeichen verwenden, um Kamelbenennungsmethoden wie folgt zu konvertieren:
Die Codekopie lautet wie folgt:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
Im Allgemeinen verwenden wir NG-Bind, um Ngbind, diesem Format, zu entsprechen
$ compile kann die Anweisung basierend auf Elementname, Attribut, Klassenname und Kommentar übereinstimmen
Die Codekopie lautet wie folgt:
<my-dir> </my-dir>
<span my-dir = "exp"> </span>
<!-Richtlinie: my-dir exp->
<span> </span>
Während des Kompilierungsprozesses entspricht Compiler den Text mit eingebetteten Ausdrücken in Attributen (wie {{etwas}}) über den $ Interpolat -Dienst. Diese Ausdrücke werden als Uhren registriert und im Rahmen des Digest -Zyklus gemeinsam aktualisiert. Hier ist eine einfache Interpolation:
<img src = "img/{{username}}. JPG"/> Hallo {{Benutzername}}!
2. Kompilierungsschritte
Drei Schritte zum "Kompilieren" von HTML:
1. Konvertieren Sie zunächst HTML in DOM -Objekte durch die Standard -API des Browsers. Dies ist ein sehr wichtiger Schritt. Weil die Vorlage parserbar sein muss (entspricht den Spezifikationen). Dies kann mit den meisten Vorlagensystemen verglichen werden, die im Allgemeinen auf Zeichenfolgen basieren, nicht auf DOM -Elementen.
2. Die Zusammenstellung des DOM erfolgt durch Aufrufen der $ comple () -Methode. Diese Methode durchquert den DOM und entspricht der Richtlinie. Wenn die Übereinstimmung erfolgreich ist, wird es zusammen mit dem entsprechenden DOM der Richtlinienliste hinzugefügt. Solange alle mit dem angegebenen DOM verbundenen Richtlinien identifiziert werden, werden sie in Priorität sortiert und ihre Compile () -Funktion in dieser Reihenfolge ausführen. Die Richtlinie Compile -Funktion hat die Möglichkeit, die DOM -Struktur zu ändern, und ist für die Erzeugung der Analyse der Link () -Funktion verantwortlich. Die $ compile () -Methode gibt eine kombinierte Verknüpfungsfunktion zurück, bei der eine Sammlung verknüpfter Funktionen enthält, die von der Kompilierfunktion der Anweisung selbst zurückgegeben werden.
3. Schließen Sie die Vorlage über die im vorherigen Schritt zurückgegebene Link -Funktion an den Bereich an. Dadurch werden die eigenen Verknüpfungsfunktion der Richtlinie bezeichnet, sodass sie einige Hörer im Element registrieren und einige Uhren mit Umfang erstellen können. Das Ergebnis darin ist eine zweifache, sofortige Bindung zwischen Umfang und DOM. Wenn sich das Zielfernrohr ändert, erhält das DOM die entsprechende Antwort.
Die Codekopie lautet wie folgt:
var $ compile = ...; // in Ihren Code injiziert
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
// Schritt 1: HTML in DOM -Element analysieren
var template = angular.element (html);
// Schritt 2: Kompilieren Sie die Vorlage
var linkfn = $ compile (Vorlage);
// Schritt 3: Verknüpfen Sie die kompilierte Vorlage mit dem Bereich.
linkfn (Scope);
Ngattr -Attributbindung
Die Codekopie lautet wie folgt:
<Svg>
<Circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
Das ist alles heute und beginne zu schreiben, um morgen eine Richtlinie zu erstellen. ~~~ Die Kontrolllänge sollte nicht zu lang sein, es gibt viele Hauptkonzepte in diesem Kapitel ~~~