30 h
Web
2$/h – Angular JS 2.0
Objectifs :
Au terme de ce cours de perfectionnement, le participant sera en mesure de comprendre l’architecture de l’application Angular 2. En outre, il sera apte à concevoir une application Angular 2 et à la déployer.
Contenu :
Introduction au framework applicatif Angular
- Évolution radicale d’AngularJS
- Modularité de l’application : modules et composants
- Modules
- Composants et services
- Manipulation des composants, comme les balises
- Utilisation d’une extension à JavaScript (TypeScript ou Dart)
- Obtention de l’excellence d’Angular
- Round trip apps et applications d’une seule page
- Angular par rapport au framework MVC (voire MVVM)
Première application Angular
- Préparation de l’environnement de développement
- Création et préparation du projet
- Installation des paquets NPM
- Configuration du compilateur TypeScript
- Création du fichier HTML
- Démarrage du serveur
- Remplacement du contenu HTML
- Ajout Angular du projet
- Préparation du fichier HTML
- Création d’un modèle de données
- Création d’un composant
- Utilisation de l’application Ensemble
- Exécution de l’application
- Ajout de fonctionnalités à l’exemple d’application
- Résumé
TypeScript
- Introduction
- Définition de TypeScript
- Premier programme TypeScript
- Déclaration des variables
- Types
- Assertion des Types
- Fonctions fléchées
- Interfaces
- Classes
- Objets
- Constructeurs
- Modificateurs d’accès
- Modificateurs d’accès à l’intérieur des paramètres du constructeur
- Propriétés
- Modules
- Résumé
Création d’un projet Angular
- Préparation d’un projet de développement Angular et TypeScript
- Création de la structure des dossiers de projet
- Création et service du document HTML
- Préparation et configuration du projet
- Ajout de packages
- Création du modèle de données
- Création du modèle et de la racine des composants
- Configuration du module JavaScript Loader
- Mise à jour du document HTML
- Exécution de l’application
- Résumé
Utilisation du data binding
- Préparation de l’exemple de projet
- Compréhension de la notion de one-way data binding
- Utilisation de l’attribut de liaison
- Réglage des classes et des styles
- Utilisation des bindings de classes
- Interpolation d’une variable dans un template
- Property binding
- Event binding
- Two-way data binding
- Mise à jour des données dans l’application
- Résumé
Directives
- Introduction
- ngIf
- Propriétés cachées
- ngSwitchCase
- ngFor
- ngFor et détection de changement
- Utilisation de la directive ngTemplateOutlet
Formulaires dynamiques et gestion des événements
- Préparation de l’exemple de projet
- Ajout du module Formulaires
- Préparation du composant et du modèle
- Utilisation de la liaison de l’événement
- Présentation des propriétés définies dynamiquement
- Utilisation des données d’événements
- Utilisation de la directive ngModel
- Utilisation des formulaires
- Ajout d’un formulaire à l’exemple d’application
- Ajout de données en mode formulaire validation
- Validation d’un formulaire en entier
- Utilisation des formulaires à base de modèles
- Activation des formulaires en fonction Modèle
- Définition des classes Modèle de formulaire
- Utilisation du modèle pour la validation
- Génération des éléments du modèle
- Création d’un validateur de formulaire personnalisé
- Application d’un validateur personnalisé
Construction des composantes réutilisables
- Préparation de l’exemple de projet
- Structuration d’une application avec des composants
- Création de nouveaux composants
- Définition de modèles
- Fin de la restructuration des composants
- Utilisation des styles de composants
Les points suivants pourront être abordés, selon la vitesse d’apprentissage des participants :
Routage et navigation
- Introduction
- Préparation de l’exemple de projet
- Désactivation de l’affichage de changement d’état de l’événement
- Mise en route du routage
- Création d’une configuration de routage
- Création du composant de routage
- Exécution de la configuration
- Ajout de liens de navigation
- Effet de routage
- Fondements du routage
- Configuration des routes
- RouterOutlet
- RouterLink
- RouterLinkActive
- Récupération des paramètres d’un routage
- Paramètres de routage synonymes d’Observables
- Routes avec des paramètres multiples
- Paramètres de requête
- Enregistrement de plusieurs Observables
- Opérateur switchMap
- Navigation par programmation
- Exercices et solutions
Préalables
- Posséder des connaissances de base du HTML et des feuilles de style CSS.
- Posséder des notions élémentaires de programmation.