AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js">>
AngularJS étend le HTML
AngularJS étend le HTML via une série de directives ng.
La directive ng-app définit l'application AngularJS.
La directive ng-model lie la valeur du contrôle HTML au modèle de données.
La directive ng-bind lie les données du modèle à la vue HTML.
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body>
Exemple de description :
AngularJS démarre automatiquement l'exécution lorsque la page est chargée.
La directive ng-app indique à AngularJS que l'élément
La directive ng-model lie la valeur de la balise d'entrée au nom de la variable.
La directive ng-bind lie la valeur du nom de la variable à l'attribut innerHTML de l'élément
Commandes AngularJS
Comme vous pouvez le constater, les directives AngularJS sont un ensemble d'attributs HTML commençant par ng.
Les variables d'application AngularJS peuvent être initialisées via la directive ng-init.
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
Code équivalent :
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
Remarque Vous pouvez utiliser le préfixe data-ng- au lieu de ng- pour garantir que le code HTML de la page est valide.
Vous en apprendrez davantage sur les directives AngularJS dans les chapitres suivants.
Expression AngularJS
Les expressions AngularJS sont écrites entre doubles accolades : {{ expression Statement }}.
AngularJS "affichera" avec précision l'expression comme résultat calculé, par exemple :
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>
Les expressions AngularJS lient les données au HTML de la même manière que la directive ng-bind.
<!DOCTYPE html> <html> <script src="angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div> </body> </html>
Vous en apprendrez plus sur les expressions AngularJS dans les chapitres suivants.
Application AngularJS
Le module AngularJS définit les applications AngularJS.
Les contrôleurs AngularJS contrôlent le comportement des applications AngularJS.
La directive ng-app est utilisée pour spécifier l'application, et la directive ng-controller est utilisée pour spécifier le contrôleur.
<div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>
Applications de définition de modules AngularJS :
var app = angular.module('myApp', []); AngularJS控制器控制AngularJS Applications的行为: app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });
Vous en apprendrez plus sur les modules et les contrôleurs dans les chapitres suivants.