AngularJS je m'y mets !

Le scope

Je vous ai dit qu'AngularJS respecte le modèle MVC, pour le moment on a rien vu de tel ! On a juste utilisé des procédures "magiques" pour obtenir des résultats. Pour rappel le modèle MVC est composé de ces 3 entités :

Dans nos exemples jusqu'à présent on n'a pas créé de contrôleur et pourtant ça fonctionne. Pour le modèle on a vu que la directive ngInit permet d'initialiser des valeurs. La vue est générée à partir de la page HTML avec les doubles accolade mais sans qu'on sache vraiment comment ça se passe. On va donc regarder un peu dans la machine pour comprendre comment ça fonctionne...

Reprenons ce code qui fait une liaison entre un contrôle et un affichage :

<div ng-app>
	<input id="nom" type="text" ng-model="nom" ng-init="nom='Toto'" placeholder="Entrez votre nom ici">
	<h1>Bonjour {{nom}} !</h1>
</div>

Si vous avez la curiosité de regarder le code généré vous allez trouver cela :

<div class="ng-scope" ng-app="">
	<input class="ng-pristine ng-valid" id="nom" ng-model="nom" ng-init="nom='Toto'" placeholder="Entrez votre nom ici" type="text">
	<h1 class="ng-binding">Bonjour  !</h1>
</div>

On voit que quelques classes sont apparues : ng-scope, ng-pristine, ng-valid et ng-binding. Ces classes ont été créées lors de la compilation du code par AngularJS.

Mais ce qu'on ne voit pas c'est qu'il a aussi été créé un scope. C'est un objet qui a pour fonction de :

Il est organisé de façon hiérarchique un peu à l'image du DOM. Si nous observons notre exemple au démarrage nous avons la création d'un scope racine. On peut le trouver en utilisant l'extension Batarang des outils de développement de Chrome :

$id: "002"
$parent: null
$root: e
__private__: Object
nom: "Toto"
this: e
__proto__: Object

On voit une propriété nom qui a pour valeur "Toto". Si vous explorez cet objet vous pourrez trouver d'autres informations comme par exemple les watchers. Mais il n'est pas très utile de fouiller tout ça étant donné que les scopes sont automatiquement créés ! On aura l'occasion d'explorer les scopes dans une phase ultérieure avec une application plus fournie. Si vous voulez déjà explorer un peu plus ce domaine vous pouvez consulter la documentation.


Retour à l'accueil...