Formation ANGULAR Prise en main du framework
Objectifs
Identifier les concepts fondamentaux d’Angular et les différences avec AngularJS.
Expliquer les principes des design patterns MVC, MVVM et MVW.
Utiliser Angular CLI pour créer et configurer un projet Angular.
Analyser les cycles de vie des composants et les événements associés.
Intégrer Angular dans une architecture REST et une programmation réactive.
Évaluer les performances des applications Angular en utilisant des tests automatisés.
Concevoir des composants réutilisables et des directives personnalisées.
Utiliser RxJS pour implémenter des fonctionnalités de programmation réactive.
Analyser les avantages et les inconvénients des différentes technologies de feuilles de style.
Déployer une application Angular en tant que Progressive Web Application (PWA).
Pré-requis
Participants
Programme de formation
INTRODUCTION
Angular vs AngularJS
Historique
Les design patterns MVC, MVVM et MVW
Présentation de Typescript et de la transpilation
NodeJS et NPM
Installation et configuration
Intégration. Compatibilité, versions, documentation
Fonctionnalités et principes généraux
Compilateur HTML
Angular CLI et ng
LES COMPOSANTS
Présentation des composants
Création d'un composant
Les templates
Les expressions
La classe du composant
Le style des composants
Les différentes technologies de feuilles de style
Les modules
L'interpolation {{ }}
L'architecture orientée composant
Les directives
L'instanciation JSON
Le paramétrage des composants
Cycle de vie d'un composant
Les évènements
Les filtres
Création d'un filtre
MODULE ET INJECTION DE DÉPENDANCE
Principe de l'injection de dépendance IoD
Notion de module. Configuration
Découper son application
GESTION DES FORMULAIRES
Le two-way data binding
Le ng-model
La validation HTML
Le dirty-checking
La validation dans le composant
TYPESCRIPT
TS vs ES vs JS
Les bases de TS
Les collections
La arrow function
Les modules TS, import, export
L'orienté objet
L'encapsulation
L'héritage
Le polymorphisme
La programmation objet par prototypage
ANGULAR MATERIAL
La programmation responsive
Rappels sur CSS
Angular Material
Installation
Utilisation de composants material
LES DIRECTIVES
Introduction aux directives (ngFor, ngIf, ?,...)
Les évènements
Création de containeur
Création de directives
@Input et @Output
Le passage de paramètres montants et descendants
Les directives structurelles
INTÉGRATION DES TESTS AUTOMATISÉS
Test Driven Development TDD et BDD côté client
Karma
Jasmine
PhantomJS
Tests unitaires
Mocking JS
Tests d'intégrations
Tests End to End Testing : interface utilisateur
LES SERVICES
Le pattern service
Les services Angular, les entités et les DTO
Les services et l'IoD @Injectable
Création d'un service
LA PROGRAMMATION RÉACTIVE
Principes de la programmation réactive
RxJS
Observable
Souscription
Map et filter
Pipe complexes
Bonnes pratiques d'architecture : Service, composant et modèles réactifs
DÉFINITION DES ROUTES
Les single page application SPA
Routing
Le "deep linking"
Les paramètres des routes
LES SERVICES REST
Les applications RESTFul
Exemple .NET Web API, Java JAX-RS, Python Flask
Gestion de la sécurité XSS
APPLICATION MODEL VIEW WHATEVER
Le pattern MVW
Déployer l'application dans une app Android, Windows ou iPhone
Utilisation d'Apache Cordova
Intégration d'Angular avec Cordova
Utilisation de fonctionnalités dédiés aux mobiles (tactile, sms, appareil photo...)
PROGRESSIVE WEB APPLICATION
Qu'est-ce qu'une application PWA ?
Créer un PWA
Déployer un PWA