Explication détaillée de l'utilisation d'AngularJS controller_AngularJS

Le rôle du contrôleur dans Angularjs est d'améliorer la vue. Il s'agit en fait d'une fonction utilisée pour ajouter des fonctionnalités supplémentaires à la portée dans la vue. Nous l'utilisons pour définir l'état initial de l'objet de portée et ajouter des comportements personnalisés. .

Lorsque nous créons un contrôleur sur la page, Angularjs générera et transmettra un $scope au contrôleur Puisque Angularjs instanciera automatiquement le contrôleur, il nous suffit d'écrire le constructeur. L'exemple suivant montre l'initialisation du contrôleur :

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

La méthode ci-dessus de création d'un contrôleur polluera l'espace de noms global. Une approche plus raisonnable consiste à créer un module, puis à créer le contrôleur dans le module, comme suit :

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

Utilisez la commande intégrée ng-click pour lier des boutons, des liens et d'autres éléments DOM pour cliquer sur des événements. La directive ng-click lie l'événement mouseup dans le navigateur au gestionnaire d'événements défini sur l'élément DOM (par exemple, lorsque le navigateur déclenche un événement click sur un élément DOM, la fonction sera appelée). Semblable à l'exemple précédent, la liaison ressemble à ceci :

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

Les boutons et les liens sont liés à une opération dans le $scope interne. AngularJS appellera la méthode correspondante lorsqu'un élément est cliqué. Notez que lors de la définition de la fonction à appeler, un paramètre (add(1)) sera également passé entre parenthèses

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

La plus grande différence entre Angularjs et les autres frameworks est que le contrôleur n'est pas adapté pour effectuer des opérations DOM, des opérations de formatage ou de données, ainsi que des opérations de maintenance d'état autres que le stockage du modèle de données. Il s'agit simplement d'un pont entre la vue et $scope. .

Imbrication du contrôleur (la portée contient la portée)

Toute partie d'une application AngularJS, quel que soit le contexte dans lequel elle est rendue, a une portée parent. Pour le niveau où se trouve ng-app, sa portée parent est $rootScope.

Par défaut, lorsqu'AngularJS ne trouve pas une propriété dans la portée actuelle, il la recherchera dans la portée parent. Si AngularJS ne trouve pas l'attribut correspondant, il recherchera vers le haut le long de la portée parent jusqu'à ce qu'il atteigne $rootScope. S'il n'est pas trouvé dans $rootScope, le programme continuera à s'exécuter, mais la vue ne sera pas mise à jour.

Regardons ce comportement à travers un exemple. Créez un ParentController, qui contient un objet utilisateur, puis créez un ChildController pour référencer cet objet :

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

Si nous plaçons le ChildController à l'intérieur du ParentController, la portée parent de l'objet $scope du ChildController est l'objet $scope du ParentController. Selon le mécanisme d'héritage prototypique, nous pouvons accéder à l'objet $scope de ParentController dans la portée enfant.

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il vous sera utile pour votre étude et vous aidera à vous familiariser avec le contrôleur AngularJS.