Après avoir brièvement introduit le framework AngularJS, cet article utilise un exemple pour démontrer l'utilisation de la méthode d'interpolation {{}} et de l'instruction NG-Bind.
Contrairement à JQuery, qui n'est qu'une bibliothèque de classe qui renforce et simplifie le développement frontal, AngularJS est un cadre complète du Web, donc la courbe d'apprentissage est beaucoup plus élevée.
Angularjs me donne le sentiment qu'il est similaire au framework de printemps de Java, qui colle d'autres composants dans la position du conteneur central. Beaucoup de ses composants intégrés peuvent déjà répondre à des scénarios généraux, et nous pouvons étendre les scénarios spéciaux en fonction de l'idée du cadre.
Commençons par le contenu le plus élémentaire:
La copie de code est la suivante:
<! Doctype html>
<html ng-app>
<adal>
<meta charset = "utf-8">
<Title> Ng-Bind Directive </Title>
</ head>
<Body ng-Controller = "HelloController">
<div>
<p> Sortie directement des littéraux de chaîne </p>
Bonjour le monde"}}
<hr>
</div>
<div>
<p> Utilisez les espaces réservés aux variables de production </p>
Bonjour {{salutation}}
<hr>
</div>
<div>
<p> Utilisez l'instruction NG-Bind pour produire des variables </p>
Bonjour <span ng-bind = "salutation"> </span>
<hr>
</div>
<script src = "../ lib / angularjs / 1.2.26 / angular.min.js"> </ script>
<cript>
fonction HelloController ($ scope) {
$ scope.greeting = "world";
}
</cript>
</docy>
</html>
Ng-App déclare un module AngularJS et est limité à l'étendue de la déclaration des balises HTML.
Ng-contrôleur est un contrôleur qui déclare un AngularJS dans le module. Le contrôleur peut avoir plusieurs contrôleurs, mais le contexte est isolé, et la portée du contrôleur doit être réduite autant que possible.
{{}} est la syntaxe d'interpolation d'AngularJS, similaire à l'expression el $ {} de jsp. La première sortie est due au «monde» est une valeur littérale et que le programme sortira directement; La deuxième sortie est parce que la salutation est une variable définie dans le contrôleur, de sorte que la valeur correspondante de la variable sera également sortie, qui est également mondiale; La troisième sortie utilise l'instruction d'attribut Ng-Bind intégré dans AngularJS, et le résultat final est équivalent à {{}}, mais veuillez noter que l'instruction = est suivi d'une chaîne, ne l'écrivez pas incorrectement.
Le HelloController en JS correspond aux instructions sur le corps. Le paramètre d'entrée $ Scope est un service fourni par le cadre, représentant le contexte du contrôleur actuel, et il existe d'autres services similaires. Le cadre sera automatiquement injecté et nous le comprendrons lentement plus tard. Le corps de la méthode n'a qu'une seule ligne, et il définit une variable sur $ SCOPE, qui est la variable référencée dans le code HTML.
Cet article est très simple et vous pouvez exécuter le code après le copier. Notez qu'Angular.min.js est la dernière version de la branche 1.2. Le même code ne peut pas fonctionner avec la version 1.3.0. La raison est inconnue. Il se peut que 1.3.0 ne soit pas la version de version finale.