AngularJS Contrôleur

Les contrôleurs AngularJScontrôlentles données des applications AngularJS.

Les contrôleurs AngularJS sont des objetsJavaScript ordinaires。

Contrôleurs AngularJS

Les applications AngularJS sont contrôlées par des contrôleurs.

ng-controllerLa directive définit le contrôleur de l'application.

Les contrôleurs sont desobjets JavaScript, créés par le constructeur d'objetsJavaScript standard.

Exemple AngularJS

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

Prénom :<input type="text" ng-model="firstName"><br>
Nom :<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 = "John";
    $scope.lastName = "Doe";
});
</script>

Essayez-le vous-même »

Analyse de l'application :

L'application AngularJS est définie parng-app. L'application s'exécute dans <div>.

ng-controller="myCtrl"L'attribut est une directive AngularJS. Il est utilisé pour définir un contrôleur.

myCtrlLa fonction est une fonction JavaScript.

AngularJS utilise$scopel'objet pour appeler le contrôleur.

Dans AngularJS, $scope est un objet d'application (appartenant aux variables et fonctions de l'application).

Le$scopedu contrôleur (équivalent à portée, plage de contrôle) est un objet utilisé pour stocker le modèle AngularJS.

Le contrôleur crée deux propriétés dans la portéefirstNameetlastName).

ng-modelLa directive lie les champs de saisie aux propriétés du contrôleur (firstName et lastName).

Méthodes du contrôleur

L'exemple ci-dessus présente un objet contrôleur avec deux propriétés, lastName et firstName.

Les contrôleurs peuvent aussi avoir des méthodes (variables et fonctions) :

Exemple AngularJS

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

Prénom :<input type="text" ng-model="firstName"><br>
Nom :<input type="text" ng-model="lastName"><br>
<br>
Nom complet :{{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>

Essayez-le vous-même »

Contrôleurs dans des fichiers externes

Dans les grandes applications, les contrôleurs sont généralement stockés dans des fichiers externes.

Copiez simplement le code dans la balise <script> dans le fichier externe nommépersonController.js: c'est tout :

Exemple AngularJS

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

Prénom : <input type="text" ng-model="firstName"><br>
Nom : <input type="text" ng-model="lastName"><br>
<br>
Nom complet : {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

Essayez-le vous-même »

Autres exemples

L'exemple suivant crée un nouveau fichier de contrôleur :

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

Enregistrez le fichier sousnamesController.js:

Ensuite, utilisez le fichier de contrôleur dans l'application :

Exemple AngularJS

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

Essayez-le vous-même »
Autres extensions