Contrôleur AngularJS
Contrôleurs AngularJS Contrôlez les données des applications AngularJS.
Les contrôleurs AngularJS sont des objets JavaScript classiques.
Contrôleurs AngularJS
Les applications AngularJS sont contrôlées par des contrôleurs. La directive
ng-controller définit un contrôleur d'application.
Les contrôleurs sont des objets JavaScript, créés par le constructeur d'objets JavaScript standard.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse des applications :
Les applications AngularJS sont définies par ng-app. L'application s'exécute dans un <div>. L'attribut
ng-controller="myCtrl" est une directive AngularJS. Utilisé pour définir un contrôleur. La fonction
myCtrl est une fonction JavaScript.
AngularJS utilise l'objet $scope pour appeler les contrôleurs.
Dans AngularJS, $scope est un objet d'application (appartenant aux variables et fonctions d'application).
Le $scope du contrôleur (équivalent à la portée, la portée du contrôle) est utilisé pour enregistrer les objets du modèle AngularJS.
Le contrôleur crée deux propriétés dans la portée (prénom et nom). La directive
ng-model lie le champ de saisie aux propriétés du contrôleur (firstName et lastName).
Méthodes de contrôleur
L'exemple ci-dessus montre un objet contrôleur avec deux propriétés : lastName et firstName.
Les contrôleurs peuvent également avoir des méthodes (variables et fonctions) :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Contrôleur dans un fichier externe
Dans les grandes applications, il est courant de stocker les contrôleurs dans des fichiers externes.
Copiez simplement le code de la balise <script> dans un fichier externe appelé personController.js :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Autres exemples
L'exemple suivant crée un nouveau fichier de contrôleur :
$scope.names = [
{nom:'Jani',pays:'Norvège'},
{nom:'Hege',pays:'Suède'},
{name:'Kai',country:'Denmark'}
];
});
Enregistrez le fichier sous namesController.js :
Ensuite , Utilisez le fichier du contrôleur dans l'application :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>Exécuter l'instance»
Cliquez sur "Exécuter Bouton "" Instance pour visualiser des exemples en ligne
