AngularJS je m'y mets !

Les contrôleurs

Nous avons vu quelques exemples d'utilisation d'AngularJS avec une approche un peu "magique". Tout se passe dans les coulisses, on s'est contenté d'utiliser des directives et des expressions. On a vu également qu'il se construit un scope pour renseigner la vue. Au niveau de cette vue nous avons adopté une démarche qui ne respecte pas trop le MVC parce que nous avons intialisé des valeurs, ce qui est normalement la tâche du contrôleur au niveau du modèle. Nous allons donc mettre maintenant en oeuvre un contrôleur pour nous rendre plus conforme au modèle MVC avec un premier exemple simple :

<div ng-app ng-controller="TextController">
	<p>{{texte}}</p>
	<script>
		function TextController($scope) {
			$scope.texte = 'Bonjour !';
		}
	</script>
</div>

{{texte}}

Le contrôleur est une fonction Javascript qui comporte un paramètre. Celui-ci est important parce qu'il correspond à une référence du scope, on fait donc une injection de dépendance. Le contrôleur ici crée et initialise la propriété texte du scope. Une expression dans la vue permet ensuite l'affichage de cette valeur. Le contrôleur est déclaré avec la directive ngController, cette déclaration a aussi pour effet d'implicitement créer un scope pour ce contrôleur. L'emplacement de la directive ngController n'est pas anodin parce que le scope correspondant va concerner tout ce qui se trouve à l'interieur de la balise correspondante.

Pour avoir une visualisation de cette organisation voici un petit schéma inspiré de la documentation :

Suivant

Retour à l'accueil...