AngularJS

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

JavaScript – Au début

JavaScript – Problèmes 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 ?

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 !

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

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

AngularJS – Exemple

AngularJS – Exemple

AngularJS – Exemple

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

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

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

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

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

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

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

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

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

AngularJS – Fin Questions ? Merci