AngularJS

<ng/>

Introduction à AngularJS

HTML & JavaScript pour les applications web

Thierry Chatel
tchatel@gmail.com

www.methotic.com

un framework MVC en JavaScript pour créer la partie cliente des applis web
des templates déclaratifs en HTML + un compilateur HTML
80 Ko (minifié)
un projet Open Source (GitHub, MIT)
financé par Google

Miško Hevery

Vojta Jína

Igor Minar

21 mars 2012 - 1.0.0rc2 - “silence-absorption”
14 mars 2012 - 1.0.0rc1 - “moiré-vision”
17 janv. 2012 - 0.10.6 - “bubblewrap-cape”
8 nov. 2011 - 0.10.5 - “steel-fist”
21 août 2011 - 0.9.19 - “canine-psychokinesis”

Côté serveur (PHP, JSP, etc.)

accès direct aux données
validation plus cohérence (peut-être)
RIA plus complexe
- logique de présentation fragmentée
- code des pages difficile à lire

Côté client (Flex, GWT, clients JS)

plus adapté pour des RIA
séparation logique métier / présentation
moins de charge du serveur
mode déconnecté (HTML5)
même serveur pour web, smartphones, etc.

    
    

    ===script===
    $(function() {
      var name = $('#name3');
      var greeting = $('#greeting3');

      function update() {
        greeting.text('Hello ' + name.val() + '!');
      }
      update();

      name.bind('keydown', function() {
        setTimeout(update, 0);
      });
    });
    ===/script===

      
      Hello {{firstName}}!

jQuery : manipulation de DOM + événements
AngularJS : applications web
- utilise jQuery
- ou un mini jQuery embarqué

“Ce que serait le HTML s’il avait été conçu pour les applications web”

séparation : logique de présentation (contrôleur) / vue
“data binding”
dispense des manipulations de DOM
dispense de la gestion des événements

Two-way data binding...

Pour tester, il faut...

un environnement de test
du code testable

Tests unitaires + Tests fonctionnels (E2E)

JasmineJS
JsTestDriver
Mocks
Continuous Integration

C'est facile avec AngularJS :

Séparation stricte de la vue et de la logique
Injection de dépendances
Aucun état global

C'est facile avec AngularJS :

Outil d'exécution de scénarios
Transforme l'asynchrone en synchrone (pas de callbacks)
Langage spécialisé (DSL) pour les actions sur la page web et le navigateur

augmente le niveau d'abstraction (DOM -> appli)
nécessite beaucoup moins de code
rend les applications web testables
fonctionne bien avec d'autres librairies (jQuery)
aide à structurer de grosses applications

Démos...

la validation des formulaires
la création de widgets
l'inclusion de templates
les applis multi-pages, avec templates et routage
la gestion de l'historique du navigateur
etc.