Contrôleurs AngularJS

Contrôleurs AngularJS控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

Contrôleurs AngularJS

AngularJS 应用程序由控制器控制。

ng-controller 指令定义应用程序控制器。

控制器是由标准的 JavaScript 对象构造器创建的 JavaScript 对象。

Exemples AngularJS

<div ng-app="myApp" ng-controller="myCtrl">  
Prénom: <input type="text" ng-model="firstName"><br>  
Nom de famille: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

Essayez-le vous-même

应用程序说明：

AngularJS 应用程序由 ng-app="myApp" 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" Une propriété est une instruction AngularJS. Elle définit un contrôleur.

myCtrl Une fonction est une fonction JavaScript.

AngularJS utilise $scope l'objet appelle le contrôleur.

Dans AngularJS, $scope est l'objet de l'application (propriétaire de toutes les variables et fonctions de l'application).

Le contrôleur est appelé dans la portée (firstName et lastNamedans la fonction de création de deux propriétés (variables).

ng-model Les instructions lie les champs d'entrée 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 (comme des variables de fonctions) :

Exemples AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Prénom: <input type="text" ng-model="firstName"><br>  
Nom de famille: <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 = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

Essayez-le vous-même

Contrôleurs dans les fichiers externes

Dans les applications plus grandes, il est courant de stocker les contrôleurs dans des fichiers externes.

Il suffit de copier le code entre les balises <script> dans un fichier nommé personController.js dans le fichier externe :

Exemples AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Prénom: <input type="text" ng-model="firstName"><br>  
Nom de famille: <input type="text" ng-model="lastName"><br>  
<br>  
Nom complet: {{fullName()}}  
</div>  
<script src="personController.js"></script>

Essayez-le vous-même

Un autre exemple

Pour l'exemple suivant, nous allons créer un nouveau fichier de contrôleur :

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norvège'},
    {name:'Hege',country:'Suède'},
    {name:'Kai',country:'Danemark'}
  ];
});

Enregistrez le fichier sous namesController.js:

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

Exemples 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