AJC FORMATION : 05. Angular - Développement d'applications web
Organisme
75009 PARIS 9
Contact
Durée
21 heuresModalités
- Classe virtuelle
- Présentiel
Les participants réalisent tout au long des exercices, QCM et/ou cas pratiques. En fin de formation, les acquis sont vérifiés
Prix
Public
Architectes, développeurs, chefs de projets…
Pré-requis
Avoir des connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript.
Objectifs pédagogiques
- Maîtriser les fondamentaux du Framework Angular et ses nouveautés
- Organiser, modulariser et tester ses développements JavaScript
- Savoir développer plus rapidement et tester des applications web Angular 2 avec JavaScript et TypeScript
- Connaître les bonnes pratiques de développement et de mise en production
- Découvrir les spécifications EcmaScript 6 (ES6)
- Savoir intégrer les tests unitaires au développement
Programme détaillé
Présentation
- Positionnement d’Angular
- Angular vs AngularJS
- Rôles de TypeScript et ES6+
- Aperçu de l’architecture
- Présentation d’Angular CLI
- Découverte d’un exemple minimal
- La phase de démarrage
Outillage
- Débogage dans le navigateur
- Visual Studio Code
Travaux pratiques : Installation de l’environnement de développement
TypeScript et ES6+
- Transpilation
- Let et const
- Template strings
- Typage
- Classes et interfaces
- Les modules
- Arrow functions
- Décorateurs
Travaux pratiques : Création de nos premières classes TypeScript et compilation avec tsc
Les composants
- La notion centrale d’Angular
- Structure d’une application Angular
- NgModule
- Structure d’un composant
- Template
- Styles
- Création d’un composant avec Angular CLI
- Cycle de vie des composants
- Imbrication des composants
- Content projection
Les templates
- Template et DOM
- Interpolation et expressions
- Binding et interactions
- @Input et @Output
- Binding bidirectionnel
- La notion de directives
- Directive de structure et directive d’attribut
- NgClass, NgStyle et NgModel
- NgFor, NgIf et NgSwitch
- Les pipes
Travaux pratiques : Création d’un composant d’affichage
Injection de dépendances
- Principes
- Les services et @Injectable
- Injectors et providers
- Les types de providers
- Token et @Inject
Travaux pratiques : Création d’un service injectable utilisé dans le composant des travaux précédents
RxJS et Observables
- Principes de la programmation réactive
- La librairie RxJS
- La notion de flux
- Les ‘Observables’
Routage
- Importance du routage
- Configuration du RouterModule
- RouterOutlets
- Définition des routes
- Naviguer vers une route
- Routes secondaires
- Routes paramétrées
Travaux pratiques : Mise en place et configuration d’une route d’accès au composant précédent
Appels HTTP
- La notion de services HTTP
- Les APIs proposées : Http et HttpClient
- Envoi de requêtes
Travaux pratiques : Création d’un service injectable utilisant l’API HttpClient pour se connecter un service Web REST
Formulaires
- Structure d’un formulaire
- Formulaires par template
- Validations
- Gestion des styles
- Formulaires réactifs
- FormControl et FormGroup
- Groupe de champs avec FormBuilder
- Gestion des modifications
Travaux pratiques : Mise en place d’un formulaire de création et/ou modification en complément du composant précédent
Les tests
- L’infrastructure de test : Jasmine, Karma et Protactor
- Tests de composants
- Tests et injection de dépendances
- Tests et routage
- Tests et code asynchrone
- Tests et appels http
Travaux pratiques : Mise en place et exécution de test unitaires sur le composant et le service Http