Blue Flower

Chercher

1. Présentation

1.1. Généralités

AngularJS est un framework MVVM (Modèle-Vue-Vue Modèle) JavaScript conçu par Google pour réaliser des Web Apps structurées et facilement maintenables. Il étend les possibilités de HTML par des directives qui, ajoutées  aux balises  classiques de HTML, facilitent la conception de templates puissantes à comportement dynamiques.
AngularJS implémente un certain nombre  de concepts notamment celui de "two-way data banding"; ce dernier  permet de traiter l'échange des données entre les différentes vues et le modèle de données d'une application web de façon bidirectionnelle.
Le two-way data binding signifie que toute mise à jour du modèle de données est immédiatement répercutée dans la vue sans qu'il ait  besoin de manipulation du DOM (Document Object Model) ou de gestion d'événements. AngularJS déplace  la logique de présentation des applications web dans le front-end et ainsi  le back-end peut-être réalisé avec d'autres technologies.

Pour mieux comprendre AngularJS, il faut voir  comment fonctionne un Browser. Un browser fonctionne en prenant en compte les événements ou les actions qui ont lieu sur une vue. Cela peut-être un clic de souris sur un bouton ou un lien, une inscription d'une données dans un "input"; chaque événement  est pris en charge par un mécanisme du browser appelé event-lopp. A partir de là, le rappel de l'événement se déroulera à l'intérieur de Javascript (AngularJS étend l'objet  event-loop)  et toutes  les manipulations ou les changements du DOM  sont   gérés par le navigateur via le JavaScript.

1.2. La Vue

Dans un Framework MVVM la Vue est assimilable à ce que voit l'utilisateur final de l'application Web. Celle-ci est créée   à partir d'un template, un fichier HTML (dans le cas D'AngularJS) enrichi des attributs et des balises  (directives) propres à AngularJS (si on développe l'application avec AngularJS bien sûr); ces directives  font partie  des concepts clé d'AngularJS.
 La Vue que voit le visiteur sur son navigateur diffère du fichier HTML puisque des éléments apparaissent ou disparaissent grâce au JavaScript, alors que le template lui ne change pas pendant toute la durée de vie de la page.

1.2. Le Contrôleur

La logique de l'application web est le cœur du code correspondant à la page; elle est assimilable au contrôleur pour une application issue d'une framework MVC. c'est-à-dire la description des actions que la page est capable de réaliser ! En pratique, la logique de l'application web est constituée de fonctions JavaScript.

1.2. Le Modèle

Le Modèle, dans AngularJS,  est l'ensemble des scopes (scope est un objet JavaScript qui associe une Vue et La logique de l'application web) de la page; c' est  un domaine dans lequel des variables (ou fonctions ) peuvent coexister. C'est  une grande famille au sein de laquelle les variables peuvent interagir sans risquer de modifier les autres familles de variables ce qui permet d'éviter les collusions et les effets de bord; les scopes sont  indépendants les uns des autres  mais au sein d'une application AngularJS ils sont liés entre eux par des liens de parenté.
On peut  représenter les familles de scopes comme un arbre généalogique; La racine de tous les scopes est le $rootScope; celui-ci est instancié lorsque AngularJS detecte la directive "ng-app" (voir la signification ci-dessous). Après le $rootScope, vient le scope du contrôleur instancié par la directive ng-controller. On verra que certaines directives créent leur propre scope au cours  de l’exécution de l’application.


2. Exemple d'une application AngularJS

La présentation du Framework AngularJS  qu'on vient de voir  introduit un certain nombre de concepts; on va les détailler  en s'appuyant sur un exemple concret. Considérons l' exemple d'une application qui liste un certain nombre d'actions à faire; dans cet exemple  le fichier "index.html" représente la Vue; ce fichier est la traduction de ce que voit l'utilisateur une fois qu'on ait saisi l'URL " siteInternet/index.html" dans un navigateur.

2.1 Exemple d'une vue avec AngularJS

 Dans le fichier index.html on  y introduit tout ce qui est nécessaire pour lancer une  application AngularJS; on fait appel aux  directives principales d'AngularJS.  Ces dernières commencent par "ng- ". La première d'entre elles ici est "ng-app"; elle  donne le nom de l'application qui est  considérée  com un module AngularJS.

Dans une application AngularJS on peut  définir plusieurs controleurs et pour faire appel à un contrôleur on utilise  la directive ng-controller au sein d'une balise HTML.

Le troisième composant MVC, c'est à dire le Modèle, est utilisé en procédant comme indiqué au sein de l'exemple cidessous avec la directive "ng-model" . Au sein d'une balise cette directive permet de lier une variable du controller à ces différentes valeurs issues de la vue; les mécanismes qui permettent cette association seront vues ultérieurement et ils sont en général transparents pour le développeur.

2.1.1 Exemple
<!DOCTYPE html>
<html lang="fr" ng-app="demoApp">
    <head>
       <title>Todo List</title> 
              <link rel="stylesheet" href="/ocamil.ovh/web/css/style.css">
         <script src="/ocamil.com/js/vendor/bower_components/angular/angular.js"></script>
        <script src="/ocamil.com/js/todoList.js"></script>
        </head>
         <body>
        <header>
           <h1>Todo List</h1>
        </header>
       <section id="todo-list" ng-controller="TodoCtrl">
            <form id="todo-form" ng-submit="addTodo()">
            <input id="new-todo" placeholder="Que devez-vous faire ?" ng-model="newTodo" />
        </form>
       <article ng-show="todos.length" ng-cloak>
        <ul id="todo-list">
        <li ng-repeat="todo in todos" ng-class="{completed: todo.completed}">
         <div class="view">
            <input class="mark" type="checkbox" ng-model="todo.completed" />
                 <span>{{todo.title}}</span>
                  <i class="fa fa-times" ng-click="removeTodo(todo)"></i>
               </div>
                 </li>
              </ul>
     <input id="mark-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)" />
     <label class="btn btn-info" for="mark-all">Tout cocher</label>
     <button class="btn btn-danger" ng-click="clearCompletedTodos()">Supprimer les tâches cochées</button>
   </article>
  </section>
 </body>
</html>

Les autres directives AngularJS seront étudiées au sein de l'article Directives

2.1.2 Détails de l'exemple

le fichier javaScript TodoList.js

Au sein du fichier TodoList.js on va définir toute l'intelligence de notre application
// js/todoList.js
'use strict';
/**
 * Déclaration de l'application demoApp
 */
var demoApp = angular.module('demoApp', [
    // Dépendances du "module"
    'todoList'
]);

La directive "ng-app" fait reference à l'application qui est est définie par le module dont le nom est "demoApp"; ce nom est l'application. En général on place la directive dans la balise <html ...>; toutefois on peut la placer dans la balise <body ...> .

Chaque application est composée d'au moins  un module, et ainsi AngularJS  nous fournit un espace de noms pour cela en utilisant la fonction AngularJS  angular.module (...) dans le fichier ".js" comme on l'a vu ci-dessus.

précédent