Formation Angular
Angular est le successeur d’AngularJS, le framework front-end repris et maintenu par Google. Angular architecture ses applications autour du concept de composant, permettant une meilleure réutilisation de code qu’auparavant. Cette version couvre Angular 9 et ses nouveautés, mais également les nouveautés apparues dans Angular 2, Angular 4, Angular 5, Angular 6, Angular 7 et Angular 8.
Objectifs pédagogiques / Compétences visées
- Appréhender les technologies utilisées par Angular
- Créer des composants d'UI
- Construire une Single Page Application (SPA)
- Communiquer avec le serveur
- Connaître des bonnes pratiques du framework
Pré-requis
- HTML/CSS
- JavaScript ou TypeScript
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Les IDEs JavaScript
- Visual Studio Code
- WebStorm
- EditorConfig
Une réintroduction à JavaScript
- Closures
- Fonctions Constructeurs et Prototype
- ES6, ES7, ES8, ES9, ES10, ES11, ESNext
JavaScript Asynchrone
- Callbacks et Boucle d’événements
- Utilisation de this dans un contexte asynchrone
- Callback Hell, Promise, async/await
- Observable avec RxJS
- Intercepter les callbacks Asynchrone avec zone.js
TypeScript
- Un surensemble de ECMAScript
- Typage statique
- Interfaces
- Comportements différents d’ECMAScript
- Décorateurs
Jour 2
Outillage d’un projet Angular
- webpack
- Live Server et Hot Reloading
- ESLint et TSLint
- Angular CLI
Introduction à Angular
- Architecture créée via Angular CLI
- NgModules
- Components et Metadata
- Templates et Data binding
- Directives et Pipes
- Services et Injection de Dépendance
Anatomie d’un template
- Property binding : bind et []
- Interpolation {{}}
- Event binding : on et ()
- Two way data binding : bindon et [()]
- ngClass, ngStyle, ngModel
- *ngIf, *ngFor, *ngSwitch
- Références vers Element, Directives et Composants
Anatomie d’un composant
- @Component vs Web Component
- Communication parent/enfant avec @Input et @Output
- Cycle de vie et Hooks
- Détection de changement
Jour 3
Modules
- NgModules vs. Modules JavaScript
- Imports, Exports, Declarations et Providers
- Features Modules
- CoreModule et SharedModule
Routeur
- Configuration des Routes
- Routes avec Paramètres
- Routes enfants et router-outlet imbriqués
- Sécuriser l’accès avec les Guards
- Resolver
- Lazy-loaded modules
Services
- Injection de dépendances
- Providers, useClass, useFactory, useValue et useExisting
- Services globaux et isolés
- Hierarchie des services
Http
- Récupérer des données JSON
- Gestion des erreurs
- Données non-JSON
- Intercepter les requêtes et réponses
- Annuler une requête
Jour 4
Formulaires
- Formulaires Réactifs vs Template Driven
- Rendu de formulaires
- Validation
Tests Automatisés
- Test Unitaires avec Jasmine et Karma
- Modules de Tests et Mocks
- HttpClientTestingModule
- Protractor et les tests End-to-End
Aller plus loin
- Création de directives et Pipes
- Réutilisation de composants entre projets
- Angular Animations
- Migrations entres les version d’Angular
- Platform-server : Server Side Rendering
- Sécurité
- Internationalisation / i18n
Moyens pédagogiques et techniques
- Formateur validé par nos équipes techniques et pédagogiques
- Salle de formation informatisée
- Support de cours numérique
Suivi et appréciation des résultats
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Formulaires d'évaluation
Formations associées
Dernière modification le 13/05/2021