AngularJS - Présentation (french)
22
Yacine Rezgui – www.yrezgui.com AngularJS 11/10/2012 1
-
Upload
yacine-rezgui -
Category
Technology
-
view
6.002 -
download
1
description
This is a french presentation of AngularJS that I presented at the JS Sophia Meetup #4.
Transcript of AngularJS - Présentation (french)
2
Qui suis-je ?
11/10/2012
Yacine Rezgui Développeur web & étudiant en licence
pro 7 ans dans le développement web 20 ans (seulement ?)
3
JavaScript – Historique
11/10/2012
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
4
JavaScript – Au début
11/10/2012
5
JavaScript – Problèmes
11/10/2012
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 ?
6
JavaScript – Renouveau
11/10/2012
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 !
7
AngularJS – What’s it ?
11/10/2012
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
8
AngularJS – What’s it ?
11/10/2012
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
9
AngularJS – Exemple
11/10/2012
10
AngularJS – Exemple
11/10/2012
11
AngularJS – Exemple
11/10/2012
12
AngularJS – Les attributs ng-*
11/10/2012
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
13
AngularJS – Gestion de la vue
11/10/2012
Gestion du DOM facultative $scope Two-way data binding Très rapide (redraw minimisé) Syntaxe à base de {{ le code }}
14
AngularJS – Gestion de la vue
11/10/2012
Ng-*: change, bind, init, style, mouseup, class, repeat
15
AngularJS – Les filtres
11/10/2012
Traitement ou filtrage des données Simplification syntaxique Différents filtres pré-inclus (filter, orderBy,
date, currency)
16
AngularJS – Les services
11/10/2012
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.)
17
AngularJS – Les contrôleurs
11/10/2012
Propre $scope Utilise des dépendances
18
AngularJS – Les directives
11/10/2012
Balise HTML personnalisée Syntaxe complète, par attribut ou par
classe Propre $scope, template, contrôleur Très pratique pour les composants
graphiques
19
AngularJS – Le routeur
11/10/2012
Serveur Web
Application Web (SPA)
transfère le routeur
en fonction de la route choisie
effectue une requête Ajax transfère
contrôleur + template
Page d’applicatio
n
exécute le contrôleur et
compile le template
20
AngularJS – Démo
11/10/2012
Loading…Please waithttp://yrezgui.github.com/kodigon/
21
AngularJS – Conclusion
Two-way data binding Projet soutenu par
Google Pattern MVC respecté Directives Facilement testable Modulable
Syntaxe déroutante Absence de gestion
du DOM Aucun composant
graphique Projet encore jeune
11/10/2012
Avantages Inconvénients
22
AngularJS – Fin
11/10/2012
Questions ?
Merci
