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
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
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
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