Nach kurzer Einführung des AngularJS-Frameworks verwendet dieser Artikel ein Beispiel, um die Verwendung von {{}} Interpolationsmethode und NG-Bind-Befehl zu demonstrieren.
Im Gegensatz zu JQuery, einer Klassenbibliothek, die Front-End-Entwicklung stärkt und vereinfacht, ist AngularJS ein komplettes Web-Front-End-Frontwork, sodass die Lernkurve viel höher ist.
AngularJs gibt mir das Gefühl, dass es Javas Spring -Framework ähnelt, das andere Komponenten in der Position des Mittelbehälters festlegt. Viele seiner integrierten Komponenten können bereits allgemeine Szenarien erfüllen, und wir können spezielle Szenarien entsprechend der Rahmenidee erweitern.
Beginnen wir mit dem grundlegendsten Inhalt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html ng-App>
<kopf>
<meta charset = "utf-8">
<title> ng-bind-Anweisung </title>
</head>
<Body ng-controller = "hellocontroller">
<div>
<p> Ausgabe von String -Literalen </p> direkt ausgeben </p>
Hallo {{"World"}}
<hr>
</div>
<div>
<p> Verwenden Sie Platzhalter, um Variablen auszugeben </p>
Hallo {{Begrüßung}}
<hr>
</div>
<div>
<p> Verwenden Sie die NG-Bind-Anweisung, um Variablen auszugeben </p>
Hallo <span ng-bind = "Gruß"> </span>
<hr>
</div>
<script src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<Script>
Funktion Hellocontroller ($ scope) {
$ scope.greeting = "World";
}
</script>
</body>
</html>
NG-App deklariert ein AngularJS-Modul und ist auf den Umfang der Deklaration von HTML-Tags beschränkt.
NG-Controller ist ein Controller, der im Modul ein AngularJS deklariert. Der Controller kann mehrere Controller haben, aber der Kontext ist 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 liegt daran, dass "Welt" ein wörtlicher Wert ist und das Programm direkt ausgibt. Die zweite Ausgabe liegt daran, dass die Begrüßung eine im Controller definierte Variable ist. Der entsprechende Wert der Variablen wird ebenfalls ausgegeben, was ebenfalls Welt ist. Die dritte Ausgabe verwendet den in AngularJS eingebauten NG-Bind-Attributanweis, und das Endergebnis entspricht {{}}. Bitte beachten Sie jedoch, dass die Anweisung = eine Zeichenfolge folgt. Schreiben Sie sie nicht falsch.
Der Hellocontroller in JS entspricht den Anweisungen zum Körper. Der Eintragsparameter $ Scope ist ein Dienst, der vom Framework bereitgestellt wird und den Kontext des aktuellen Controllers darstellt, und es gibt andere ähnliche Dienste. Das Framework wird automatisch injiziert und wir werden es später langsam verstehen. Der Methode -Körper hat nur eine Zeile und definiert eine Variable für $ Scope, die die im HTML -Code verwiesene Variable ist.
Dieser Artikel ist sehr einfach und Sie können den Code nach dem Kopieren ausführen. Beachten Sie, dass Angular.min.js die neueste Version des 1.2 -Zweigs ist. Der gleiche Code kann nicht mit der Version 1.3.0 ausgeführt werden. Der Grund ist unbekannt. Es kann sein, dass 1.3.0 nicht die endgültige Version ist.