AngularJS
Contrôleurs
Recherche…
Syntaxe
- <htmlElement ng-controller = "controllerName"> ... </ htmlElement>
- <script> app.controller ('controllerName', controllerFunction); </ script>
Votre premier contrôleur
Un contrôleur est une structure de base utilisée dans Angular pour préserver la portée et gérer certaines actions dans une page. Chaque contrôleur est couplé à une vue HTML.
Vous trouverez ci-dessous un modèle de base pour une application angulaire:
<!DOCTYPE html>
<html lang="en" ng-app='MyFirstApp'>
<head>
<title>My First App</title>
<!-- angular source -->
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<!-- Your custom controller code -->
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>
Il y a quelques choses à noter ici:
<html ng-app='MyFirstApp'>
Définir le nom de l'application avec ng-app vous permet d'accéder à l'application dans un fichier Javascript externe, qui sera traité ci-dessous.
<script src="js/controllers.js"></script>
Nous avons besoin d'un fichier Javascript où vous définissez vos contrôleurs et leurs actions / données.
<div ng-controller="MyController as mc">
L'attribut ng-controller définit le contrôleur pour cet élément DOM et tous les éléments qui sont enfants (récursivement) en dessous.
Vous pouvez avoir plusieurs du même contrôleur (dans ce cas, MyController ) en disant ... as mc , nous donnons à cette instance du contrôleur un alias.
<h1>{{ mc.title }}</h1>
La notation {{ ... }} est une expression angulaire. Dans ce cas, cela définit le texte interne de cet élément <h1> à la valeur de mc.title .
Remarque: Angular utilise la liaison de données bidirectionnelle, ce qui signifie que, quelle que soit la manière dont vous mettez à jour la valeur mc.title , celle-ci sera reflétée dans le contrôleur et la page.
Notez également que les expressions angulaires ne doivent pas faire référence à un contrôleur. Une expression angulaire peut être aussi simple que {{ 1 + 2 }} ou {{ "Hello " + "World" }} .
<button ng-click="mc.clicked()">
ng-click est une directive angulaire, liant dans ce cas l’événement click pour que le bouton déclenche la fonction clicked() de l’instance MyController .
En gardant cela à l'esprit, écrivons une implémentation du contrôleur MyController . Avec l'exemple ci-dessus, vous écrivez ce code dans js/controller.js .
Tout d'abord, vous devez instancier l'application Angular dans votre Javascript.
var app = angular.module("MyFirstApp", []);
Notez que le nom que nous transmettons ici est identique au nom que vous avez défini dans votre code HTML avec la directive ng-app .
Maintenant que nous avons l'objet app, nous pouvons l'utiliser pour créer des contrôleurs.
app.controller('MyController', function(){
var ctrl = this;
ctrl.title = "My First Angular App";
ctrl.description = "This is my first Angular app!";
ctrl.clicked = function(){
alert("MyController.clicked()");
};
});
Remarque: Pour tout ce que nous voulons faire partie de l'instance du contrôleur, nous utilisons le mot this clé this .
C'est tout ce qui est nécessaire pour construire un contrôleur simple.
Création de contrôleurs
angular
.module('app')
.controller('SampleController', SampleController)
SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
$log.debug('*****SampleController******');
/* Your code below */
}
Note .$inject s'assurera que vos dépendances ne seront pas brouillées après minification. Aussi, assurez-vous qu'il est en ordre avec la fonction nommée.
Créer des contrôleurs, sécuriser la minification
Il existe différentes manières de protéger la création de votre contrôleur contre la minification.
La première est appelée annotation de tableau en ligne. Cela ressemble à ceci:
var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);
Le second paramètre de la méthode du contrôleur peut accepter un tableau de dépendances. Comme vous pouvez le voir, j'ai défini $scope et $http qui devraient correspondre aux paramètres de la fonction du contrôleur dans laquelle a sera la $scope et b serait $http . Notez que le dernier élément du tableau doit être votre fonction de contrôleur.
La seconde option utilise la propriété $inject . Cela ressemble à ceci:
var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}
Cela fait la même chose que les annotations de tableau en ligne mais offre un style différent pour ceux qui préfèrent une option à une autre.
L'ordre des dépendances injectées est important
Lorsque vous injectez des dépendances à l'aide du tableau, assurez-vous que la liste des dépendances correspond à la liste d'arguments correspondante transmise à la fonction de contrôleur.
Notez que dans l'exemple suivant, $scope et $http sont inversés. Cela provoquera un problème dans le code.
// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);
Utilisation de contrôleurs dans JS angulaire
Dans Angular $scope est le lien entre le contrôleur et la vue qui aide à tous nos besoins de liaison de données. Controller As est une autre manière de lier le contrôleur et la vue et est principalement recommandé d'utiliser. Fondamentalement, ce sont les deux constructions de contrôleur dans Angular (c'est-à-dire $ scope et Controller As).
Différentes manières d’utiliser Controller as sont -
controllerAs Voir la syntaxe
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
Contrôleur Syntaxe du contrôleur
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}
contrôleurs avec vm
function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
controllerAs sont des sucres syntaxiques supérieurs $scope . Vous pouvez toujours vous lier aux méthodes View et toujours accéder à $scope . L’utilisation des controllerAs constitue l’une des meilleures pratiques suggérées par l’équipe centrale. Il y a beaucoup de raisons à cela, peu d'entre eux sont -
$scopeexpose les membres du contrôleur à la vue via un objet intermédiaire. En définissantthis.*, Nous pouvons exposer exactement ce que nous voulons exposer du contrôleur à la vue. Il suit également la méthode JavaScript standard utilisée pour cela.En utilisant la syntaxe
controllerAs, nous avons un code plus lisible et la propriété parent est accessible en utilisant le nom d'alias du contrôleur parent au lieu d'utiliser la syntaxe$parent.Il encourage l'utilisation de la liaison à un objet "pointillé" dans View (par exemple, customer.name au lieu de name), qui est plus contextuel, plus facile à lire et évite tout problème de référence pouvant survenir sans "dotting".
Permet d'éviter l'utilisation d'appels
$parentdans les vues avec des contrôleurs imbriqués.Utilisez une variable de capture pour cela lorsque vous utilisez la syntaxe
controllerAs. Choisissez un nom de variable cohérent tel quevm, qui signifie ViewModel. Parce quethismot-clé est contextuel et, lorsqu'il est utilisé dans une fonction à l'intérieur d'un contrôleur, il peut changer de contexte. Capturer le contexte de ceci évite de rencontrer ce problème.
REMARQUE: l' utilisation de la syntaxe controllerAs ajoute à la référence de portée actuelle au contrôleur actuel, de sorte qu'elle soit disponible en tant que champ
<div ng-controller="Controller as vm>...</div>
vm est disponible sous la forme $scope.vm .
Création de contrôleurs angulaires sécuritaires
Pour créer des contrôleurs angulaires sans danger pour la minification, vous allez modifier les paramètres de la fonction du controller .
Le second argument de la fonction module.controller doit être passé à un tableau , où le dernier paramètre est la fonction de contrôleur , et chaque paramètre avant est le nom de chaque valeur injectée.
Ceci est différent du paradigme normal; cela prend la fonction de contrôleur avec les arguments injectés.
Donné:
var app = angular.module('myApp');
Le contrôleur devrait ressembler à ceci:
app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);
Note: Les noms des paramètres injectés ne sont pas obligés de correspondre, mais ils seront liés dans l'ordre.
Cela se réduira à quelque chose de similaire à ceci:
var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);
Le processus de minification remplacera chaque instance d' app par a , chaque instance de $Injectable1Instance avec b , et chaque instance de $Injectable2Instance avec c .
Contrôleurs imbriqués
Les contrôleurs d'imbrication enchaînent également la $scope . La modification d'une variable $scope dans le contrôleur imbriqué modifie la même variable $scope dans le contrôleur parent.
.controller('parentController', function ($scope) {
$scope.parentVariable = "I'm the parent";
});
.controller('childController', function ($scope) {
$scope.childVariable = "I'm the child";
$scope.childFunction = function () {
$scope.parentVariable = "I'm overriding you";
};
});
Maintenant, essayons de les gérer tous les deux, imbriqués.
<body ng-controller="parentController">
What controller am I? {{parentVariable}}
<div ng-controller="childController">
What controller am I? {{childVariable}}
<button ng-click="childFunction()"> Click me to override! </button>
</div>
</body>
Les contrôleurs d'imbrication peuvent avoir leurs avantages, mais une chose doit être prise en compte. L'appel de la directive ngController crée une nouvelle instance du contrôleur - ce qui peut souvent créer de la confusion et des résultats inattendus.