Le document présente AngularJS, un framework JavaScript créé par Google pour le développement d'applications web à page unique (SPA), en mettant en avant ses caractéristiques comme le data binding bidirectionnel et l'architecture MVC. Il aborde aussi les avantages et inconvénients de ce framework, ainsi que sa compatibilité avec divers navigateurs. Enfin, le document propose des exemples et des éléments clés tels que les directives, services et gestion de la vue.

1. 1
AngularJS
11/10/2012 Yacine Rezgui – www.yrezgui.com

2. Qui suis-je ?
2
 Yacine Rezgui
 Développeur web & étudiant en licence pro
 7 ans dans le développement web
 20 ans (seulement ?)
11/10/2012

3. JavaScript – Historique
3
 Créé en 1995 par Brendach Eich
 Pensé pour les navigateurs
 Syntaxe ECMAScript (utilisé par d’autres
langages)
 Langage de programmation objet orienté
prototype
 Actuellement en version 5
11/10/2012

4. JavaScript – Au début
4
11/10/2012

5. JavaScript – Problèmes
5
 Déclaration facultative
 Incohérences (www.wtfjs.com)
 APIs HTML implémentées différemment
 Prototypage (pas vraiment un problème,
question de goûts)
 Portée des variables
 Utilisé presque que pour gérer le DOM
 Jalousie ?
11/10/2012

6. JavaScript – Renouveau
6
 L’ère de PrototypeJS et du web 2.0
 Les challengers comme jQuery et Mootools
 Toolkit complet tel que ExtJS et Dojo
 Framework JS avec Backbone.js et
KnockoutJS
 Et bien sûr AngularJS !
11/10/2012

7. AngularJS – What’s it ?
7
 Framework JavaScript pour des SPA (Single
Page Application)
 Créé en Octobre 2010 par des développeurs
de chez Google
 Pattern MVC
 Compatible avec Internet Explorer 7+ et autres
navigateurs modernes
 Actuellement en version 1.0.2
11/10/2012

8. AngularJS – What’s it ?
8
 La logique de l’application est déporté en
grande partie dans le navigateur (client-side)
 Le serveur devient une API qui valide les
données et renvoie une réponse
 Données renvoyés au format XML, JSON via
une architecture de web services
(SOAP, REST, XML-RPC)
 Fluidité pour l’application et charge du serveur
nettement amoindrie
11/10/2012

9. AngularJS – Exemple
9
11/10/2012

10. AngularJS – Exemple
10
11/10/2012

11. AngularJS – Exemple
11
11/10/2012

12. AngularJS – Les attributs ng-*
12
 Attributs dédiés à AngularJS
 Dynamisent le HTML
 Gestion des évènements
 Modifient le style des éléments
 Bref, il y en a pour tous les goûts
11/10/2012

13. AngularJS – Gestion de la vue
13
 Gestion du DOM facultative
 $scope
 Two-way data binding
 Très rapide (redraw minimisé)
 Syntaxe à base de {{ le code }}
11/10/2012

14. AngularJS – Gestion de la vue
14
 Ng-*:
change, bind, init, style, mouseup, class, repeat
11/10/2012

15. AngularJS – Les filtres
15
 Traitement ou filtrage des données
 Simplification syntaxique
 Différents filtres pré-inclus
(filter, orderBy, date, currency)
11/10/2012

16. AngularJS – Les services
16
 Classes communes aux contrôleurs
 Évite la redondance du code
 Singletons
 Parties privée et publique distinctes
 Services prédéfinis par AngularJS
($http, $route, $log, etc.)
11/10/2012

17. AngularJS – Les contrôleurs
17
 Propre $scope
 Utilise des dépendances
11/10/2012

18. AngularJS – Les directives
18
 Balise HTML personnalisée
 Syntaxe complète, par attribut ou par classe
 Propre $scope, template, contrôleur
 Très pratique pour les composants graphiques
11/10/2012

19. AngularJS – Le routeur
19
Serveur Web
transfère le
effectue une requête routeur
Ajax transfère
Application Web contrôleur + template
(SPA)
en fonction de la route
choisie
exécute le contrôleur
et compile le template
Page
d’application
11/10/2012

20. AngularJS – Démo
20
Loading…Please wait
http://yrezgui.github.com/kodigon/
11/10/2012

21. AngularJS – Conclusion
21
Avantages Inconvénients
 Two-way data binding  Syntaxe déroutante
 Projet soutenu par  Absence de gestion du
Google DOM
 Pattern MVC respecté  Aucun composant
 Directives graphique
 Facilement testable  Projet encore jeune
 Modulable
11/10/2012

22. AngularJS – Fin
22
Questions ?
Merci
11/10/2012