Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:28:25
Original
1484 Leute haben es durchsucht

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:





ng-bind-Direktive



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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage