Formation Angular
Angular est un framework de développement de front-end open source qui permet de créer des applications web dynamiques et modernes. Il a été développé par Google et est basé sur le langage de programmation JavaScript. Angular utilise un modèle de programmation orienté composant, qui permet de structurer votre code de manière modulaire et réutilisable. Il offre également une série de fonctionnalités avancées telles que la gestion des données en temps réel, la gestion de l'état de l'application et le routage de pages. En utilisant Angular, vous pouvez créer des applications web complexes et interactives rapidement et de manière efficace. Il est utilisé par de nombreuses entreprises et organisations à travers le monde pour développer des applications web professionnelles.
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
