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 13 et ses nouveautés, mais également les nouveautés apparues dans Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 et Angular 12.
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 05/11/2021