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.