Angular Initiation
5 jours - 5 heures
Objectifs
Réalisez efficacement des applications front Web avec Angular.
Participants
Architectes, Chefs de Projet, Consultants, Développeurs
Prérequis
Connaitre la programmation Javasscript avec une culture de Web
Pédagogie
La pédagogie est basée sur le principe de la dynamique de groupe avec alternance d'apports théoriques, de phases de réflexion collectives et individuelles, d'exercices, d'études de cas et de mises en situations observées. Formation / Action participative et interactive : les participants sont acteurs de leur formation notamment lors des mises en situation car ils s'appuient sur leurs connaissances, les expériences et mettront en œuvre les nouveaux outils présentés au cours de la session.
Public Visé
Collaborateurs - Développer ses compétences, s’affirmer comme expert dans son domaine, sécuriser son parcours professionnel ; Entreprises ou organisations - Accélérer les évolutions de carrière des collaborateurs, augmenter l’efficacité et l’employabilité des équipes… ; Demandeur d’emploi - Développer son employabilité, favoriser sa transition professionnelle...
Profil de l'intervenant
Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.
Accessibilité
Moyens techniques
Encadrement complet des stagiaires durant la formation. Espace d’accueil, configuration technique des salles et matériel pédagogique dédié pour les formations en centre. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.
Méthodes d'évaluation des acquis
Exercices individuels et collectifs durant la formation. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis de fin de stage sont adressées avec la facture.
Programme
Introduction
- Présentation de l'environnement de développement : vscode, NodeJS/npm
- Rappel des normes EcmaScript
- Installation de CLI Angular
- Créer un projet Angular : structure, parametrage et scripts
- Compilation incrémentale
TypeScript
- TypeScript vs EcmaScript
- Configuration et paramétrage
- Types de données : scalaires et agrégés
- Nullable, valeur par défaut, opérateurs ? et !
- Opérateurs : affectation, arithmétique, logique et relationnel
- Méthode, lambda et passage d'arguments
- Généricité
Modele applicatif Angular
- Détail d'un projet Angular : fichier, scripts et folders
- Les décorateurs Angular
- Pattern MVVM / MVW
- Concepts et éléments architecturaux: composant, service, directive, ...
- Travailler sur l'unité visuelle : composant
- template, module, Html, css, {{}} () [] [()] et attributs
- Classes, données et méthodes
- template instructions : ngFor, ngIf, ...,
- Travailler avec la DOM : opérateur marqueur #
- Gestion de modules : import
- Modèle standalone
- Interfaces : OnInit, OnChanges
Binding de variables
- Data Binding : simplirection ou bidirectionnel
- Les directives importantes : ViewChild
- La gestion des Events et l'objet $event
Les Formulaires réactifs
- Présentation des formulaires
- Modéle de données : FormGroup, FormControl
- Gérer la validations des champs et du formulaire
- Valider les formulaires : ngSubmit et format Json
- Créer des validateurs personnalisés
Routage
- Le Module de Routage
- Déclarer les routes d'un projet : template, API
- Route par défaut et redirection
- Intercepter le routage avec les guards
- Routes imbriquées
Les Directives
- Attributs et expression pour les templates : [], {{}} et ()
- Les directives ngFor, ngIf, ngSwitch, ngClass, ngStyle
- Créer une directive personnalisée
- Transmettre des valeurs à une directive (@input, @output)
- Gérer les événements dans une directive
- Utiliser les attributs ARIA (directive attr.*)
- Angular multilangue
Les pipes
- Conceptes de base et transformation avec |
- Pipes prédéfinis
- Pipes personnalisés
- Les pipes pures et impures
Services et injection
- Concept de d'un service injectable
- Importer et injection de service
- Différents types de service: classe, valeur, fabrique...
Client microservice Rest API
- Principe de communication asynchrone : Promise
- Fonctionnement des promesses et async/await
- Présentation des Observables RxJS
- Le Module HttpClientModule
- Communiquer avec une API REST (http.get, http.post, etc)
- Appliquer des fonctions de callback
- Gestion des erreurs
- Typage les données retournées
Tests Unitaires
- TDD: Développement piloté par les tests
- Présentation des frameworks Jasmine ou Jest
- Mettre en place Jest dans un projet Angular
- Implémenter des tests-unitaires Angular
- Test en ligne de commandes
Déploiement
- Dist : version distribuable du projet Angular
- Les commandes de compilation et options :AOT/JIT
