Notes d'étude de base AngularJS Controller_AngularJS

Le contrôleur AngularJS est utilisé pour contrôler les données des applications AngularJS.

Les contrôleurs AngularJS sont des objets JavaScript ordinaires.

Contrôleur AngularJS
Les applications AngularJS sont contrôlées via des contrôleurs.

La directive ng-controller définit un contrôleur d'application.

Un contrôleur est un objet JavaScript qui peut être créé via des constructeurs d'objets JavaScript standard.

<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>

Explication du code :

L'application AngularJS est définie par ng-app="myApp". La portée effective de l'application se situe dans le dc6dce4a544fdca2df29d5ac0ea9906b où se trouve ng-app.

　ng-controller="myCtrl" l'attribut est une directive AngularJS, qui définit un contrôleur.

La fonction myCtrl est une fonction JavaScript ordinaire.

AngularJS utilise l'objet $scope pour appeler les contrôleurs.

Dans AngularJS, $scope est un objet d'application (c'est-à-dire le propriétaire des variables et des fonctions d'application).

Le contrôleur contient deux propriétés (ou variables) : firstName et lastName. Ils sont attachés à l’objet $scope.

La directive ng-model lie la valeur de la balise d'entrée aux propriétés du contrôleur (firstName et lastName).

Méthodes du contrôleur
L'exemple ci-dessus montre que l'objet contrôleur contient deux propriétés : lastName et firstName.

Les contrôleurs peuvent également contenir des méthodes (attribuer des fonctions à des variables) :

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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>

Mettre le contrôleur dans un fichier externe
Dans les applications volumineuses, le code du contrôleur est souvent écrit dans des fichiers externes.

Copiez le code dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans le fichier externe personController.js :

<div ng-app="myApp" ng-controller="personCtrl">

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 src="personController.js"></script>

Autre exemple
​Créez un nouveau fichier de contrôleur et nommez-le namesController.js :

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Utilisez ensuite ce fichier de contrôleur dans l'application :

<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>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.