AngularJS - Présentation (french)

14,399 views
14,136 views

Published on

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

Published in: Technology
4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
14,399
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
344
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

AngularJS - Présentation (french)

  1. 1. 1 AngularJS11/10/2012 Yacine Rezgui – www.yrezgui.com
  2. 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. 3. JavaScript – Historique3  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. 4. JavaScript – Au début4 11/10/2012
  5. 5. JavaScript – Problèmes5  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. 6. JavaScript – Renouveau6  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. 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. 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. 9. AngularJS – Exemple9 11/10/2012
  10. 10. AngularJS – Exemple10 11/10/2012
  11. 11. AngularJS – Exemple11 11/10/2012
  12. 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. 13. AngularJS – Gestion de la vue13  Gestion du DOM facultative  $scope  Two-way data binding  Très rapide (redraw minimisé)  Syntaxe à base de {{ le code }} 11/10/2012
  14. 14. AngularJS – Gestion de la vue14  Ng-*: change, bind, init, style, mouseup, class, repeat 11/10/2012
  15. 15. AngularJS – Les filtres15 Traitement ou filtrage des données Simplification syntaxique Différents filtres pré-inclus (filter, orderBy, date, currency) 11/10/2012
  16. 16. AngularJS – Les services16  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. 17. AngularJS – Les contrôleurs17  Propre $scope  Utilise des dépendances 11/10/2012
  18. 18. AngularJS – Les directives18  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. 19. AngularJS – Le routeur19 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. 20. AngularJS – Démo20 Loading…Please wait http://yrezgui.github.com/kodigon/ 11/10/2012
  21. 21. AngularJS – Conclusion21 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. 22. AngularJS – Fin22 Questions ? Merci 11/10/2012

×