Beispiel für die Verwendung der NG-BIND-Direktive zur Implementierung einer unidirektionalen Bindung in ANGULARJS_AngularJS

Nach einer kurzen Einführung in das AngularJS-Framework zeigt dieser Artikel anhand eines Beispiels die Verwendung der Interpolationsmethode {{}} und der NG-Bind-Direktive.

Im Gegensatz zu Jquery, bei dem es sich lediglich um eine Klassenbibliothek handelt, die die Front-End-Entwicklung stärkt und vereinfacht, handelt es sich bei AngularJS um ein vollständiges Web-Front-End-Framework, sodass die Lernkurve viel höher ist.

Angularjs fühlt sich für mich ähnlich an wie das Spring-Framework von Java und verbindet viele seiner integrierten Komponenten bereits mit allgemeinen Szenarien Ideen.

Beginnen wir mit dem grundlegendsten Inhalt:

Code kopieren Der Code lautet wie folgt:

String-Literalwert direkt ausgeben

Hallo {{"Welt"}}

---

Platzhalter zur Ausgabe von Variablen verwenden

Hallo {{greeting}}

---

Verwenden Sie die ng-bind-Direktive, um Variablen auszugeben

Hallo

---

<script><br> Funktion HelloController($scope) {<br>           $scope.greeting = "World";<br> }<br> </script>

ng-app deklariert ein AngularJS-Modul und ist auf den Umfang der Deklaration von HTML-Tags beschränkt.

ng-controller deklariert einen AngularJS-Controller im Modul. Es können mehrere Controller vorhanden sein, der Kontext ist jedoch isoliert und der Umfang des Controllers sollte so weit wie möglich eingeschränkt werden.

{{}} ist die Interpolationssyntax von AngularJS, ähnlich dem EL-Ausdruck ${} von JSP. Die erste Ausgabe erfolgt, weil „World“ ein Literalwert ist und das Programm ihn direkt ausgibt. Die zweite Ausgabe erfolgt, weil die Begrüßung eine im Controller definierte Variable ist, sodass auch der der Variablen entsprechende Wert ausgegeben wird World; die dritte Ausgabe Die integrierte ng-bind-Attributdirektive von anglejs wird verwendet. Das Endergebnis ist äquivalent zu {{}}, aber beachten Sie, dass auf die Direktive = eine Zeichenfolge folgt, also machen Sie keinen Fehler.

Der HelloController in js entspricht den Anweisungen im Body. Der Eingabeparameter $scope ist ein vom Framework bereitgestellter Dienst, der den Kontext des aktuellen Controllers darstellt Ich werde später mehr darüber erfahren. Der Methodenkörper besteht nur aus einer Zeile und definiert eine Variable auf $scope, bei der es sich um die Variable handelt, auf die im HTML-Code verwiesen wird.

Dieser Artikel ist sehr einfach. Kopieren Sie einfach den Code und er wird ausgeführt. Beachten Sie, dass es sich bei angle.min.js um die neueste Version des 1.2-Zweigs handelt. Derselbe Code kann nicht mit Version 1.3.0 ausgeführt werden. Der Grund dafür ist möglicherweise nicht bekannt.