Einführung in AngularJS HTML Compiler_AngularJS

Übersicht

Der HTML-Compiler von AngularJS ermöglicht es Browsern, neue HTML-Syntax zu erkennen. Es ermöglicht Ihnen, Verhaltensweisen mit HTML-Elementen oder -Attributen zu verknüpfen und sogar neue Elemente mit benutzerdefinierten Verhaltensweisen zu erstellen. AngularJS nennt diese Verhaltenserweiterung eine „Direktive“

HTML verfügt über viele deklarative Strukturen, um das Format beim Schreiben statischer Seiten zu steuern. Wenn Sie beispielsweise einen Inhalt zentrieren möchten, müssen Sie den Browser nicht anweisen, „den Mittelpunkt des Fensters zu finden und ihn mit der Mitte des Inhalts zu kombinieren“. Sie müssen lediglich dem Element, dessen Inhalt zentriert werden soll, ein align="center"-Attribut hinzufügen. Das ist die Macht deklarativer Sprachen.

Aber deklarative Sprachen haben auch Einschränkungen. Einer der Gründe dafür ist, dass Sie sie nicht verwenden können, um den Browser anzuweisen, neue Syntax zu erkennen. Wenn Sie beispielsweise nicht möchten, dass der Inhalt zentriert, sondern 1/3 nach links verschoben wird, ist dies nicht möglich. Wir brauchen also eine Möglichkeit für den Browser, neue HTML-Syntax zu lernen.

AngularJS enthält einige sehr nützliche Anweisungen zum Erstellen von APPs. Wir hoffen auch, dass Sie einige eigene Befehle erstellen können, die für Ihre eigenen Anwendungen nützlich sind. Diese erweiterten Anweisungen sind die „domänenspezifische Sprache“, in der Sie Ihre APP erstellen.

Der Kompilierungsprozess erfolgt auf der Browserseite; die Serverseite nimmt an keinem der Schritte teil und wird auch nicht vorkompiliert.

Compiler

Der Compiler ist ein von AngularJS bereitgestellter Dienst. Er durchläuft das DOM, um damit verbundene Eigenschaften zu finden. Der gesamte Kompilierungsprozess ist in zwei Phasen unterteilt.

1. Kompilieren: Durchqueren Sie das DOM und sammeln Sie alle zugehörigen Anweisungen, um eine Linkfunktion zu generieren.

2. Link: Binden Sie einen Bereich an die Anweisung und generieren Sie eine dynamische Ansicht. Alle Änderungen am Bereichsmodell werden in der Ansicht widergespiegelt, und alle Benutzeroperationen in der Ansicht werden auch im Bereichsmodell widergespiegelt. Dadurch ist das Bereichsmodell das Einzige, um das sich Ihre Geschäftslogik kümmern muss.

Es gibt einige Anweisungen, wie z. B. ng-repeat, die jedes DOM-Element in der Datensammlung klonen. Die Aufteilung des gesamten Kompilierungsprozesses in zwei Phasen: Kompilierung und Verknüpfung verbessert die Gesamtleistung, da die geklonten Vorlagen insgesamt nur einmal kompiliert und dann mit ihren jeweiligen Modellinstanzen verknüpft werden müssen.

Befehle

Die

-Direktive gibt an, „was getan werden soll, wenn die zugehörige HTML-Struktur in die Kompilierungsphase eintritt.“ Anweisungen können im Namen des Elements, im Attribut, im CSS-Klassennamen oder im Kommentar geschrieben werden. Nachfolgend finden Sie mehrere Beispiele für die Verwendung der ng-bind-Direktive mit derselben Funktionalität.

Code kopieren Der Code lautet wie folgt:

Die

-Direktive ist im Wesentlichen nur eine Funktion, die ausgeführt werden muss, wenn der Compiler in das entsprechende DOM kompiliert. Ausführlichere Informationen zu Befehlen finden Sie in der Befehls-API-Dokumentation.

Hier ist ein Befehl, um ein Element ziehbar zu machen. Beachten Sie das ziehbare Attribut im -Element.

index.html:

Code kopieren Der Code lautet wie folgt:

Drag ME

script.js:

Code kopieren Der Code lautet wie folgt:

angle.module('drag', []).
Direktive('draggable', function($document) {
    var startX=0, startY=0, x = 0, y = 0;
    Rückgabefunktion (Bereich, Element, Attribut) {
      element.css({
       Position: 'relativ',
       Rand: '1px einfarbig rot',
       Hintergrundfarbe: 'hellgrau',
       Cursor: 'Zeiger'
      });
      element.bind('mousedown', function(event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.bind('mousemove', mousemove);
        $document.bind('mouseup', mouseup);
      });

      Funktion Mousemove(Ereignis) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          oben: y 'px',
          links:  x 'px'
        });
      }

      Funktion mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }
    }
 });

通过加入dragable属性可以让任何HTML元素都实现这个新的行为.我们这种改进的优美之处在于我们给了浏览器新能力.我们用了一种只要开发者熟悉HTML规则，就会方式扩展了浏览器理解新行为新语法的能力

理解视图

网上有很多的模板系统.他们大多数都是“将静态的字符模板和数据绑定，生成新字符，然后通过innerHTML插入到页面元素中“。

这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新字符，再插入到DOM里。这其中会出现的问题有:需要读取用户输入并和模型的数据结合,需要覆写用户的输入,需要手动管理整个更新过程,缺少丰富的表现形式.

AngularJS ist nicht verfügbar个函数和作用域模型结合就会生成一个动态视图.这个视图和模型的绑定过程是„透明的“我们也不用覆写用户的输入.更特别的是, Angular的指令不仅仅能

AngularJS ist eine vertrauenswürdige Instanz von „DOM“.周期中发生改变.这也意味着代码中可以获取到DOM元素