Alphorm.com Formation Angular - Les fondamentaux

1. Angular (v4.0) Une formation Frédéric GAURAT

2. Une formation Cursus Angular

3. Une formation Cursus Angular

4. Une formation Public concerné Développeurs Web et Architectes

5. Une formation Connaissances requises

6. A vous de jouer !

7. Présentation du projet de la formation Une formation Frédéric GAURAT

8. Une formation Le projet Todo List Le serveur et la base de données Présentation des outils Plan

9. Une formation Le projet Todo List

10. Une formation Le serveur et la BDD

11. Une formation Microsoft Visual Studio Code Ng-cli (https://cli.angular.io/) Présentation des outils

12. Merci

13. Création de balises personnalisées Une formation Frédéric GAURAT

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. 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. 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. 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. Une formation Custom elements La spécification Custom elements définit comment concevoir et utiliser des nouveaux types d’élément DOM

19. Une formation Exemple HelloWorld

20. Merci

21. Architecture d'une application Angular Une formation Frédéric GAURAT

22. Merci

23. Les Modules Une formation Frédéric GAURAT

24. Une formation Organiser une application avec des modules Le module root Structure d’un module Plan

25. Une formation Public concerné Développeurs Web et Architectes

26. Une formation Le module root Une application a au moins un module principal Ce module est utilisé pour initialiser l’application

27. Une formation Structure d’un module

28. Merci

29. Les Components Une formation Frédéric GAURAT

30. Une formation Les Components Les Templates Metadata Le Data binding Conclusion Plan

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. 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. Une formation Connaissances requises

34. Une formation Metadata

35. Une formation Relations entre Components

36. Une formation Le Data binding DOM Component {{value}} [property] = ‘value’ (event) = ‘handler’ [(ng-model)] = ‘property’

37. Une formation Conclusion

38. Merci

39. Les Directives Une formation Frédéric GAURAT

40. Une formation Introduction Les 2 types de Directives Structural directives Attribute directives Plan

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. A vous de jouer !

43. Une formation Structural directives Les directives structurelles permettent de modifier le layout en manipulant les éléments du DOM

44. Une formation Attribute directives Les directives attribut sont utilisées pour modifier l’apparence ou le comportement d’un élément

45. Merci

46. Les Services Une formation Frédéric GAURAT

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. 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. Merci

50. Notion d’injection de dépendance Une formation Frédéric GAURAT

51. Présentation du projet de la formation Une formation Frédéric GAURAT

52. Une formation L’inversion de contrôle

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. 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. Une formation L’injector

56. Merci

57. Création du projet Une formation Frédéric GAURAT

58. Une formation HelloWorld ! QuickStart seed Test de l’application Plan

59. Une formation HelloWorld !

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. Une formation Le projet Todo List Le serveur et la base de données Présentation des outils Plan

62. Merci

63. Démarrer “from scratch” avec angular-cli Une formation Frédéric GAURAT

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. Une formation Projet avec angular-cli https://cli.angular.io/

66. Une formation Générer un composant La commande ng generate

67. Une formation Tester une app localement La commande ng serve

70. Merci

71. Notion d’interpolation Une formation Frédéric GAURAT

72. Une formation Interpolation Template expressions Plan

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. 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. Merci

76. Utilisation des bindings Une formation Frédéric GAURAT

77. Une formation Le serveur et la BDD

78. Une formation Le principe de binding Direction du binding

79. Une formation Les types de binding

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. Une formation Les cibles du binding

82. Merci

83. Directives, Pipe et template variable Une formation Frédéric GAURAT

84. Une formation Notion de directives structurelles Quelques directives Angular L’opérateur Pipe Les variables de template Plan

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. Une formation Microsoft Visual Studio Code Ng-cli (https://cli.angular.io/) Présentation des outils

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. Une formation L’opérateur Pipe hello HELLO uppercase {{« hello »|uppercase}}

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. Merci

91. La programmation réactive avec RxJS Une formation Frédéric GAURAT

92. Une formation Qu’est-ce que la programmation réactive? Le pattern Observer Le pattern Iterator Introduction à RxJS Plan

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. Merci

95. Merci

96. Merci

97. Merci

98. Merci

99. Merci

100. Utilisation de RxJS Une formation Frédéric GAURAT

101. Une formation Observable Operators Plan

102. Une formation Observable Observable sur un tableau Observable sur un Event

103. Création de balises personnalisées Une formation Frédéric GAURAT

104. Une formation Operators Operator map() Operator filter() Operator merge()

105. Merci

106. Construction et validation d’un formulaire Une formation Frédéric GAURAT

107. Une formation Construire un formulaire La directive ngModel Surveiller les changements Styles CSS et état de formulaire Le directive ngSubmit Plan

108. Une formation Construire un formulaire Les 2 types de constructions de formulaires • Template based • Code based La class Model Le form component

109. Une formation La directive ngModel Le template du formulaire Le binding bi-directionnel (ngModel) La directive ngForm

110. Une formation Les Web Components Templates Shadow DOM Custom elements Plan

111. Une formation Styles CSS et état de formulaire Appliquer des styles CSS aux états renvoyés par ngModel

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. Merci

114. Ajax et Angular Une formation Frédéric GAURAT

115. Une formation Utiliser le HttpModule Communiquer avec le serveur Plan

116. Une formation Le provider Http Le module doit importer le HttpModule Le service Http est utilisable par injection de dépendance

117. Une formation Communiquer avec le serveur Simuler une web API Recevoir des données Envoyer des données Quelques opérateurs RxJS

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. Principe de routage, configuration et directive Une formation Frédéric GAURAT

120. Une formation Fonctionnement du router Les éléments de routage Configuration Plan

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. Une formation Les éléments de routage Router outlet Router links Router state

123. Une formation Router outlet Endroit réservé où Angular doit placer la vue

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. 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. 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. Merci

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. Une formation Le projet Todo List L’approche orientée composant Développement Plan

131. Une formation L’approche orientée composant

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. Merci

134. Conclusion Une formation Frédéric GAURAT

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. Une formation Prochaine formation Angular : Avancé

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é)