Objectifs

– Initier les apprenants à la programmation FrontEnd en utilisant le Framework Angular

– Appréhender l’architecture à base de composants et de son éco système

– Comprendre les services et l’injection de dépendances

– Créer un système de routing

– Interagir avec des API tout en manipulant les Observables RxJs

Programme

– Présentation d’Angular

– Architecture d’Angular

– Principaux concepts et notions

– Installation d’Angular
Travaux pratiques
Prise en main de l’environnement de développement

– Arborescence d’un projet Angular

– Définition

– Arbre de composants

– Création d’un composant

– Imbrication entre Composants

– Le Data Binding

– L’interpolation

– Property Binding

– Event Binding

– Two way Binding Cycle de vie d’un composant

– Interaction entre composants
Travaux pratiques
Création de composants Angular, ajout de styles et mise en œuvre des
différents types de databinding., transformation de composants en custom
elements.

– Les directives d’attribut

– Les directives d’attribut (ngStyle) et (ngClass)

– Customiser une directive d’attribut

– Les directives structurelles

– Les directives structurelles *ngIf et *ngFor
Travaux pratiques
Utilisation des directives

– Syntaxe

– Les pipes disponibles par défaut (Built-in pipes)

– Paramétrer un pipe

– Pipe personnalisé – Exemple de pipe personnalisé
Travaux pratiques
Manipulation des pipes (paramètres, notion de Change Detection) pour enrichir ses composants.

– Définition

– Création d’un service

– Premier Service

– Injection de dépendance (DI)

– @Injectable

– DI Hiérarchique

– Injecter un service dans un autre
Travaux pratiques
Développement et déclarations de services personnalisés.

– Quel est le rôle d’un formulaire ?

– Approche de gestion de FORM

– Approche basée Template/ Template Driven Approach

– Approche basée Template NgForm

– Approche basée Template Validation

– Approche basée Template Accéder aux propriétés d’un champ (contrôle) du formulaire

– Approche basée Template Associer des valeurs par défaut aux champs

– Approche basée Template Grouping form
Travaux pratiques
Création d’un formulaire, enregistrement des contrôles et mise en œuvre de tests.

– Définition

– Création d’un système de Routing

– Préparer l’emplacement d’affichage des vues correspondantes aux routes

– Syntaxe minimaliste d’une route

– Déclencher une route [routerLink]

– Comment représenter une route

– Déclencher une route à partir du composant

– Les paramètres d’une route Récupérer les paramètres d’une route

– Passer le paramètre à travers le tableau de routerLink

– Route Fils

– Redirection

– Redirection : gestion d’erreurs de rooting
Travaux pratiques
Définition des routes et navigation dans une application.

– Installation de HTTP

– Le pattern « Observable »

– Les subjects

– Interagir avec une API Get

– Interagir avec une API POST

– Authentification

– Les Guard

– Les intercepteurs
Travaux pratiques
Utilisation des observables et comparaison avec d’autres techniques (promises, event handlers, arrays), interactions
avec un serveur Firebase.

– Créer le Build de votre projet

– Déployer en local votre projet

– Déployer votre projet sur github
Travaux pratiques
Déploiement de projet

– Introduction

– Lancer les tests unitaires

– Exemple de test unitaire pour un composant

– Spécifier les tests à lancer

– Exclure un ensemble de tests
Travaux pratiques
Tests unitaires et aperçu de la mise en œuvre d’une démarche TDD

Référence :  WEB008

Type de Stage : Pratique

Durée : 4 jours

Public concerné:

Développeurs et chefs de projets
Web.

Prérequis:

Bonnes connaissances en Html,
Css, javascript