Angular et Node.js Optimisez le développement de vos applications web avec une architecture MEAN

Transcription

1 Introduction 1. Introduction L'architecture MEAN pour une application web Le principe des applications monopages (single page applications) Le paradigme de conception modèle-vue-contrôleur Angular au centre de l'architecture MEAN Présentation du fil rouge : une application d'e-commerce 21 Le langage JavaScript 1. Introduction à JavaScript Bref historique Panorama de l'utilisation de JavaScript Les bibliothèques et les frameworks applicatifs JavaScript Où coder du code JavaScript? Les outils du navigateur et le débogage Les éléments de programmation de base Les variables Les types internes Le transtypage Les structures de données usuelles Application d'expressions régulières Les blocs d'instructions Les structures conditionnelles La structure if... else 35 1/12

2 4.5.2 La structure switch d'aiguillage multiple Les structures itératives Les structures itératives avec indices de boucle Les structures itératives sans indices de boucle La programmation fonctionnelle en JavaScript Une fonction passée en paramètre (fonction de callback) Exemple avec la méthode foreach() Exemple avec la méthode map() Une fonction retourne une fonction (factory) La programmation objet avec JavaScript Les principes de la programmation objet avec JavaScript Les objets littéraux L'héritage par chaînage de prototypes La propriété proto de l'objet héritant La propriété prototype La création d'un objet par l'appel d'une fonction constructrice Exemples d'implémentations d'une méthode La problématique de l'objet courant (this) L'héritage Le chaînage de méthodes Les principaux apports de la norme ECMAScript La norme ECMAScript Le mot réservé let L'interpolation de variables dans les chaînes Les paramètres par défaut Une manipulation plus confortable des listes La structure for (... of...) La méthode includes() L'opérateur «fat arrow» (=>) Les classes La programmation réactive, les observables et les promises 55 2/12

3 8.1 Premier exemple : un observable sur un bouton Deuxième exemple : un observable sur un entier Troisième exemple : un observable sur un timer Les promises 59 Les extensions à JavaScript pour utiliser des classes 1. Présentation des extensions à JavaScript Le langage TypeScript Le transpiler tsc Typage statique des variables Les types de base Typage de variables non scalaires Le type enum Le type générique any Typage des fonctions Les classes L'héritage Les interfaces La généricité Le langage Dart Installation et test de Dart Généreration du code JavaScript avec Dart Les classes L'héritage Les interfaces 71 La plateforme Node.js 1. Présentation de Node.js 73 3/12

4 2. Installation et test de Node.js Création du fichier de test Installation et test de Node.js sous Ubuntu Installation et test de Node.js sous Windows Installation et test de Node.js sous macos La modularité de Node.js Les modules et les packages Le gestionnaire de modules de Node.js : npm Spécification des dépendances : le fichier package.json Création d'un premier serveur Node.js de test Création et réutilisation d'un module Création d'un serveur renvoyant des données Le module express Gestion de routes REST avec le module express Gestion des templates avec le module express Spécification des dépendances dans un fichier package.json Installation du module express Le module fs (FileSystem) Test d'un serveur Node.js Création d'un fichier de données JSON La problématique du contrôle d'accès HTTP Renvoi au client d'un fichier JSON Paramétrage des routes Gestion des paramètres Sécurisation d'un serveur Node.js (protocole HTTPS) Création de l'autorité de certification Création du certificat Création du serveur Bilan des acquis de ce chapitre 102 4/12

5 Le SGBD NoSQL MongoDB 1. Introduction Pourquoi utiliser une base de données NoSQL? Présentation de MongoDB Les collections et les documents Les index Mise en œuvre de MongoDB Installation de MongoDB Installation de MongoDB sous Linux Installation de MongoDB sous Windows ou sous macos Utilisation de MongoDB en lignes de commande Affichage de la liste des bases de données Création d'une base de données Affichage de la liste des collections Création d'une collection Insertion des documents dans une collection Importation de documents à partir d'un fichier Exportation des documents d'une collection dans un fichier JSON Interrogation d'une collection Interrogation via un objet «filtre» Les opérateurs de comparaison, les opérateurs ensemblistes et logiques L'opérateur $exists L'opérateur $in L'opérateur $nin L'opérateur $or L'opérateur $not L'opérateur $nor Application d'expressions régulières Les projections et la méthode distinct() Les projections 116 5/12

6 4.8.2 La méthode distinct() Référencement des documents et jointures Les objets imbriqués (nested objects) Les objets référencés Les jointures Mise à jour et suppression d'un document Mise à jour d'un document Suppression d'un document Suppression d'une collection Utilisation de MongoDB via Node.js Installation du module MongoDB pour Node.js Connexion au serveur MongoDB Insertion de données à partir d'un serveur Node.js Interrogation de données à partir d'un serveur Node.js Exploitation du résultat de la méthode find() Utilisation de la méthode toarray() Synchronisation des requêtes Utilisation des fonctions de callback Utilisation du module async La méthode async.series() La méthode async.waterfall() Interrogation de MongoDB via les routes gérées par express La structure d'un serveur Node.js interrogeant MongoDB La problématique du cross-origin resource sharing Exemples de gestion de routes Gestion d'une route pour lister les marques Gestion d'une route pour filtrer les produits Recherche d'un produit à partir de son identifiant interne Le fil rouge du côté serveur Création de la collection Mise en place de deux recherches sur les produits La superstructure du serveur 148 6/12

7 7.2.2 Gestion de la route qui filtre les documents sur différents critères Gestion de la route qui renvoie un document via son identifiant interne Exemples de requête sur le serveur Bilan des acquis de ce chapitre 151 Introduction au framework applicatif Angular 1. Présentation d'angular Une évolution radicale d'angularjs La modularité de l'application : les modules et les composants Les modules Les composants et les services Manipulation des composants comme des balises Utilisation d'une extension à JavaScript (TypeScript ou Dart) Angular par rapport au framework MVC (voire MVVM) Mise en place d'une application Angular Présentation d'angular CLI Installation d'angular CLI Création d'un projet Angular avec Angular CLI Structure des dossiers d'un projet Angular CLI Un premier composant créé par Angular CLI Le root module créé par Angular CLI Les décorateurs Création d'un nouveau composant qui affiche un message Création du composant Le template HTML La feuille de style Interfaçage du composant dans le composant racine 172 7/12

8 5.3 Spécification des composants dans le module Activation du module La page web frontale Le cycle de vie d'un composant Le hook ngonchanges() Le hook ngoninit() Le hook ngdocheck() Le hook ngondestroy() Bilan des acquis de ce chapitre 178 Angular : les templates, bindings et directives 1. Les templates Imbrication des templates Les templates insérés (embedded templates) Les templates externalisés Data bindings entre le composant et le template Accès aux éléments du DOM Interpolation d'une variable dans un template Property binding Event binding Two-way data binding Les directives Les directives structurelles La directive *ngfor La directive *ngif Les directives attributs Émission d'information d'un composant vers son père (@Output()) 208 8/12

9 4. Les pipes Exemple de synthèse : un formulaire d'authentification Le fil rouge : création d'un composant qui affiche les produits Le composant La classe implémentant le composant Le template HTML La feuille de style Le module spécifiant le composant Activation du module La page web frontale Lancement de l'application Bilan des acquis de ce chapitre 225 Angular et la connexion à Node.js : les services 1. Introduction Injection de dépendances Utilisation des services pour le transfert de données Récupération de données formatées en JSON Envoi de données JSON au serveur Envoi de données via la querystring Mise en œuvre des services dans le fil rouge Déclaration des routes du côté serveur Gestion des produits Affichage des sélecteurs 235 9/12

10 4.2.2 Affichage des produits suivant des critères de recherche Affichage des produits associés à des mots-clés Accès à un produit par son identifiant Gestion du panier Affichage des identifiants des produits du panier Affichage de tous les produits du panier Ajout d'un produit au panier Suppression d'un produit du panier Réinitialisation du panier Bilan des acquis de ce chapitre 252 Angular et la gestion des routes internes 1. Principe général du routage Pourquoi mettre en place un routage? Les routes, le routeur, les tables de routage Les vues activées par les routes Exemple de routage Définition d'un arbre de vues Utilisation des outlets nommées La syntaxe des routes Les deux syntaxes d'une route : chaîne ou link parameters array Les routes absolues et les routes relatives Paramétrage des routes Association d'une route à une auxiliary outlet Sélection des routes La directive routerlink La méthode navigate() Exemple de route /12

11 4. Gestion des routes du contrôleur vers le composant cible Configuration de la table de routage Les propriétés d'une route Prise en charge d'une route par plusieurs modules/tables de routage Contrôle des routes : les guards Invocation d'un composant Capture d'une route lors de l'invocation d'un composant Gestion de routes dans le fil rouge Le module de routage associé au root module Le module de routage associé au feature module research Le module de routage associé au feature module cart Bilan des acquis de ce chapitre 304 Angular et la visualisation d informations 1. Introduction Création de charts avec D3.js et dc.js Installation de D3.js Le langage SVG Génération d'éléments graphiques associés aux objets d'une collection Sélection et modification d'éléments du DOM Ajout d'éléments graphiques Remplacement d'éléments graphiques Mise en œuvre d'écouteurs d'événements Intégration de D3.js dans Angular Un serveur virtuel de données commerciales Le service accédant aux données du serveur Le template du composant qui affiche un histogramme Implémentation du composant qui affiche un histogramme /12

12 2.7 Les bibliothèques dc.js et Crossfilter Installation de dc.js et de Crossfilter Implémentation du composant affichant l'histogramme Intégration de cartes Google Map dans un projet Angular Installation des prérequis techniques Installation des types TypeScript Installation de la bibliothèque PrimeNG Présentation d'une carte Google Map statique Un composant PrimeNG pour gérer une carte Google Map Gestion d'un chart associé à une Google Map Autre exemple de composant PrimeNG (Calendar) Bilan des acquis de ce chapitre 343 Test et déploiement 1. Test Déploiement Déploiement avec Apache Déploiement avec Node.js Déploiement avec http-server (raccourci sur Node.js) Pour aller plus loin 352 Index /12