Introduction à AngularJS
AngularJS est un framework JavaScript . Il peut être ajouté à une page HTML avec une balise <script>.
AngularJS étend les attributs HTML avec des directives et lie les données au HTML avec des expressions .
AngularJS est un framework JavaScript
AngularJS est un framework JavaScript écrit en JavaScript.
AngularJS est distribué sous forme de fichier JavaScript et peut être ajouté à une page Web avec une balise de script :
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS étend le HTML
AngularJS étend HTML avec ng-directives .
La directive ng-app définit une application AngularJS.
La directive ng-model lie la valeur des contrôles HTML (input, select, textarea) aux données de l'application.
La directive ng-bind lie les données d'application à la vue HTML.
Exemple AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
Exemple expliqué :
AngularJS démarre automatiquement lorsque la page Web est chargée.
La directive ng-app indique à AngularJS que l'élément <div> est le "propriétaire" d'une application AngularJS .
La directive ng-model lie la valeur du champ d'entrée à la variable d'application name .
La directive ng-bind lie le contenu de l'élément <p> à la variable d'application name .
AngularJS Directives
Comme vous l'avez déjà vu, les directives AngularJS sont des attributs HTML avec un préfixe ng .
La directive ng-init initialise les variables d'application AngularJS.
Exemple AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternativement avec HTML valide :
Exemple AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Vous pouvez utiliser data-ng- , au lieu de ng- , si vous voulez rendre votre page HTML valide.
Vous en apprendrez beaucoup plus sur les directives plus loin dans ce didacticiel.
Expressions AngularJS
Les expressions AngularJS sont écrites à l'intérieur de doubles accolades : {{ expression }} .
AngularJS "sortira" les données exactement là où l'expression est écrite :
Exemple AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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 AngularJS au HTML de la même manière que la directive ng-bind .
Exemple AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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 plus tard dans ce didacticiel.
Applications Angular JS
Les modules AngularJS définissent les applications AngularJS.
Les contrôleurs AngularJS contrôlent les applications AngularJS.
La directive ng-app définit l'application, la directive ng-controller définit le contrôleur.
Exemple AngularJS
<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>
Les modules AngularJS définissent les applications :
Module AngularJS
var app = angular.module('myApp', []);
Les contrôleurs AngularJS contrôlent les applications :
Contrôleur AngularJS
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 didacticiel.