Introduction à une techno web à la mode AngularJS

Transcription

1 Introduction à une techno web à la mode AngularJS Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht.fr

2 Objectifs du cours Pouvoir répondre aux questions suivantes : 1) Pourquoi AngularJS? 2) Où se positionne-t-il dans le développement web? rapport à JEE par exemple? 3) Comment l'utilise-t-on? 2

3 Plan Contexte Problématiques AngularJS Conclusion

4 Aperçu Avant de se lancer

5 Bref aperçu avant de se lancer (extrait de votre support de cours)

6 Bref aperçu avant de se lancer (extrait de votre support de cours)

7 Contexte Web dynamique

8 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations produites par le même lien varient d'un utilisateur à l'autre. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Le site reconnaît chaque utilisateur Construit un contenu en fonction du user 8

9 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations produites par le même lien varient avec le temps (peu être très court). 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Le site se met à jour dynamiquement sans l'admin system L'utilisateur est directement à l'origine 9

10 Contexte : App. web dynamiques (rappel rapide) Caractéristiques d'une application web dynamique Les informations présentées sur la même page varient suivant les actions de l'utilisateur. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. La vue prend des initiatives toute seule Modifie des bouts de la page Peut contacter un serveur distant L'utilisateur est indirectement à l'origine 10

11 Contexte : App. web dynamiques (rappel rapide) Comment était implantée une app. web dyn, à l'époque? Un script côté serveur (CGI par exemple) Reçoit la requête Identifie l'utilisateur et génère une page HTML Pb. 1 Conséquences (pour le développeur) Le script est volumineux Illisible Difficile à maintenir et à faire évoluer 11

12 Contexte : App. web dynamiques (rappel rapide) Comment était implantée une app. web dyn, à l'époque? Toute action du client sur la page Nécessite le contact du serveur La régénération de la page (toute entière) Pb. 2 Même si la modification était minime Conséquences (pour le client web) Les temps de réponse sont longs (trafic sur le réseaux) Le serveur sature très vite (génération de la page entière, IO) 12

13 Contexte MVC

14 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 14

15 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 15

16 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Organise le code de l'application en 3 catégories Les structures de données des informations que manipulent l'app. Contient le code métier C'est le Modèle Le code qui construit la façon dont le modèle est présenté Pb. 1 C'est la Vue Les contrôles Contrôle des requêtes. MAJ modèle C'est le Contrôle 16

17 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Plusieurs technos permettent de faire du MVC PHP JEE Pb. 1 Les EJB pour le modèle Les servlets pour le contrôle Les JSP pour la vue Etc. La dynamicité de l'app. web se traduit par celle de la «vue» 17

18 Contexte : App. web dynamiques (rappel rapide) MVC : un guide de programmation au secours du développeur Plusieurs technos permettent de faire du MVC PHP JEE Pb. 1 Les EJB pour le modèle Les servlets pour le contrôle Les JSP pour la vue Etc. La dynamicité de l'app. web se traduit par celle de la «vue» 18

19 Contexte Zoom sur la vue

20 Contexte : App. web dynamiques (rappel rapide) Le DOM Structure de données représentant votre page dans le navigateur Possibilité de le modifier via java script (JS) Ajout ou modification d'éléments Le navigateur prend en compte (à chaud) les modifications Pb. 2 Ne se modifie pas de la même façon sur tous les navigateurs Non standardisation des navigateurs 20

21 Contexte : App. web dynamiques (rappel rapide) Modification dynamique du DOM au secours du client web Comment le développeur s'en sert pour modifier une zone Un code JS dans la vue soumet une requête au serveur Le serveur traite la requête Le serveur retourne les informations nécessaires pour la MAJ de la vue Un code JS dans la vue MAJ la vue en modifiant le DOM Pb. 2 Conséquences La logique de la MAJ de la page est placée côté client Peu de trafic sur le réseau (bon pour le temps de réponse) 21

22 Contexte : App. web dynamiques (rappel rapide) Modification dynamique du DOM au secours du client web Plusieurs technos telles que Java script : la renaissance Ajax Pb. 2 22

23 Problématiques Problème 1 Application du MVC Problème 2 Testabilité

24 Problématiques La mise en pratique du MVC n'est pas totale Le MVC est essentiellement respecté côté serveur Or, l'analyse des codes des app. existantes montrent que Besoin du MVC au niveau de la machine cliente (sans s'en rendre compte) Le DOM est un modèle Une partie du contrôle a été transférée sur le client Pour éviter les transits sur le réseaux 24

25 Problématiques La mise en pratique du MVC n'est pas totale 25

26 Problématiques La mise en pratique du MVC n'est pas totale MVC devient : M+(MVC)+C Le backend implante le «M» Le client implante la vue qui est maintenant un mini MVC Le «M» c'est le DOM Le «V» est vide Le «C» est le premier niveau de contrôle Le backend implante le «C» (le second niveau de contrôle) 26

27 Problématiques L'application du MVC n'est pas totale Ce MVC côté client n'est pas pris en compte par les technos de dev. actuelles Conséquences Il est mal programmé Mélange du modèle, de la vue, et du contrôle 27

28 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré 28

29 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré 29

30 Problématiques Quelques causes de cette mauvaise programmation Faut implanter soit même «modification du modèle modification de la vue» Faut implanter des «observateurs» De plus, modifier le DOM est fastidieux Verbeuse : document.getelementbyid.xxx.yyy.zzz Nécessite la maîtrise de l'architecture du DOM Faut prendre en compte la spécificité de chaque navigateur 30

31 Problématiques Quelques causes de sa mauvaise programmation De plus en plus de communication entre le client et serveur pour la même page Beaucoup de bouts de codes pour gérer cela Code sale!!! Le premier niveau de contrôle (dans le navigateur) prend de plus en plus de place Pour limiter la saturation du serveur d'applications Bref le code de la vue est alourdi, verbeux et mal structuré 31

32 Problématiques Quelques causes de sa mauvaise programmation De plus en plus de communication entre le client et serveur pour la même page Beaucoup de bouts de codes pour gérer cela Code sale!!! Le premier niveau de contrôle (dans le navigateur) prend de plus en plus de place Pour limiter la saturation du serveur d'applications Bref le code de la vue est alourdi, verbeux et mal structuré 32

33 Problématiques Problème 1 Application du MVC Problème 2 Testabilité

34 Problématiques Une conséquence du premier problème est la testabilité Dans le processus de développement d'une application Le test est une étape capitale Vérifie le respect du cahier des charges Il s'agit à la fois des tests unitaires et du test global C'est une étape fastidieux car Répétitive Longue sources d'erreurs 34

35 Problématiques Une conséquence du premier problème est la testabilité Dans le processus de développement d'une application Le test est une étape capitale. Vérifie le respect du cahier des charges Il s'agit à la fois des tests unitaires et du test global C'est une étape fastidieux car Répétitive Longue sources d'erreurs 35

36 Problématiques Besoin d'automatiser les tests (Continous Delivery) Il existe des outils d'automatisation des tests d'app. web Détectent les modifications dans les sources l'application Simulent des navigateurs ainsi que des clics de clients web Exemple : Karma, Protractor, Neoload, Clif, etc. 36

37 Problématiques Une conséquence du premier problème est la testabilité Ces outils de test sont très difficiles à utiliser actuellement Car les applications web sont mal codées Une légère modification d'un bout de l'application Peut entraîner la réécriture complète du code pour les tests 37

38 Résumé de la problématique La vue des app. web dynamiques est très mal programmées Deux conséquences (1) L'app. est difficilement maintenable (2) L'app. est difficilement testable 38

39 Une solution AngularJS, de google

40 AngularJS Où intervient Angular? 40

41 AngularJS Philosophie générale : faciliter la vie du programmeur Un framework pour le développement de la vue d'une app. web (1) Incite le programmeur à coder proprement le MVC côté client Via des bonnes recettes (des années d'observation) (2) A été construit en ayant à l'esprit la testabilité de l'application S'intègre parfaitement avec les outils de test existants Ce qui facilite le test plus tard 41

42 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 42

43 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 43

44 AngularJS (allé, plus de pub) Philosophie générale : faciliter la vie du programmeur Simplifie au maximum la programmation de la vue Éviter la répétition de code Éviter la maîtrise du DOM ou des technos comme Ajax Angular vous force à modulariser le code Angular le fait pour vous Éviter l'aspect verbeux et illisible de HTML Angular vous permet de définir et nommer des comportements HTML Bref, rendre le code concis et lisible 44

45 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Je veux une page 45

46 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Je veux une page Lorsqu'une page (template) est demandée par un client : Le serveur web retourne La template en question + les scripts JS que vous aviez écrits + les scripts JS d'angulars cas 46

47 AngularJS, c'est quoi? Vous fournissez Template Your JS scripts Application finale Déployée là ou là, ou,... Je veux une page Accessible via n'importe quel navigateur Angular opère ici Angular opère ici Je veux une page Lorsqu'une page (template) est demandée par un client : Le serveur web retourne La template en question + les scripts JS que vous aviez écrits + les scripts JS d'angulars cas 47

48 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Angular Compilateur Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 48

49 AngularJS, c'est quoi? Une grosse librairie JS Tout est au sein d'un fichier JS Angular.js (sur le site d'angularjs) Un langage qui étend HTML Le remplace dans certains cas 49

50 AngularJS, c'est quoi? Une grosse librairie JS Un compilateur qui va traduire votre application Angular en un code HTML+JS Compréhensible par les navigateurs Un runtime JS qui implante des comportements de base dont on a besoin dans une app. Modification du DOM, observateurs, communication avec un serveur d'application, etc. La machine cliente est vraiment mise à contribution 50

51 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 51

52 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Le compilateur Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale 52

53 AngularJS, c'est quoi? Traitement d'une réponse à une requête niveau navigateur Template Your JS scripts Le compilateur Angular Compilateur Angular.js Génère Fournit Contenu HTML Your JS scripts Utilisé par le contenu HTML Angular scripts JS La page finale Le runtime 53

54 AngularJS, c'est quoi? Un ensemble de bonnes recettes de programmation Sur la modularité du code Canevas pour la programmation Le code est moins longs Organisation en répertoires et fichiers 54

55 AngularJS, c'est quoi? Un ensemble de bonnes recettes de programmation Sur la modularité du code Canevas pour la programmation Le code est moins longs Organisation en répertoires et fichiers 55

56 AngularJS, c'est quoi? Un ensemble de recettes pour le test Pour l'écriture des tests unitaires Tester très précisément les fonctions de base de l'application Pour l'écriture d'un test globale Simulation des clients web Simulation des scénarios d'utilisation réelle Avec des navigateurs 56

57 AngularJS, c'est quoi? Un ensemble de recettes pour le test Pour l'écriture des tests unitaires Tester très précisément les fonctions de base de l'application Pour l'écriture d'un test globale Simulation des clients web Simulation des scénarios d'utilisation réelle Avec des navigateurs 57

58 AngularJS Mise en route

59 AngularJS, c'est quoi? Comment s'en servir? ( Étape 1 : préparer une arborescence pour votre application Partir d'un exemple sur le site et le customiser git clone --depth=14 cd angular-phonecat Étape 2 : Installer les outils de tests (Karma, Protractor, Brower et Http-Server) apt-get install nodejs-legacy npm npm install 59

60 AngularJS, c'est quoi? Comment s'en servir? ( Étape 1 : préparer une arborescence pour votre application Partir d'un exemple sur le site et le customiser git clone --depth=14 cd angular-phonecat Étape 2 : Installer les outils de tests (Karma, Protractor, Brower et Http-Server) apt-get install nodejs-legacy npm npm install 60

61 AngularJS, c'est quoi? Comment s'en servir? ( Étape 3 : Coder votre application (voir les slides suivants) Étape 5 : Coder les tests (voir les slides suivants) 61

62 AngularJS, c'est quoi? Comment s'en servir? ( Etape 6 : Tester votre application npm start : démarrer un serveur web local (pour les tests) npm test : démarre Karma, le moteur des tests unitaires npm run protractor : démarre Protractor, le moteur du test global npm run update-webdriver : install les drivers nécessaires pour Protractor 62

63 AngularJS Coder son application

64 Coder en AngularJS Maîtriser les concepts suivants Directives Scope Watchers Dependency injection Routing Data binding Expressions Controller Model + HTML et JS 64

65 Coder en AngularJS Démo avec l'application : 65

66 Coder en AngularJS Démo avec l'application : Toute recherche nécessite le rafraîchissement de la page 66

67 Coder en AngularJS Démo avec l'application : L'URL reste inchangée, quelque soit la recherche 67

68 AngularJS La base

69 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» 69

70 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» 70

71 Une page en AngularJS Toute page contient au moins les deux éléments suivants L'inclusion du script angular.js La directive «ng-app» Exemple d'expression 71

72 Voici le résultat Faire la démo1 Une page en AngularJS 72

73 AngularJS Directives

74 Coder en AngularJS Les directives Sont des composants paramétrables qui implantent des comportements Se met dans la déclaration d'une balise HTML <balise_html directiveangular="param"> ou <directiveangular="param"> Angular fournit une panoplie correspondant aux comportements très souvent codés Le premier d'entre eux est «ng-app», permet de bootstraper une application Angular ng-src, ng-href, ng-model, ng-mousemove, ng-submit, etc. Vous pouvez développer les vôtres Ce qui facilite la réutilisabilité 74

75 Coder en AngularJS Les directives Sont des composants paramétrables qui implantent des comportements Se met dans la déclaration d'une balise HTML <balise_html directiveangular="param"> ou <directiveangular="param"> Angular fournit une panoplie correspondant aux comportements très souvent codés Le premier d'entre eux est «ng-app», permet de bootstraper une application Angular ng-src, ng-href, ng-model, ng-mousemove, ng-submit, etc. Vous pouvez développer les vôtres Ce qui facilite la réutilisabilité 75

76 Coder en AngularJS Les directives (Exemple 1) Nous souhaitons implanter ce comportement Faire la démo2 76

77 Coder en AngularJS Les directives (Exemple 1) Voici le code sans AngularJS (partie HTML) 77

78 Coder en AngularJS Les directives (Exemple 1) Voici le code sans AngularJS (partie JS) 78

79 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS 79

80 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS ng-model : Permet de déclarer une variable Ensuite l'utiliser plus tard 80

81 Coder en AngularJS Les directives (Exemple 1) Voici le code en AngularJS : 25 lignes de code en moins (32 %), soit toute la partie JS ng-model : Permet de déclarer une variable Ensuite l'utiliser plus tard ng-disabled: Permet de déclarer une variable Ensuite l'utiliser plus tard 81

82 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Nous souhaitons modifier le style css d'un élément HTML à chaque clic. Nous allons définir ce comportement de façon générique Afin de le réutiliser pour tout type d'élément Faire la démo3 82

83 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Avec Angular on le réalise en plusieurs étapes, de façon modulaire Étape 1 Faut définir ce que Angular appelle un «module» Qui sera passer comme paramètre de la directive «ng-app» Dans le fichier «app/js/app.js» 83

84 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Avec Angular on le réalise en plusieurs étapes, de façon modulaire Étape 1 Faut définir ce que Angular appelle un «module» Qui sera passer comme paramètre de la directive «ng-app» Dans le fichier «app/js/app.js» Le module «MonApp» est crée Les modules dépendants 84

85 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Un point sur la notion de «module» Permet de mieux organiser le code source de l'application Une application peut être organisée en modules Un module peut utiliser les services d'un autre 85

86 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive La directive s'appellera «mon-composant» Dans le fichier «app/js/directives.js» 86

87 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Dans le fichier «app/js/directives.js» La directive est rattachée à notre module (la variable «var») 87

88 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Le comportement de la directive Dans le fichier «app/js/directives.js» 88

89 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Configuration de la directive pour Angular Dans le fichier «app/js/directives.js» 89

90 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Dans le fichier «app/js/directives.js» "E" : La directive sera utilisée comme un élément (balise HTML). "A" pour attribut de balise 90

91 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 2 : création de sa directive Son comportement est la fonction définie Dans le fichier «app/js/directives.js» 91

92 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Ma page HTML est liée au module Angular créé Dans son fichier HTML.. 92

93 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Inclusion des 2 nouveaux fichiers JS Dans son fichier HTML.. 93

94 Coder en AngularJS Les directives (Exemple 2 : créer sa propre directive) Étape 3 : utilisation de la directive Utilisation de la directive (comme une base HTML) Dans son fichier HTML.. 94

95 AngularJS Controllers

96 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Nous souhaitons afficher une liste d'éléments Commençons avec quelque chose de simple Les données de la liste sont connues Mais peuvent évoluer Faire la démo4 96

97 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant J'ajoute un controller à mon module Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 97

98 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant Nom du controller Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 98

99 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 1 : Créer un controller Il s'agit d'un controller simple pour l'instant Corps du controller. Pas grand chose. Juste initialiser le modèle. Il nous permet de définir notre modèle. Et prépare au data binding Dans le fichier «app/js/controllers.js» 99

100 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Inclusion du fichier JS contenant les controllers.. 100

101 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Inclusion du fichier JS contenant les controllers.. 101

102 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Application du controller au corps du document HTML.. 102

103 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Une directive qui s'appuie sur le controller. Permet de répéter un bloc. Les données viennent du modèle intialisé dans le controller «phones» a été défini dans le controller.. 103

104 Coder en AngularJS Controller et data binding (Exemple 1 : un controller simple) Avec Angular Étape 2 : Utiliser le controller dans le fichier HTML Expressions et data binding: le controller permet ici de réaliser la liaison entre le modèle et la vue

105 AngularJS Les filtres

106 Coder en AngularJS Les filtres (suite de l'exemple précédent) Nous voulons faire ceci Faire la démo5 106

107 Coder en AngularJS Les filtres (de l'exemple précédent) Avec Angular Utiliser le service «filter» Nous définissons la zone de texte comme élément du modèle 107

108 Coder en AngularJS Les filtres (de l'exemple précédent) Avec Angular Utiliser la fonction «filter» Nous définissons la zone de texte comme élément du modèle Le contenu de la zone de texte est utilisé pour filtrer la liste à afficher. Angular gère tout (binding, comparaison, rafraichissement, etc.) 108

109 AngularJS Les services

110 Coder en AngularJS Les données viendront maintenant d'un serveur 110

111 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Angular injectera cette variable dans les sources du controller 111

112 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur 112

113 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur Fonction appelée en cas de succès : asynchrone 113

114 Coder en AngularJS Les données viendront maintenant d'un serveur Avec Angular Utilisation du service «$http» de Angular Géré par Angular grâce à l'injection de dépendances Dans le fichier «app/js/controllers.js» Obtention des données du serveur Initialisation du modèle 114

115 Coder en AngularJS Les services Angular fournit un ensemble de services Commence par le caractère «$» Exemple : $http : $http.get(), $http.post(), $http.delete(), $http.options(), etc. $timeout, $log, etc. Vous pouvez construire les vôtres Se sert de sa capacité d'injection de codes pour implanter ceci Injection de dépendance 115

116 AngularJS Tests unitaires

117 Tests unitaires Permet de tester des fonctions écrites en JS Surtout les fonctions liées au contrôles et au modèle Pas le DOM (que nous avons présenté comme une partie de notre modèle) Généralement le test du DOM se fait en plusieurs étapes Donc, pas unitaire 117

118 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Le but du test : s'assurer que le controller crée bien 3 éléments dans le tableau 118

119 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le nom du test 119

120 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le corps de la fonction de test. Constituée d'une unique spécification à tester 120

121 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» Le nom de la spécification 121

122 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Avec Jasmine (le langage de description du test) et Karma (le moteur d'exécution du test) Dans le fichier «test/unit/controllersspec.js» La spécification est réussie si tous les «expect» sont true 122

123 Tests unitaires Test unitaire de l'exemple 1 : un controller simple Exécution du test Dans un terminal : npm test Voici le résultat du test Démo6 Succès du test 123

124 AngularJS Test globale

125 Test global Test global de l'exemple 1 : un controller simple avec filtre Rappel de l'exemple 125

126 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Le test se réalise sur la page index.html 126

127 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» On voit ici le test unitaire 127

128 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Simulation de la saisie dans la zone de texte. Si le filtre fonctionne correctement, alors la liste ne doit contenir qu'un élément Un autre 128

129 Test global Test global de l'exemple 1 : un controller simple avec filtre Dans le fichier «test/e2e/scenarios.js» Démo7 129

130 Conclusion

131 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien aux outils de tests 131

132 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien aux outils de tests 132

133 Conclusion AngularJS facilite la vie des développeurs et testeurs Se situe au niveau du développement de la vue dans le modèle MVC Remplace les technos telles que Ajax Par contre, fonctionne très bien avec JEE (avec moins de JSP) par exemple Permet de modulariser le code Réduit drastiquement le nombre de lignes de codes Facilite sa maintenabilité et son évolution S'associe très bien avec les outils de tests 133

134 Conclusion AngularJS n'est rien d'autre qu'une librairie JS Le gros du boulot est donc de maîtriser toute la librairie Par exemple, toutes les directives (afin de ne pas en redévelopper) 134

135 Introduction à une techno web à la mode AngularJS Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht.fr