Blue Flower

Chercher

3. Angular et JavaScript

3.1. Généralités

Par construction, JavaScript, langage de base d'AngularJS, est un langage interprété, en l'occurrence  ici il l'est directement par le navigateur. Les langages interprétés, contrairement aux langages compilés, sont dispensés de beaucoup de contraintes par exemple la gestion de la mémoire (voir autres cours pour ces définitions). AngularJS déporte toute la logique de présentation des applications web developpées  avec lui vers le côté front-end;  il permet  l'échange de données entre la vue et le modèle de données de façon transparente et automatique.

AngularJS intégre AJAX et embarque une version allégée de JQuery un autre framework JavaScript.

(à suivre)

3.2 Qu'est ce qu'un scope (portée)

Dans JavaScript, le scope (la portée ou le périmètre) d'une variable ou d'une fonction est relative au contexte courant  du code concerné. Cette portée peut être globale ou locale. Comprendre la notion de portée  des variables en JavaScript permet de maîtriser et de rendre le code maintenable.

Global scope (Portée globale)

Quand une  variable est définie comme suit en dehors d'une fonction particulière, on dit  qu'elle a une portée globale:

// portée globale
var name = 'Todd' ;

La portée globale d'une variable n'est ni bonne ni mauvaise en soi si on maîtrise bien son code. Les variables qui ont une portée globale sont nécessaires pour  créer des Modules/APIs utilisables tout au long d'une application.

Scope locale (portée local)

Dans une application JavaScript quand on parle de portée globale ce la concerne toute l'application donc on a qu'une seule portée globale; dans chaque fonction de l'application on peut définir des variable (objets) à  portée locale en fonction des besoins. C'est ce que montre l'exemple ci-dessous:

1. // Scope A: Tout ce qui est ici a une portée globale
2. var myFunction = function () {
3. // portée B: tout ce qui est ici a une portée Locale
};

Toute objet de portée locale est invisible dans le périmètre globale; c'est ce qu' illustre l'exemple ci-dessous:

1. var myFunction = function () {
2. var name = 'Todd' ;
3. console.log (name); // Todd <-- c'est ce qu'on a en sortie
};
// Uncaught ReferenceError: name is not defined <-- la variable name n'est pas connu ici
console.log (name);

3.3 Scope dans AngularJS

Dans AngularJS un scope est un objet JavaScript qui associe une Vue et un Controller. Il correspond au contexte d’exécution d'une portion de la vue ou de toute une vue. Il référence à la fois des objets du modèle de données de l'application et des méthodes contextuelles. Le scope porte ainsi le modèle de données qu'on passe  à une vue ou une partie d'une vue. Pour réaliser cette association, AngularJS s'appuie sur le concept de "two-way data binding".  C'est le Controller qui permet d'initialiser les données dont  la vue a besoin et cela se réalise via des changements au sein de l'objet $scope

 

Dans le cas d'un scope directement relié à un contrôleur (avec l'utilisation de la directive ngController), ce dernier permet d'assurer une persistance des données par son unicité et son partage entre le contrôleur et la portion de vue associée. Dans une application AngularJS Les scopes sont reliés de manière hiérarchique. La structure d'organisation des scopes d'une application sont sous forme d'arbre qui ressemble très sensiblement à la structure HTML des vues.
Au sommet de l'arbre, il y a le rootScope. AngularJS, via le service $rootScope, permet d'accéder et d'injecter dans n'importe quel contrôleur d'une application le scope racine de l'arbre, de regrouper directement ou indirectement sous la forme d'un arbre tous les objets scopes initialisés dans une application AngularJS.
Les scopes sont gérées par l'utilisation de certaines directives (ngController, ngRepeat, etc...). A chaque création d'un scope, AngularJS utilise la méthode $new, ce qui a pour effet de créer un scope et de l'ajouter à  la liste des enfants du scope père. La création de ce scope fils met en place la technique de l'héritage par prototype (voir cours  JavaScript). Il sera donc possible d'appeler une méthode du parent depuis le scope enfant.

Comment utiliser le $scope? 
Les données des Scopes évoluent au travers de son cycle de vie  lors du chargement de l'application au sein du browser.  Comprendre le cycle de vie d'un scope permet de comprendre les inter-actions des scopes et les autres composants d'AngularJS.
Dans une application AngularJS, les données d'une scope dans son cycle de vie, passent  par des phases qui permettent de modifier:

  • La View (La vue)  une page HTML
  • Le Model (Le modèle) représente les données disponibles pour la vue courante.
  • Le Controller (le Contrôleur) est la fonction JavaScript qui permet de faire/changer/retirer/contrôler les données.

Quand on réalise un Controller dans AngularJS, on passe l'objet $scope en paramètre à la fonction "controller" et ainsi on initialise le scope (voir exemple d'application AngularJS). Le scope racine est créé par injection par l'objet $injector quand l'application est traitée via Bootstrap; pendant le linkage de l'application d'avec le template, il y a parfois une création de scopes fils. 


 4. AngularJS context

Quand une application AngularJS s’exécute sur un navigateur web, AngularJS étend l'objet "event-lop" du browser et crée ainsi un contexte AngularJS. Au sein de ce contexte s’exécutent certains objets ou méthodes comme  $watch,  $apply, $digest, dirty-checking. 
Le navigateur, Pour traiter, Dans le flux normal  des actions ou des événements qui lui sont soumis,  exécute des call-back  enregistrés avec un événement et  lorsque l'événement est lancé (l'événement peut-être  un click  sur un lien) les actions ou les événements associés se déclenchent. C'est ce qui se passe  lorsqu'une page se charge, lorsqu'une demande $http revient du serveur, lors des mouvements de souris ou de clicks de bouton sur une vue.
Quand un événement est déclenché au sein du browser, JavaScript crée un "objet événement" et exécute toutes les fonctions qui sont à l'écoute des événements  spécifiques liés à cet "objet événement". le call-back enregistré avec l'événement  fonctionne à l'intérieur de la fonction JavaScript, renvoie au navigateur tout ce qui peut mettre à jour le DOM (la vue affichée).
Les événements se déclenchent successivement  au sein du navigateur (deux événements ne peuvent fonctionner en même temps). Le navigateur attend la fin d'un gestionnaire d'événements  avant de déclencher le prochain gestionnaire.


 5. En résumé

AngularJS étend l'objet "event-loop" du browser et  crée un context  AngularJS; au sein de ce context se trouve de nouveaux concepts (la plupart de ces concepts ne sont pas manipulés directement par les développeurs) qui permettent de réaliser, côté front-end, des applications web dynamiques et  facilement maintenables. Dans les prochains articles on va voir comment ces concepts s'articulent pour donner vie à des applications web SPA (Single Page Application).

précédent