Télécharger en tant que PDF, PPTX
![Une formation
Le Data binding
DOM
Component
{{value}}
[property] = ‘value’
(event) = ‘handler’
[(ng-model)] = ‘property’](https://image.slidesharecdn.com/alphorm-170515074819/75/Alphorm-com-Formation-Angular-Les-fondamentaux-37-2048.jpg)
Téléchargé parAlphorm
Alphorm.com Formation Angular - Les fondamentaux
Ce document présente une formation sur Angular 4.0, ciblant les développeurs web et architectes, en explorant divers sujets tels que les composants, les modèles, les directives, et la programmation réactive avec RxJS. Il couvre également la création d'applications à l'aide d'Angular CLI, ainsi que la gestion des formulaires et le routage. Enfin, il aborde le projet Todo List comme application pratique pour illustrer les concepts enseignés.
Contenu connexe
Similaire à Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
- 1.
- 2.
- 3.
- 4. Une formation Public concerné DéveloppeursWeb et Architectes
- 5.
- 6. A vous dejouer !
- 7. Présentation du projet dela formation Une formation Frédéric GAURAT
- 8. Une formation Le projetTodo List Le serveur et la base de données Présentation des outils Plan
- 9. Une formation Le projetTodo List
- 10. Une formation Le serveuret la BDD
- 11. Une formation Microsoft VisualStudio Code Ng-cli (https://cli.angular.io/) Présentation des outils
- 12.
- 13. Création de balises personnalisées Uneformation Frédéric GAURAT
- 14. Une formation Introduction • LesWeb Components • Architecture d’une application Angular • Une première application Angular • Travail avec les templates • RxJS • Les formulaires • Travail avec HTTP • Le Routage • Le projet TodoList Conclusion Plan
- 15. Une formation Les WebComponents Ensembles de spécifications (W3C) définissant des API permettant la création de balises réutilisables <alphorm>…</alphorm>
- 16. Une formation Templates La spécificationdes Templates, décrit la création de fragment HTML Ces fragments ne sont pas chargés au démarrage de la page Ces fragments sont instanciés plus tard
- 17. Une formation Shadow DOM Laspécification Shadom DOM décrit comment encapsuler les éléments ou les styles de vos composants (rendre privé)
- 18. Une formation Custom elements Laspécification Custom elements définit comment concevoir et utiliser des nouveaux types d’élément DOM
- 19.
- 20.
- 21. Architecture d'une application Angular Uneformation Frédéric GAURAT
- 23.
- 24.
- 25. Une formation Organiser uneapplication avec des modules Le module root Structure d’un module Plan
- 26. Une formation Public concerné DéveloppeursWeb et Architectes
- 27. Une formation Le moduleroot Une application a au moins un module principal Ce module est utilisé pour initialiser l’application
- 28.
- 29.
- 30.
- 31. Une formation Les Components LesTemplates Metadata Le Data binding Conclusion Plan
- 32. Une formation Les Components UnComponent contrôle un fragment de l’interface utilisateur Il est défini dans une classe La classe interagit avec la view via ses propriétés et ses méthodes
- 33. Une formation Les Templates Lestemplates définissent la partie visible de votre component Un template ressemble à un fichier HTML avec quelques différences : la template syntax
- 34.
- 35.
- 36. Une formation Relations entreComponents
- 37. Une formation Le Databinding DOM Component {{value}} [property] = ‘value’ (event) = ‘handler’ [(ng-model)] = ‘property’
- 38.
- 39.
- 40.
- 41. Une formation Introduction Les 2types de Directives Structural directives Attribute directives Plan
- 42. Une formation Introduction Les directivess’utilisent dans les templates Les components sont des directives (AngularJS) mais sont considérés comme des éléments à parts entières Nous utilisons des directives pour structurer nos templates et pour changer le comportement d’un élément
- 43. A vous dejouer !
- 44. Une formation Structural directives Lesdirectives structurelles permettent de modifier le layout en manipulant les éléments du DOM
- 45. Une formation Attribute directives Lesdirectives attribut sont utilisées pour modifier l’apparence ou le comportement d’un élément
- 46.
- 47.
- 48. Une formation Les Services Lanotion de service regroupe valeurs, fonctions ou fonctionnalités nécessaires à votre application En règle générale, c’est une simple classe implémentant une fonctionnalité
- 49. Une formation Les Services Unservice sera injecté dans un component Il aura la responsabilité de décharger le component de tout ce qui ne concerne pas l’interface utilisateur
- 50.
- 51. Notion d’injection de dépendance Uneformation Frédéric GAURAT
- 52. Présentation du projet dela formation Une formation Frédéric GAURAT
- 53. Une formation L’inversion decontrôle
- 54. Une formation L’injection dedépendance L’injection de dépendance est le moyen de fournir à un component un objet construit avec toutes ses dépendances
- 55. Une formation L’injector L’injector estsollicité par Angular lors de la création d’un component Il maintient un conteneur d’instance précédemment créée Si le service demandé n’existe pas, il est alors instancié et passé en paramètre au constructeur du component Sinon il est directement passé en paramètre au constructeur du component
- 56.
- 57.
- 58. Création du projet Uneformation Frédéric GAURAT
- 59. Une formation HelloWorld ! QuickStartseed Test de l’application Plan
- 60.
- 61. Une formation QuickStart seed Installationde l’environnement Téléchargement des fichiers npm install Les fichiers essentiels app/app.component.ts app/app.module.ts main.ts package.json
- 62. Une formation Le projetTodo List Le serveur et la base de données Présentation des outils Plan
- 63.
- 64. Démarrer “from scratch” avecangular-cli Une formation Frédéric GAURAT
- 65. Une formation Création d’unprojet avec angular-cli Générer un composant Tester une application localement L’outil webpack Les autres outils Plan
- 66. Une formation Projet avecangular-cli https://cli.angular.io/
- 67. Une formation Générer uncomposant La commande ng generate
- 68. Une formation Tester uneapp localement La commande ng serve
- 69. Une formation Le projetTodo List
- 70. Une formation Le projetTodo List
- 71.
- 72.
- 73.
- 74. Une formation Interpolation Une interpolationpermet l'évaluation de variables ou d'expressions à l'intérieur d'une chaîne de caractères littérale Avec Angular l’interpolation se place entre accolades Le texte entre accolade est une template expression Exemples : La somme de 1 + 1 est {{1 + 1}} Hello {{name}}
- 75. Une formation Interprétation d’uneInterpolation Evaluation du contenu conversion du résultat en une chaîne de caractères Assignation du résultat par property binding (modification du DOM)
- 76.
- 77. Utilisation des bindings Uneformation Frédéric GAURAT
- 78. Une formation Le serveuret la BDD
- 79. Une formation Le principede binding Direction du binding
- 80. Une formation Les typesde binding
- 81. Une formation Attribut HTMLet propriété DOM Un attribut HTML est différent d’une propriété DOM ! Un attribut HTML initialise une propriété DOM Une propriété DOM peut varier, pas un attribut HTML
- 82. Une formation Les ciblesdu binding
- 83.
- 84. Directives, Pipe et templatevariable Une formation Frédéric GAURAT
- 85. Une formation Notion dedirectives structurelles Quelques directives Angular L’opérateur Pipe Les variables de template Plan
- 86. Une formation Directives structurelles Ellessont responsable de la structure du DOM Elles s’appuient sur la spécification Templates du W3C Pour en faciliter l’utilisation on utilise une microsyntax préfixé par un ‘*’
- 87. Une formation Microsoft VisualStudio Code Ng-cli (https://cli.angular.io/) Présentation des outils
- 88. Une formation L’opérateur Pipe Reprendl’idée du pipe Unix : ( symbole | ) La sortie d’un processus devient l’entrée du suivant Permet la transformation du résultat d’une expression
- 89. Une formation L’opérateur Pipe helloHELLO uppercase {{« hello »|uppercase}}
- 90. Une formation Les variablesde template Les variables de template sont des références à des éléments dans le DOM (html, component ou directives) Elles sont préfixées par un ‘#’
- 91.
- 92. La programmation réactive avecRxJS Une formation Frédéric GAURAT
- 93. Une formation Qu’est-ce quela programmation réactive? Le pattern Observer Le pattern Iterator Introduction à RxJS Plan
- 94. Une formation La programmationréactive Un modèle de programmation visant à conserver une cohérence d'ensemble en propageant les modifications d'une source réactive (modification d'une variable, entrée utilisateur, etc.) aux éléments dépendants de cette source Source : wikipedia
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101. Utilisation de RxJS Uneformation Frédéric GAURAT
- 102.
- 103. Une formation Observable Observable surun tableau Observable sur un Event
- 104. Création de balises personnalisées Uneformation Frédéric GAURAT
- 105. Une formation Operators Operator map() Operatorfilter() Operator merge()
- 106.
- 107. Construction et validation d’unformulaire Une formation Frédéric GAURAT
- 108. Une formation Construire unformulaire La directive ngModel Surveiller les changements Styles CSS et état de formulaire Le directive ngSubmit Plan
- 109. Une formation Construire unformulaire Les 2 types de constructions de formulaires • Template based • Code based La class Model Le form component
- 110. Une formation La directivengModel Le template du formulaire Le binding bi-directionnel (ngModel) La directive ngForm
- 111. Une formation Les WebComponents Templates Shadow DOM Custom elements Plan
- 112. Une formation Styles CSSet état de formulaire Appliquer des styles CSS aux états renvoyés par ngModel
- 113. Une formation Le directivengSubmit Exécuter du code lors de la soumission du formulaire Empêcher la soumission si le formulaire n’est pas valide
- 114.
- 115. Ajax et Angular Uneformation Frédéric GAURAT
- 116. Une formation Utiliser leHttpModule Communiquer avec le serveur Plan
- 117. Une formation Le providerHttp Le module doit importer le HttpModule Le service Http est utilisable par injection de dépendance
- 118. Une formation Communiquer avecle serveur Simuler une web API Recevoir des données Envoyer des données Quelques opérateurs RxJS
- 119. Une formation Les WebComponents Ensembles de spécifications (W3C) définissant des API permettant la création de balises réutilisables <alphorm>…</alphorm>
- 120. Principe de routage, configurationet directive Une formation Frédéric GAURAT
- 121. Une formation Fonctionnement durouter Les éléments de routage Configuration Plan
- 122. Une formation Fonctionnement durouter Le router Angular reprend le principe de base du navigateur Il interprète une URL pour naviguer vers la bonne vue Il peut interpréter les liens pour naviguer vers la bonne vue Il log l’historique de navigation pour assurer le fonctionnement des boutons back et forward
- 123. Une formation Les élémentsde routage Router outlet Router links Router state
- 124. Une formation Router outlet Endroitréservé où Angular doit placer la vue
- 125. Une formation Router links DirectiverouterLink : Permet de référencer une route dans le template Directive routerLinkActive : Permet d’ajouter automatiquement une classe si la route est active
- 126. Une formation Router state Angularmaintient un arbre des routes activées Cet Arbre est le RouterState Chaque route de cet arbre est accessible et propose des méthodes de parcours
- 127. Une formation Configuration Concrètement, lerouter doit avoir au moins une route configurée Les routes sont stockées dans un tableau de Route Ce tableau est ensuite passé au module RouterModule : - RouterModule.forRoot() (pour des routes principales) - RouterModule.forChild() (pour des sous-routes)
- 128.
- 129. Une formation Templates La spécificationdes Templates, décrit la création de fragment HTML Ces fragments ne sont pas chargés au démarrage de la page Ces fragments sont instanciés plus tard
- 130. Une formation Le projetTodo List L’approche orientée composant Développement Plan
- 131. Une formation Le projetTodo List
- 132. Une formation L’approche orientéecomposant
- 133. Une formation Démonstration Création duprojet avec angular-cli Configuration de la base de données (deployd) Création des composants
- 134.
- 135.
- 136. Une formation Les WebComponents Architecture d’une application Angular Travail avec les templates Programmation Reactive avec RxJS Les formulaires Travail avec HTTP Le Routage Le Projet TodoList Bilan
- 137.
- 138. Une formation Shadow DOM Laspécification Shadom DOM décrit comment encapsuler les éléments ou les styles de vos composants (rendre privé)