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