Téléchargé 140 fois
![Une formation L’interface PipeTransform L’interface PipeTransform contient une seule méthode transform(value: any, ...args: any[]): any value : la valeur en entrée de filtre spread operator args : les paramètres éventuels](https://image.slidesharecdn.com/alphorm-170817085241/75/Alphorm-com-Formation-Angular-Avance-100-2048.jpg)
Téléchargé parAlphorm
Alphorm.com Formation Angular : Avancé
La formation Angular 4 avancée proposée par Frédéric Gaurat est destinée aux développeurs et architectes web, couvrant des concepts tels que les reactive forms, l'injection de dépendance, les services et le routage avancé. Le programme inclut également des outils pratiques comme Docker pour le développement et explore des techniques pour améliorer la performance d'Angular, notamment avec les objets immutables et les observables. À travers des projets concrets comme une application de liste de tâches, cette formation permet une compréhension approfondie du développement avec Angular.
Alphorm.com Formation Angular : Avancé
- 1. Formation Angular 4 Avancé Uneformation Frédéric GAURAT
- 2.
- 3.
- 4. Une formation Public concerné Développeurset Architectes web
- 5.
- 6. A vous dejouer !
- 7. Présentation du projet dela formation Une formation Frédéric GAURAT
- 8. Une formation Plan Le projetTodo List Le serveur et la base de données : Docker Présentation des outils
- 9. Une formation Le projetTodo List
- 10. Une formation Le serveuret la BDD : Docker
- 11.
- 12.
- 13. Rappel sur lefonctionnement de Javascript Une formation Frédéric GAURAT
- 14. Une formation Introduction 1. Comprendrele fonctionnement d’Angular 2. Les Reactive Forms 3. L’injection de dépendance et le développement de services 4. Les Pipes 5. Routing avancé 6. Le projet Conclusion Plan
- 15. Une formation Le fonctionnementde JS JavaScript est un langage : Single Threaded Asynchrone Il s’appuie sur des callbacks
- 16. Une formation Les implémentations Google’sV8 Apple Safari Carakan Chakra SpiderMonkey, JägerMonkey, IonMonkey }
- 17.
- 18.
- 19.
- 20. Une formation Event Loopet Asynchrone
- 21.
- 22.
- 23.
- 24. Une formation Public concerné Développeurset Architectes web
- 25. Une formation Qu’est quezone.js? Bibliothèque développée par l’équipe Angular (inspirée par Dart) Utilisable hors d’Angular Une zone est un contexte d’exécution Une zone englobe l’exécution de code asynchrone
- 26. Une formation Pourquoi utiliserzone.js Garder des données entre différents appels asynchrones Les frameworks peuvent l’utiliser pour détecter et intercepter des exécutions asynchrones Facilite le debug, les tests et le profiling
- 27. Une formation Fonctionnement dezone.js zone.js « monkey patches » toutes les fonctions asynchrones du navigateur (setTimeout(),…) « monkey patches » est un moyen de modifier un programme directement en mémoire
- 28. Une formation Calcul dutemps d’exécution d’une fonction Calcul du temps d’exécution d’une fonction asynchrone
- 29. Une formation Zone.js dansAngular Angular s’appuie sur NgZone NgZone est une implémentation de zone.js NgZone ajoute une API basée sur des Observables
- 30.
- 31. Principe de détectionet de notification des changements Une formation Frédéric GAURAT
- 32.
- 33. Une formation La détectionde changement MODEL DOM Détection de Changement !
- 34. Une formation Comment modifierle bon élément DOM en fonction de la modification du model ? Comment le faire efficacement (manipulation d’arbre) La détection de changement
- 35. Une formation La causedu changement Events : click… Ajax : récupération de data auprès du serveur Timers : setTimeout(), setInterval() Tous sont asynchrones !
- 36. Une formation Notifier unchangement Les zones ! (Et plus particulièrement ngZone) La classe ApplicationRef surveille ngZone et déclenche un tick pour effectuer le changement
- 37. Une formation Appliquer lechangement Chaque component a son propre détecteur de changement qui applique les modifications Organisés en arbre, datas top to bottom : ce n’est pas un cycle
- 38.
- 39.
- 40. A vous dejouer !
- 41. Une formation Plan Performance Immutables etObservables Améliorer la détection de changement
- 42. Une formation Performance Angular doitvérifier chaque composant lorsque le modèle change Indiquer à Angular d’exécuter les détecteurs de changement pour les parties qui ont changé : utiliser les objets immutables et les observables
- 43. Une formation Immutables etObservables Immutables : ne peuvent pas changer Nouvelle référence de cette objet : clone Observables : notifient par un évènement la modification d’un objet
- 44. Une formation Améliorer ladétection de changement Stratégie de détection de changement OnPush : l’objet utilisé dans le component est en entrée uniquement et doit être considéré comme immutable Si c’est un observable, nous pouvons indiquer à Angular une modification
- 45.
- 46.
- 47. Présentation du projet dela formation Une formation Frédéric GAURAT
- 48. Une formation Plan Les Reactiveforms Reactive forms vs Template Driven forms Démonstration
- 49. Une formation Les Reactiveforms Arbre d’éléments de formulaire créé directement dans le composant Eléments de l’arbre liés (bind) aux composants du formulaire contenu dans le template Formulaire manipulé entièrement par le composant, valeurs toujours synchronisées
- 50. Une formation Comparaison Reactive forms Synchrones Ledéveloppeur code l’ensemble des éléments du formulaire Template Driven forms Asynchrones La création est laissée aux directives
- 51.
- 52.
- 53.
- 54. Une formation Plan Le projetTodo List Le serveur et la base de données : Docker Présentation des outils
- 55. Une formation Le FormBuilder Facilitela création de formulaire C’est un service : • Qu’il faut injecter dans le constructeur • Qui permet la création de FormGroup Le FormGroup permet de stocker les éléments du formulaire sous la forme d’un objet : name=>definition
- 56.
- 57. Une formation La validation Laclasse Validators définit les contraintes de base Appliquer une règle de validation : Compléter la déclaration d’un FormControl Dans un FormGroup
- 58.
- 59. Une formation Types d’élémentsde formulaire Le Formbuilder autorise le binding sur la totalité des éléments de formulaire HTML
- 60.
- 61. Une formation Le projetTodo List
- 62.
- 63.
- 64. L’injection de dépendance Uneformation Frédéric GAURAT
- 65. Une formation Plan Qu’est ceque l’injection de dépendance? Injection de dépendance dans Angular Les services
- 66. Une formation L’injection dedépendance ? Principe basé sur l’inversion de contrôle Permet le développement d’application modulaire Facilite les tests
- 67. Une formation Injection dedépendance Angular a son propre mécanisme d’injection : l’injector Créé au boot de l’application Utilisable dans la totalité de l’application Configurer en enregistrant des providers Les providers créent les services
- 68. Une formation Les services L’implémentationd’un service est l’application du pattern Separation of concerns (séparation des préoccupations) Un service contient de la logique métier et sera injecté dans des composants de l’application Un service est un singleton
- 69. Une formation Les services Unservice est une simple classe marquée par le décorateur @Injectable() Le décorateur @Injectable indique que la classe est disponible pour être injectée
- 70. Une formation Le serveuret la BDD : Docker
- 71. Développement d’un service Uneformation Frédéric GAURAT
- 72. Une formation Plan Le serviceLogger Configuration de l’injector Utilisation du service
- 73. Une formation Le serviceLogger Objectif : créer un Logger • Il affichera les messages dans la console • Il stockera les messages dans un tableau
- 74.
- 75. Une formation Configuration del’injector Il peut être configuré dans 2 endroits : 1. Le module : le service est visible dans tous les composants du module 2. Le composant : le service n’est utilisable que dans ce composant
- 76.
- 77. Une formation Utilisation duservice Injection du service
- 78.
- 79.
- 80. Notion de pipes Uneformation Frédéric GAURAT
- 81. Une formation Plan Qu’est cequ’un pipe ? Utilisation d’un pipe
- 82. Une formation Qu’est cequ’un pipe ? Le pipe est le nouveau nom donné au filter d’AngularJS Il permet de transformer une donnée à afficher data pipe Data transformée
- 83. Une formation Utilisation d’unpipe Le pipe s’utilise de la même façon que dans AngularJS En utilisant le caractère ‘|’ Suivi du filtre à utiliser et éventuellement des paramètres
- 84.
- 85.
- 86.
- 87. Une formation Plan Les pipesd’Angular UpperCasePipe et LowerCasePipe DatePipe CurrencyPipe PercentPipe
- 88. Une formation UpperCasePipe etLowerCasePipe Transforme du texte en majuscule ou minuscule {{"hello" | uppercase}} {{ "HELLO" | lowercase}}
- 89.
- 90. Une formation DatePipe Transforme uneexpression de date Date object Timestamp Chaine au format ISO En une chaîne au bon format (suivant la locale) {{1498119767000|date:'medium'}}
- 91. Rappel sur lefonctionnement de Javascript Une formation Frédéric GAURAT
- 92. Une formation CurrencyPipe Formate unnombre en devise monétaire {{1.234|currency:’USD’:true}}
- 93.
- 94. Une formation PercentPipe Formate unnombre en pourcentage (en fonction de la locale) {{1.234|percent}}
- 95.
- 96.
- 97. Développement d’un pipe personnalisé Uneformation Frédéric GAURAT
- 98. Une formation Plan Le fonctionnementde JavaScript Les implémentations Call Stack, Callback Queue et Event Loop
- 99. Une formation Le décorateur@Pipe Le décorateur @Pipe est ajouté à la classe du pipe Il prend 2 paramètres optionnels : • name : (string) le nom du pipe • pure : (boolean) état interne
- 100. Une formation L’interface PipeTransform L’interfacePipeTransform contient une seule méthode transform(value: any, ...args: any[]): any value : la valeur en entrée de filtre spread operator args : les paramètres éventuels
- 101.
- 102.
- 103. Les Child Routes etles routes secondaires Une formation Frédéric GAURAT
- 104. Une formation Plan Organiser sesmodules Configuration Chemins relatifs
- 105. Une formation Le fonctionnementde JS JavaScript est un langage : Single Threaded Asynchrone Il s’appuie sur des callbacks
- 106. Une formation Configuration Les routessont configurées dans un tableau d’objets de type Routes Ces objets ont une propriété children : un tableau de type Routes
- 107.
- 108. Une formation Chemins relatifs Configurationpar défaut basée sur l’adressage absolue : à partir de la racine (‘/’) Si le chemin du composant parent change, il faut changer la totalité des chemins Pour résoudre ce problème on va définir des chemins relatifs à l’URL courante
- 109.
- 110. Une formation Les routessecondaires Dans le template d’un component, il est possible d’utiliser plusieurs <router-outlet></router-outlet> Ils se distinguent par un attribut name : <router-outlet name=‘contact’></router- outlet> Ils sont la cible des routes secondaires
- 111.
- 112. Une formation Les implémentations Google’sV8 Apple Safari Carakan Chakra SpiderMonkey, JägerMonkey, IonMonkey }
- 113.
- 114. Une formation Plan Surveillance desroutes Les ‘guards’
- 115. Une formation Surveillance desroutes Vérifier l’accès à une route Autorisation d’accès Login nécessaire Récupération de data avant la navigation Sauvegarde et validation par l’utilisateur
- 116. Une formation Les ‘guards’ CanActivate: gère la navigation vers une route CanActivateChild : gère la navigation vers une route enfant Resolve : permet la récupération de donnée avant l’activation de la route CanLoad : gère la navigation vers un module chargé de façon asynchrone
- 117.
- 118.
- 119.
- 120. Une formation Plan Le routingasynchrone Exemple
- 121. Une formation Le routingasynchrone Une application volumineuse doit être chargée dans le navigateur pour fonctionner Pour éviter un chargement long, il est possible de demander certains modules « au bon moment » (lazy loading)
- 122.
- 123.
- 124. Projet TodoList Avancé Uneformation Frédéric GAURAT
- 125. Une formation Plan Le projetTodo List Deployd et Docker
- 126.
- 127.
- 128.
- 129.
- 130.
- 131. Une formation Bilan Le fonctionnementd’Angular Les reactive forms Les services Les pipes Les routes (avancé)
- 132.