Alphorm.com Formation Angular - Les fondamentaux
•
1 gostou•43,798 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Alphorm.com Formation Angular - Les fondamentaux
Semelhante a Alphorm.com Formation Angular - Les fondamentaux (20)
Mais de Alphorm
Mais de Alphorm (20)
Alphorm.com Formation Angular - Les fondamentaux
- 1. Angular (v4.0) Une formation Frédéric GAURAT
- 4. Une formation Public concerné Développeurs Web et Architectes
- 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
- 20. Merci
- 21. Architecture d'une application Angular Une formation Frédéric GAURAT
- 23. Merci
- 24. Les Modules Une formation Frédéric GAURAT
- 25. Une formation Organiser une application avec des modules Le module root Structure d’un module Plan
- 26. Une formation Public concerné Développeurs Web et Architectes
- 27. Une formation Le module root Une application a au moins un module principal Ce module est utilisé pour initialiser l’application
- 28. Une formation Structure d’un module
- 29. Merci
- 30. Les Components Une formation Frédéric GAURAT
- 31. Une formation Les Components Les Templates Metadata Le Data binding Conclusion Plan
- 32. 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
- 33. 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
- 36. Une formation Relations entre Components
- 37. Une formation Le Data binding DOM Component {{value}} [property] = ‘value’ (event) = ‘handler’ [(ng-model)] = ‘property’
- 39. Merci
- 40. Les Directives Une formation Frédéric GAURAT
- 41. Une formation Introduction Les 2 types de Directives Structural directives Attribute directives Plan
- 42. 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
- 43. A vous de jouer !
- 44. Une formation Structural directives Les directives structurelles permettent de modifier le layout en manipulant les éléments du DOM
- 45. Une formation Attribute directives Les directives attribut sont utilisées pour modifier l’apparence ou le comportement d’un élément
- 46. Merci
- 47. Les Services Une formation Frédéric GAURAT
- 48. 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é
- 49. 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
- 50. Merci
- 51. Notion d’injection de dépendance Une formation Frédéric GAURAT
- 52. Présentation du projet de la formation Une formation Frédéric GAURAT
- 53. Une formation L’inversion de contrôle
- 54. 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
- 55. 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
- 57. Merci
- 58. Création du projet Une formation Frédéric GAURAT
- 59. Une formation HelloWorld ! QuickStart seed Test de l’application Plan
- 61. 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
- 62. Une formation Le projet Todo List Le serveur et la base de données Présentation des outils Plan
- 63. Merci
- 64. Démarrer “from scratch” avec angular-cli Une formation Frédéric GAURAT
- 65. 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
- 66. Une formation Projet avec angular-cli https://cli.angular.io/
- 67. Une formation Générer un composant La commande ng generate
- 68. Une formation Tester une app localement La commande ng serve
- 69. Une formation Le projet Todo List
- 70. Une formation Le projet Todo List
- 71. Merci
- 74. 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}}
- 75. 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)
- 76. Merci
- 77. Utilisation des bindings Une formation Frédéric GAURAT
- 78. Une formation Le serveur et la BDD
- 79. Une formation Le principe de binding Direction du binding
- 80. Une formation Les types de binding
- 81. 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
- 82. Une formation Les cibles du binding
- 83. Merci
- 84. Directives, Pipe et template variable Une formation Frédéric GAURAT
- 85. Une formation Notion de directives structurelles Quelques directives Angular L’opérateur Pipe Les variables de template Plan
- 86. 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 ‘*’
- 87. Une formation Microsoft Visual Studio Code Ng-cli (https://cli.angular.io/) Présentation des outils
- 88. 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
- 89. Une formation L’opérateur Pipe hello HELLO uppercase {{« hello »|uppercase}}
- 90. 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 ‘#’
- 91. Merci
- 92. La programmation réactive avec RxJS Une formation Frédéric GAURAT
- 93. Une formation Qu’est-ce que la programmation réactive? Le pattern Observer Le pattern Iterator Introduction à RxJS Plan
- 94. 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
- 95. Merci
- 96. Merci
- 97. Merci
- 98. Merci
- 99. Merci
- 100. Merci
- 101. Utilisation de RxJS Une formation Frédéric GAURAT
- 103. Une formation Observable Observable sur un tableau Observable sur un Event
- 104. Création de balises personnalisées Une formation Frédéric GAURAT
- 105. Une formation Operators Operator map() Operator filter() Operator merge()
- 106. Merci
- 107. Construction et validation d’un formulaire Une formation Frédéric GAURAT
- 108. Une formation Construire un formulaire La directive ngModel Surveiller les changements Styles CSS et état de formulaire Le directive ngSubmit Plan
- 109. Une formation Construire un formulaire Les 2 types de constructions de formulaires • Template based • Code based La class Model Le form component
- 110. Une formation La directive ngModel Le template du formulaire Le binding bi-directionnel (ngModel) La directive ngForm
- 111. Une formation Les Web Components Templates Shadow DOM Custom elements Plan
- 112. Une formation Styles CSS et état de formulaire Appliquer des styles CSS aux états renvoyés par ngModel
- 113. 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
- 114. Merci
- 115. Ajax et Angular Une formation Frédéric GAURAT
- 116. Une formation Utiliser le HttpModule Communiquer avec le serveur Plan
- 117. Une formation Le provider Http Le module doit importer le HttpModule Le service Http est utilisable par injection de dépendance
- 118. Une formation Communiquer avec le serveur Simuler une web API Recevoir des données Envoyer des données Quelques opérateurs RxJS
- 119. Une formation Les Web Components Ensembles de spécifications (W3C) définissant des API permettant la création de balises réutilisables <alphorm>…</alphorm>
- 120. Principe de routage, configuration et directive Une formation Frédéric GAURAT
- 121. Une formation Fonctionnement du router Les éléments de routage Configuration Plan
- 122. 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
- 123. Une formation Les éléments de routage Router outlet Router links Router state
- 124. Une formation Router outlet Endroit réservé où Angular doit placer la vue
- 125. 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
- 126. 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
- 127. 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)
- 128. Merci
- 129. 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
- 130. Une formation Le projet Todo List L’approche orientée composant Développement Plan
- 131. Une formation Le projet Todo List
- 132. Une formation L’approche orientée composant
- 133. Une formation Démonstration Création du projet avec angular-cli Configuration de la base de données (deployd) Création des composants
- 134. Merci
- 136. 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
- 137. Une formation Prochaine formation Angular : Avancé
- 138. Une formation Shadow DOM La spécification Shadom DOM décrit comment encapsuler les éléments ou les styles de vos composants (rendre privé)