This is a french presentation of AngularJS that I presented at the JS Sophia Meetup #4.

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