1             AngularJS11/10/2012    Yacine Rezgui – www.yrezgui.com
Qui suis-je ?2       Yacine Rezgui       Développeur web & étudiant en licence pro       7 ans dans le développement we...
JavaScript – Historique3       Créé en 1995 par Brendach Eich       Pensé pour les navigateurs       Syntaxe ECMAScript...
JavaScript – Au début4                            11/10/2012
JavaScript – Problèmes5       Déclaration facultative       Incohérences (www.wtfjs.com)       APIs HTML implémentées d...
JavaScript – Renouveau6       L’ère de PrototypeJS et du web 2.0       Les challengers comme jQuery et Mootools       T...
AngularJS – What’s it ?7       Framework JavaScript pour des SPA (Single        Page Application)       Créé en Octobre ...
AngularJS – What’s it ?8       La logique de l’application est déporté en        grande partie dans le navigateur (client...
AngularJS – Exemple9                          11/10/2012
AngularJS – Exemple10                           11/10/2012
AngularJS – Exemple11                           11/10/2012
AngularJS – Les attributs ng-*12        Attributs dédiés à AngularJS        Dynamisent le HTML        Gestion des évène...
AngularJS – Gestion de la vue13        Gestion du DOM facultative        $scope        Two-way data binding        Trè...
AngularJS – Gestion de la vue14        Ng-*:         change, bind, init, style, mouseup, class, repeat                   ...
AngularJS – Les filtres15    Traitement ou filtrage des données    Simplification syntaxique    Différents filtres pré-...
AngularJS – Les services16        Classes communes aux contrôleurs        Évite la redondance du code        Singletons...
AngularJS – Les contrôleurs17        Propre $scope        Utilise des dépendances                                   11/1...
AngularJS – Les directives18        Balise HTML personnalisée        Syntaxe complète, par attribut ou par classe      ...
AngularJS – Le routeur19                                Serveur Web                                          transfère le ...
AngularJS – Démo20            Loading…Please wait     http://yrezgui.github.com/kodigon/                            11/10/...
AngularJS – Conclusion21           Avantages                 Inconvénients    Two-way data binding      Syntaxe déroutan...
AngularJS – Fin22             Questions ?     Merci                       11/10/2012
Prochain SlideShare
Chargement dans…5
×

AngularJS - Présentation (french)

15 265 vues

Publié le

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

Publié dans : Technologie
4 commentaires
4 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
15 265
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 131
Actions
Partages
0
Téléchargements
381
Commentaires
4
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×