angular js - perso.liris.cnrs.fr · le data-binding • data-binding bidirectionnel (two-way data...
Post on 12-Sep-2018
235 Views
Preview:
TRANSCRIPT
Sommaire
• Présentation de Angular JS • Installation • Les caractéristiques d’Angular JS • Démonstration • Les autres framework • Angular JS 2 • Conclusion
2
Présentation
• Framework Javascript libre et opensource • Développé en 2009 par Google • Objectif principal : réduction de la quantité de code • Permet l’édition de données dans un environnement HTML5
3
Description • Modèle MVC • Data-Binding • Injection de dépendances • Manipulation du DOM au moyen de directives
5 Principales fonctionnalités
le Data-binding
• Data-binding bidirectionnel (two-way data binding) • Mise à jour automatique du modèle lors d’une modification de la vue
et inversement • Le binding se fait à l’aide des directives • Plus besoin de modifier le DOM (géré par Angular) • Assuré par la variable $scope
8
Directives • ng-app • ng-controlleur • ng-model • ng-click, ng-mouseover, ng-keydown… : gère les évènements
9 Les directives
• Permet aux modules de ne pas se soucier de l’instanciation des modules dont ils dépendent. Angular se charge de les instancier et de les injecter lors de l’appel du module
• Intérêts : • Simplicité • Fiabilité • Réutisabilité • Tests
10 Injection de dépendances
Les services
• Singletons • Services natifs : $location, $route, $http • Retourne un objet qui possède un ensemble de fonctions • Trois types de services :
• Factory • Service • Provider
11
• Annoncé en septembre 2014 • Refonte complète d’Angular • Actuellement en phase de beta • Sortie officielle prévue mi-2016
Angular2 15
• Augmentation des performances • Augmentation de la productivité • Adaptation aux supports mobiles (mobile first) • Adaptation aux nouveaux standards du web (ShadowDom) • Concepts disparaissant (two-way data binding, controllers,
scope, etc...) • Migration possible de Angular 1 vers 2
Angular2 16
Conclusion
• Avantages : • Facilite le code grâce au Data-binding • Manipulation propre du DOM grâce aux directives
• Inconvénients : • Difficile à appréhender au début • Installation compliquée
18
Sources
• https://builtwith.angularjs.org/ • https://openclassrooms.com/courses/developpez-vos-applications-
web-avec-angularjs • https://fr.wikipedia.org/wiki/AngularJS • https://en.wikipedia.org/wiki/AngularJS • http://blog.webnet.fr/angularjs-tour-dhorizon-dun-framework-en-plein-
essor/ • http://www.lemondeinformatique.fr/actualites/lire-10-frameworks-
javascript-parmi-les-plus-prometteurs-55309.html • http://blog.xebia.fr/2015/12/14/angular-2-presentation/
19
top related