AngularJS je m'y mets !

Les scopes

Je vous ai déjà parlé des scopes à l'étape 4. Je ne vous en avais pas dit grand chose étant donné le peu d'élements que j'avais alors évoqués. On va revenir maintenant sur ce point important. Quand vous créez une application AngularJS il se crée un scope racine. Lorsque vous créez un contrôleur vous générez un scope enfant du scope racine. Ce scope enfant hérite du scope racine à la mode Javascript, c'est à dire par prototype, donc sans classe. Pour celui (ou celle) qui est habitué à l'héritage classique c'est un peu dépaysant. Un prototype n'est pas une classe mais un objet bien vivant. Donc en Javascript un objet hérite tout simplement d'un autre objet.

Lorsque dans du code Javascript on tombe sur une propriété d'un objet, cette propriété est évidemment recherchée dans cet objet. Si elle n'est pas trouvée on remonte la chaîne des prorotypes jusqu'à la trouver. Si on ne la trouve pas on génère une erreur. Je vous raconte tout ça parce que les scopes justement répondent à ce fonctionnement avec une chaîne de prototypes. Je vais prendre un exemple simple pour vous montrer les conséquences de cela :

<div ng-app>
	<div class="form-group">
		<label for="root">Scope racine</label>
		<input type="texte" class="form-control" id="root" placeholder="Entrez du texte" ng-model="message">
	</div>
	<div class="form-group" ng-controller="Controleur">
		<label for="ctrl">Scope enfant</label>
		<input type="texte" class="form-control" id="ctrl" placeholder="Entrez du texte" ng-model="message">
	</div>
	<script>
		function Controleur($scope) {}
	</script>
<div>

J'ai fait un peu de mise en forme avec Twitter Bootstrap et j'ai aussi ajouté du style pour visualiser les scopes avec un petit liseré rouge. Vous allez faire le premier test suivant : entrez du texte dans la première zone de saisie. Vous constatez que la seconde se remplit avec le même texte, pourquoi ? J'ai créé un contrôleur mais je n'ai pas mis de code d'initialisation. Au départ dans le scope enfant la variable message n'existe pas. Hors il y a un lien au niveau du contrôle. La variable message n'est pas trouvée au niveau du scope enfant, elle est donc recherchée en remontant la chaîne des prototypes, donc au niveau du scope racine. Ici elle existe parce qu'on l'a crée en faisant notre saisie. Tant que vous tapez du texte dans le premier contrôle le second en est l'image fidèle. Maintenant tapez un peu de texte dans le second contrôle et revenez en entrer dans le premier. Maintenant vous vous rendez compte que les deux contrôles sont devenus indépendants. Le fait de saisir du texte dans le second contrôle a créé la variable message au niveau du scope enfant.

Si vous modifiez le code en initialisant la variable message dans le contrôleur, alors les deux contrôles sont immédiatement indépendants. Il y a une variable message dans le scope racine et une variable du même nom dans le scope enfant :

function Controleur($scope) {
 	$scope.message = "mon message";
}
Suivant

Retour à l'accueil...