Angular JS - perso.liris.cnrs.fr · le Data-binding • Data-binding bidirectionnel (two-way data...

19
Angular JS Faiza AIT-AMARA Pierre CAMILLI Gladys SOLER 1

Transcript of Angular JS - perso.liris.cnrs.fr · le Data-binding • Data-binding bidirectionnel (two-way data...

Angular JS Faiza AIT-AMARA Pierre CAMILLI Gladys SOLER 1

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

4 Installation

Description •  Modèle MVC •  Data-Binding •  Injection de dépendances •  Manipulation du DOM au moyen de directives

5 Principales fonctionnalités

6 Le modèle MVC

Modèle MVC

Modèle

Vue

Contrôleur

7 Le modèle MVC

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

Mais encore

•  Les filtres •  Gestion de routes •  Les tests

12

Démonstration

13

Utilisation des framework 14

•  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

Angular 1 vs Angular 2 17

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