Introduction à AngularJS
- Page précédente Tutoriels AngularJS
- Page suivante Expressions AngularJS
AngularJS est un Cadre JavaScript. Il peut être ajouté à une page HTML avec une balise <script>.
AngularJS parInstructionIl étend les attributs HTML et utiliseExpressionLié aux données HTML.
AngularJS est un cadre JavaScript
AngularJS est un cadre JavaScript écrit en JavaScript.
AngularJS est distribué sous forme de fichier JavaScript et peut être ajouté à une page Web en utilisant une balise <script> :
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS étend HTML
AngularJS utilise ng-instructionIl étend HTML.
ng-app L'instruction définit une application AngularJS.
ng-model L'instruction lie la valeur du contrôle HTML (input, select, textarea) aux données de l'application.
ng-bind L'instruction lie les données de l'application à la vue HTML.
Exemples AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Nom : <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Exemple d'explication :
Lorsque la page Web est chargée, AngularJS démarre automatiquement.
ng-app L'instruction informe AngularJS que l'élément <div> est un élément AngularJS Applicationdu "propriétaire".
ng-model L'instruction lie la valeur du champ d'entrée à la variable de l'application. name。
ng-bind Les instructions lient le contenu de l'élément <p> à la variable de l'application. name。
Instructions AngularJS
Comme vous pouvez le voir, les instructions AngularJS sont des éléments avec ng Préfixe des attributs HTML.
ng-init Les instructions initialisent les variables de l'application AngularJS.
Exemples AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>Le nom est <span ng-bind="firstName"></span></p> </div>
ou utilisez un HTML valide :
Exemples AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Le nom est <span data-ng-bind="firstName"></span></p> </div>
Si vous souhaitez que le HTML de la page soit valide, vous pouvez utiliser data-ng- au lieu de ng-。
Vous découvrirez plus d'informations sur les instructions à la fin de ce tutoriel.
Expressions AngularJS
Les expressions AngularJS sont écrites à l'intérieur des doubles accolades :{{ expression }}。
AngularJS "sortira" les données à l'emplacement de l'expression :
Exemples AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Ma première expression : {{ 5 + 5 }}</p>
</div>
</body>
</html>
Les expressions AngularJS lient les données AngularJS au HTML, avec ng-bind Les instructions sont de la même manière.
Exemples AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Nom : <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Vous découvrirez plus d'informations sur les expressions à la fin de ce tutoriel.
Applications AngularJS
AngularJS ModuleDéfinition de l'application AngularJS.
AngularJS ContrôleurContrôle de l'application AngularJS.
ng-app Définition d'application par instruction,ng-controller Définition d'instructions de contrôleur.
Exemples AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Nom : <input type="text" ng-model="firstName"><br>
Nom de famille : <input type="text" ng-model="lastName"><br>
<br>
Nom complet : {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
Les modules AngularJS définissent l'application :
Modules AngularJS
var app = angular.module('myApp', []);
Les contrôleurs AngularJS contrôlent l'application :
Contrôleurs AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Vous découvrirez plus d'informations sur les modules et les contrôleurs à la fin de ce tutoriel.
- Page précédente Tutoriels AngularJS
- Page suivante Expressions AngularJS
