Angular JS 2.0 - Groupe 80708

Formation offerte en collaboration avec Services Québec

Cours WEB-PRO

Durée 30 heures

Lieu

2030, boul. Pie-IX

Local

Le numéro sera affiché à l'entrée du campus situé au 4e étage.

Numéro de groupe

80708

Frais avant taxes

(frais de matériel didactique inclus)

Services Québec: 113,07 $ CAD

Grand public: 666,81 $ CAD

Date(s)

24, 25 nov. et 1, 2 déc. 2018

Jour(s)

Samedi, dimanche

Horaire

8 h à 16 h 30

Clientèle

Services Québec
Personnes en emploi / Personnes sans emploi

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.

Approche pédagogique

Le cours sera articulé autour de la conception d’une application qui sera enrichie à chacune des étapes de la formation.

Attestation délivrée en fin de cours

Une attestation de participation est remise aux personnes ayant assisté à plus de 80 % des heures de formation.

Matériel pédagogique

Matériel didactique

Autres particularités

Afin d'atteindre un bon niveau de maîtrise, le participant devrait compléter le cours par la pratique personnelle

Contenu du cours

1. 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)

2. 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é

3. 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é

4. 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é

5. 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é 

6. Directives

  • Introduction
  • ngIf
  • Propriétés cachées
  • ngSwitchCase
  • ngFor
  • ngFor et détection de changement
  • Utilisation de la directive ngTemplateOutlet

7. 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é

8. 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.

9. 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
College de Maisonneuve | Formation continue