Passer au contenu
30 h

Web

Angular JS 2.0

Préalables

Posséder des connaissances de base du HTML et des feuilles de style CSS. Posséder des notions élémentaires de programmation.

Objectifs :

À la fin du cours, le participant sera en mesure de comprendre l’architecture d’une application Angular 2. En outre, il sera capable de concevoir et déployer une application Angular 2.

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 des balises
    • Utilisation d’une extension à JavaScript (TypeScript ou Dart)
    • Obtention de l’excellence d’Angular
    • Round-Trip 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 Configuration du projet 
    • Ajout de packages 
    • Création du modèle de données 
    • Création du modèle et la racine des composants
    • Configuration du module JavaScript Loader 
    • Mise à jour du document HTML
    • Exécution de l’application
    • Résumé
  • Utilisation Data binding
    • Préparation de l’exemple de projet 
    • Compréhension d’One-Way Data binding
    • Utilisation de l’attribut de liaison 
    • Réglage des classes et styles 
    • Utilisation des bindings de classe 
    • 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 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 formulaire validation 
    • Formulaire en entier Validation 
    • Utilisation des formulaires à base de modèle 
    • 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 formulaire personnalisé validateurs 
    • Application d’un validateur personnalisé
  • Construction des composantes réutilisables
    • Préparation de l’exemple de projet 
    • Structuration une application avec des composants 
    • Création de nouveaux composants 
    • Modèles Définition 
    • Fin de la restructuration des composants
    • Utilisation des styles de composants

Les points suivants seront 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 de 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 d’un routage synonymes d’Observable
    • Routes avec des paramètres multiples
    • Paramètres de requête
    • Enregistrement de plusieurs Observables
    • Opérateur SwitchMap
    • Navigation par programmation
    • Exercices et solutions