Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alphorm.com Formation Angular - Les fondamentaux

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-angular-4-les-fondamentaux

Angular (v2 et v4) est le nouveau framework proposé par Google et qui fait suite au déjà très populaire AngularJS (v1).
Dans cette formation vous allez découvrir les nouvelles spécifications du W3C pour le développement Web. Vous verrez également comment Angular s’appuie sur ces spécifications pour vous permettre de développer facilement un application.
Vous aurez une présentation de l’architecture d’une application Angular et vous découvrirez grâce à un exemple comment démarrer un projet : à partir d’un squelette proposé par Google et à partir de l’outil angular-cli.
Vous allez également voir la manipulation des templates HTML pour améliorer vos interfaces utilisateurs.
Angular s’appuie sur la notion de programmation réactive implémenté par la bibliothèque RxJS, vous découvrirez cette bibliothèque et ce qu’elle apporte.
Vous verrez également ce que propose Angular pour la gestion des formulaires et le travail avec Ajax et le routage.
A l’issue de cette formation vous serez capable de développer une application simple et vous interfacer avec un service Web de type RESTful.

  • Login to see the comments

Alphorm.com Formation Angular - Les fondamentaux

  1. 1. Angular (v4.0) Une formation Frédéric GAURAT
  2. 2. Une formation Cursus Angular
  3. 3. Une formation Cursus Angular
  4. 4. Une formation Public concerné Développeurs Web et Architectes
  5. 5. Une formation Connaissances requises
  6. 6. A vous de jouer !
  7. 7. Présentation du projet de la formation Une formation Frédéric GAURAT
  8. 8. Une formation Le projet Todo List Le serveur et la base de données Présentation des outils Plan
  9. 9. Une formation Le projet Todo List
  10. 10. Une formation Le serveur et la BDD
  11. 11. Une formation Microsoft Visual Studio Code Ng-cli (https://cli.angular.io/) Présentation des outils
  12. 12. Merci
  13. 13. Création de balises personnalisées Une formation Frédéric GAURAT
  14. 14. Une formation Introduction • Les Web 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. 15. Une formation Les Web Components Ensembles de spécifications (W3C) définissant des API permettant la création de balises réutilisables <alphorm>…</alphorm>
  16. 16. Une formation Templates La spécification des 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. 17. Une formation Shadow DOM La spécification Shadom DOM décrit comment encapsuler les éléments ou les styles de vos composants (rendre privé)
  18. 18. Une formation Custom elements La spécification Custom elements définit comment concevoir et utiliser des nouveaux types d’élément DOM
  19. 19. Une formation Exemple HelloWorld
  20. 20. Merci
  21. 21. Architecture d'une application Angular Une formation Frédéric GAURAT
  22. 22. Merci
  23. 23. Les Modules Une formation Frédéric GAURAT
  24. 24. Une formation Organiser une application avec des modules Le module root Structure d’un module Plan
  25. 25. Une formation Public concerné Développeurs Web et Architectes
  26. 26. Une formation Le module root Une application a au moins un module principal Ce module est utilisé pour initialiser l’application
  27. 27. Une formation Structure d’un module
  28. 28. Merci
  29. 29. Les Components Une formation Frédéric GAURAT
  30. 30. Une formation Les Components Les Templates Metadata Le Data binding Conclusion Plan
  31. 31. Une formation Les Components Un Component 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
  32. 32. Une formation Les Templates Les templates définissent la partie visible de votre component Un template ressemble à un fichier HTML avec quelques différences : la template syntax
  33. 33. Une formation Connaissances requises
  34. 34. Une formation Metadata
  35. 35. Une formation Relations entre Components
  36. 36. Une formation Le Data binding DOM Component {{value}} [property] = ‘value’ (event) = ‘handler’ [(ng-model)] = ‘property’
  37. 37. Une formation Conclusion
  38. 38. Merci
  39. 39. Les Directives Une formation Frédéric GAURAT
  40. 40. Une formation Introduction Les 2 types de Directives Structural directives Attribute directives Plan
  41. 41. Une formation Introduction Les directives s’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
  42. 42. A vous de jouer !
  43. 43. Une formation Structural directives Les directives structurelles permettent de modifier le layout en manipulant les éléments du DOM
  44. 44. Une formation Attribute directives Les directives attribut sont utilisées pour modifier l’apparence ou le comportement d’un élément
  45. 45. Merci
  46. 46. Les Services Une formation Frédéric GAURAT
  47. 47. Une formation Les Services La notion 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é
  48. 48. Une formation Les Services Un service sera injecté dans un component Il aura la responsabilité de décharger le component de tout ce qui ne concerne pas l’interface utilisateur
  49. 49. Merci
  50. 50. Notion d’injection de dépendance Une formation Frédéric GAURAT
  51. 51. Présentation du projet de la formation Une formation Frédéric GAURAT
  52. 52. Une formation L’inversion de contrôle
  53. 53. Une formation L’injection de dépendance L’injection de dépendance est le moyen de fournir à un component un objet construit avec toutes ses dépendances
  54. 54. Une formation L’injector L’injector est sollicité 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
  55. 55. Une formation L’injector
  56. 56. Merci
  57. 57. Création du projet Une formation Frédéric GAURAT
  58. 58. Une formation HelloWorld ! QuickStart seed Test de l’application Plan
  59. 59. Une formation HelloWorld !
  60. 60. Une formation QuickStart seed Installation de l’environnement Téléchargement des fichiers npm install Les fichiers essentiels app/app.component.ts app/app.module.ts main.ts package.json
  61. 61. Une formation Le projet Todo List Le serveur et la base de données Présentation des outils Plan
  62. 62. Merci
  63. 63. Démarrer “from scratch” avec angular-cli Une formation Frédéric GAURAT
  64. 64. Une formation Création d’un projet avec angular-cli Générer un composant Tester une application localement L’outil webpack Les autres outils Plan
  65. 65. Une formation Projet avec angular-cli https://cli.angular.io/
  66. 66. Une formation Générer un composant La commande ng generate
  67. 67. Une formation Tester une app localement La commande ng serve
  68. 68. Une formation Le projet Todo List
  69. 69. Une formation Le projet Todo List
  70. 70. Merci
  71. 71. Notion d’interpolation Une formation Frédéric GAURAT
  72. 72. Une formation Interpolation Template expressions Plan
  73. 73. Une formation Interpolation Une interpolation permet 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}}
  74. 74. Une formation Interprétation d’une Interpolation Evaluation du contenu conversion du résultat en une chaîne de caractères Assignation du résultat par property binding (modification du DOM)
  75. 75. Merci
  76. 76. Utilisation des bindings Une formation Frédéric GAURAT
  77. 77. Une formation Le serveur et la BDD
  78. 78. Une formation Le principe de binding Direction du binding
  79. 79. Une formation Les types de binding
  80. 80. Une formation Attribut HTML et 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
  81. 81. Une formation Les cibles du binding
  82. 82. Merci
  83. 83. Directives, Pipe et template variable Une formation Frédéric GAURAT
  84. 84. Une formation Notion de directives structurelles Quelques directives Angular L’opérateur Pipe Les variables de template Plan
  85. 85. Une formation Directives structurelles Elles sont 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 ‘*’
  86. 86. Une formation Microsoft Visual Studio Code Ng-cli (https://cli.angular.io/) Présentation des outils
  87. 87. Une formation L’opérateur Pipe Reprend l’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
  88. 88. Une formation L’opérateur Pipe hello HELLO uppercase {{« hello »|uppercase}}
  89. 89. Une formation Les variables de 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 ‘#’
  90. 90. Merci
  91. 91. La programmation réactive avec RxJS Une formation Frédéric GAURAT
  92. 92. Une formation Qu’est-ce que la programmation réactive? Le pattern Observer Le pattern Iterator Introduction à RxJS Plan
  93. 93. Une formation La programmation ré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
  94. 94. Merci
  95. 95. Merci
  96. 96. Merci
  97. 97. Merci
  98. 98. Merci
  99. 99. Merci
  100. 100. Utilisation de RxJS Une formation Frédéric GAURAT
  101. 101. Une formation Observable Operators Plan
  102. 102. Une formation Observable Observable sur un tableau Observable sur un Event
  103. 103. Création de balises personnalisées Une formation Frédéric GAURAT
  104. 104. Une formation Operators Operator map() Operator filter() Operator merge()
  105. 105. Merci
  106. 106. Construction et validation d’un formulaire Une formation Frédéric GAURAT
  107. 107. Une formation Construire un formulaire La directive ngModel Surveiller les changements Styles CSS et état de formulaire Le directive ngSubmit Plan
  108. 108. Une formation Construire un formulaire Les 2 types de constructions de formulaires • Template based • Code based La class Model Le form component
  109. 109. Une formation La directive ngModel Le template du formulaire Le binding bi-directionnel (ngModel) La directive ngForm
  110. 110. Une formation Les Web Components Templates Shadow DOM Custom elements Plan
  111. 111. Une formation Styles CSS et état de formulaire Appliquer des styles CSS aux états renvoyés par ngModel
  112. 112. Une formation Le directive ngSubmit Exécuter du code lors de la soumission du formulaire Empêcher la soumission si le formulaire n’est pas valide
  113. 113. Merci
  114. 114. Ajax et Angular Une formation Frédéric GAURAT
  115. 115. Une formation Utiliser le HttpModule Communiquer avec le serveur Plan
  116. 116. Une formation Le provider Http Le module doit importer le HttpModule Le service Http est utilisable par injection de dépendance
  117. 117. Une formation Communiquer avec le serveur Simuler une web API Recevoir des données Envoyer des données Quelques opérateurs RxJS
  118. 118. Une formation Les Web Components Ensembles de spécifications (W3C) définissant des API permettant la création de balises réutilisables <alphorm>…</alphorm>
  119. 119. Principe de routage, configuration et directive Une formation Frédéric GAURAT
  120. 120. Une formation Fonctionnement du router Les éléments de routage Configuration Plan
  121. 121. Une formation Fonctionnement du router 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
  122. 122. Une formation Les éléments de routage Router outlet Router links Router state
  123. 123. Une formation Router outlet Endroit réservé où Angular doit placer la vue
  124. 124. Une formation Router links Directive routerLink : Permet de référencer une route dans le template Directive routerLinkActive : Permet d’ajouter automatiquement une classe si la route est active
  125. 125. Une formation Router state Angular maintient 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
  126. 126. Une formation Configuration Concrètement, le router 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)
  127. 127. Merci
  128. 128. Une formation Templates La spécification des 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
  129. 129. Une formation Le projet Todo List L’approche orientée composant Développement Plan
  130. 130. Une formation Le projet Todo List
  131. 131. Une formation L’approche orientée composant
  132. 132. Une formation Démonstration Création du projet avec angular-cli Configuration de la base de données (deployd) Création des composants
  133. 133. Merci
  134. 134. Conclusion Une formation Frédéric GAURAT
  135. 135. Une formation Les Web Components Architecture d’une application Angular Travail avec les templates Programmation Reactive avec RxJS Les formulaires Travail avec HTTP Le Routage Le Projet TodoList Bilan
  136. 136. Une formation Prochaine formation Angular : Avancé
  137. 137. Une formation Shadow DOM La spécification Shadom DOM décrit comment encapsuler les éléments ou les styles de vos composants (rendre privé)

×