AngularJS est un framework JavaScript. Il peut être ajouté à une page HTML avec une balise <script>.
AngularJS étend les attributs HTML avec les directives, et se lie des données au format HTML avec des expressions.
AngularJS est un framework JavaScript
AngularJS est un framework JavaScript. Il est une bibliothèque écrite en JavaScript.
AngularJS est distribué comme un fichier JavaScript, et peut être ajouté à une page Web avec une balise de script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS Prolonge HTML
AngularJS étend HTML avec ng-directives.
La directive ng-app définit une application AngularJS.
La directive ng-modèle lie la valeur des contrôles HTML (entrée, sélectionnez, textarea) pour les données d'application.
La directive ng-bind lie les données d'application à la vue HTML.
AngularJS Exemple
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Essayez - le vous - même » Exemple expliqué:
AngularJS démarre automatiquement lorsque la page Web a été chargé.
La directive ng-app dit AngularJS que l'élément <div> est le «propriétaire» d'une application AngularJS.
La directive ng-modèle lie la valeur du champ de saisie à l'application nom de la variable.
La directive ng-bind lie le innerHTML de l'élément <p> à l'application nom de la variable.
AngularJS directives
Comme vous l' avez déjà vu, AngularJS directives sont des attributs HTML avec un préfixe ng.
La directive ng-init initialise les variables d'application AngularJS.
AngularJS Exemple
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Essayez - le vous - même » Alternativement avec HTML valide:
AngularJS Exemple
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Essayez - le vous - même »  | Vous pouvez utiliser les données-ng-, au lieu de ng-, si vous voulez faire votre page HTML valide. |
|---|
Vous apprendrez beaucoup plus sur les directives plus loin dans ce tutoriel.
AngularJS expressions
AngularJS expressions sont écrites à l' intérieur des accolades doubles: {{expression}}.
AngularJS seront données "de sortie" exactement où l'expression est écrit:
AngularJS Exemple
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Essayez - le vous - même » AngularJS expressions lient données AngularJS en HTML de la même manière que la directive ng-bind.
AngularJS Exemple
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Essayez - le vous - même » Vous en apprendrez plus sur les expressions plus loin dans ce tutoriel.
AngularJS Applications
AngularJS modules définissent des applications AngularJS.
AngularJS contrôleurs contrôlent les applications AngularJS.
La directive ng-app définit l'application, la directive ng-contrôleur définit le contrôleur.
AngularJS Exemple
<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>
Essayez - le vous - même » AngularJS modules définissent les applications:
Module AngularJS
var app = angular.module('myApp', []);
AngularJS applications de contrôle des contrôleurs:
AngularJS Controller
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Vous en apprendrez plus sur les modules et les contrôleurs plus loin dans ce tutoriel.