AngularJS.

Présentation au sujet: "AngularJS."— Transcription de la présentation:

1 AngularJS

2 JavaScript – Historique
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

3 JavaScript – Au début

4 JavaScript – Problèmes
Déclaration facultative Incohérences ( 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 ?

5 JavaScript – Renouveau
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 !

6 AngularJS – What’s it ? 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

7 AngularJS – What’s it ? 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

8 AngularJS – Exemple

9 AngularJS – Exemple

10 AngularJS – Exemple

11 AngularJS – Les attributs ng-*
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

12 AngularJS – Gestion de la vue
Gestion du DOM facultative $scope Two-way data binding Très rapide (redraw minimisé) Syntaxe à base de {{ le code }}

13 AngularJS – Gestion de la vue
Ng-*: change, bind, init, style, mouseup, class, repeat

14 AngularJS – Les filtres
Traitement ou filtrage des données Simplification syntaxique Différents filtres pré-inclus (filter, orderBy, date, currency)

15 AngularJS – Les services
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.)

16 AngularJS – Les contrôleurs
Propre $scope Utilise des dépendances

17 AngularJS – Les directives
Balise HTML personnalisée Syntaxe complète, par attribut ou par classe Propre $scope, template, contrôleur Très pratique pour les composants graphiques

18 AngularJS – Le routeur Serveur Web Application Web (SPA)
transfère le routeur effectue une requête Ajax transfère contrôleur + template Application Web (SPA) en fonction de la route choisie exécute le contrôleur et compile le template Page d’application

19 AngularJS – Conclusion
Avantages Inconvénients 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

20 AngularJS – Fin Questions ? Merci