Passer au contenu
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.