AngularJS - Présentation (french)

1

Yacine Rezgui – www.yrezgui.com

AngularJS11/10/2012

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