Exemple d'utilisation de la directive NG-BIND pour implémenter la liaison unidirectionnelle dans ANGULARJS-PHP开发-php.cn

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

高洛峰

Libérer： 2016-12-24 09:54:27

original

1208 Les gens l'ont consulté

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. Beaucoup de ses composants intégrés peuvent déjà répondre à des scénarios généraux, nous pouvons les développer en fonction de ceux-ci. les idées-cadres.

Commençons par le contenu le plus basique :

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
<div>
    <p>使用占位符输出变量</p>
    Hello {{greeting}}
    <hr>
</div>
<div>
    <p>使用ng-bind指令输出变量</p>
    Hello <span ng-bind="greeting"></span>
    <hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.greeting = "World";
    }
</script>
</body>
</html>

Copier après la connexion

ng-app déclare un module angulaire js et se limite à 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 que le framework va automatiquement. injecter. Vous en apprendrez plus 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.

Pour plus d'exemples de liaison unidirectionnelle utilisant l'instruction NG-BIND dans ANGULARJS, veuillez faire attention au site Web PHP chinois pour les articles connexes !