Exemple d'utilisation de la directive NG-BIND pour implémenter une liaison unidirectionnelle dans ANGULARJS_AngularJS

Après avoir brièvement présenté le framework AngularJS, cet article utilise un exemple pour démontrer l'utilisation de la méthode d'interpolation {{}} et de la directive ng-bind.

Contrairement à jquery, qui n'est qu'une bibliothèque de classes qui renforce et simplifie le développement front-end, angulairejs est un framework web front-end complet, donc la courbe d'apprentissage est beaucoup plus longue.

Angularjs me semble similaire au framework Spring de Java. Il est dans la position centrale du conteneur et colle d'autres composants ensemble. Beaucoup de ses composants intégrés peuvent déjà répondre à des scénarios généraux, nous pouvons développer en fonction du framework. des idées.

Commençons par le contenu le plus basique :

Copier le code Le code est le suivant :

Afficher directement la valeur littérale de la chaîne

Bonjour {{"Monde"}}

---

Utiliser des espaces réservés pour afficher les variables

Bonjour {{salutation}}

---

Utilisez la directive ng-bind pour afficher les variables

Bonjour

---

<script><br> Fonction HelloController ($ scope) {<br>           $scope.greeting = "Monde";<br> ><br> </script>

ng-app déclare un module angulairejs et est limité à la portée de la déclaration des balises html.

ng-controller déclare un contrôleur angulaire js dans le module. Il peut y 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 parce que "Monde" est une valeur littérale, et le programme l'affichera directement ; la deuxième sortie est parce que le message d'accueil est une variable définie dans le contrôleur, donc la valeur correspondant à la variable sera également sortie, ce qui est également World ; la troisième sortie La directive d'attribut ng-bind intégrée d'angularjs est utilisée. Le résultat final est équivalent à {{}}, mais notez que la directive = est suivie d'une chaîne, alors ne vous trompez pas.

Le HelloController en js correspond aux instructions sur le corps. Le paramètre d'entrée $scope est un service fourni par le framework, qui représente le contexte du contrôleur actuel. Il existe d'autres services similaires. Le framework les injectera automatiquement. Vous les découvrirez plus tard. Le corps de la méthode ne comporte qu'une seule ligne et définit une variable sur $scope, qui est la variable référencée dans le code html.

Cet article est très simple, copiez simplement le code et il s'exécutera. Notez que angulaire.min.js est la dernière version de la branche 1.2. Le même code ne peut pas être exécuté avec la version 1.3.0. La raison est inconnue. Cela peut être lié au fait que la version 1.3.0 n'est pas la version finale.