Ce livre s'adresse à tout informaticien qui souhaite optimiser le développement industriel de ses applications web avec la mise en place d'une architecture MEAN (basée sur MongoDB, le framework Express, le framework Angular et un serveur Node.js). L'auteur lui donne les clés pour répondre aux nouvelles exigences de plus en plus fortes de ce type de développement, à savoir le besoin de réutiliser des briques logicielles pour augmenter la productivité du développement et l'optimisation de la charge des serveurs qui ne cesse d'augmenter.

Le développement d'une application Angular au sein d'une architecture MEAN bénéficie de la cohérence de l'utilisation de JavaScript, et de son extension TypeScript, au niveau du client et du serveur. Dans les deux premiers chapitres, le lecteur trouvera ainsi les informations nécessaires pour comprendre ce langage permettant une programmation objet avec classes. Sont ensuite détaillés, d'une part la mise en œuvre d'un serveur Node.js extrêmement réactif, et d'autre part le framework applicatif Angular (en version 8 au moment de l’écriture). Celui-ci permet de créer des applications monopages (interagissant avec le serveur uniquement pour échanger des données) et fait preuve d'une modularité exemplaire organisée en deux niveaux : les modules et les composants. Le livre présente également le système de gestion de bases de données NoSQL MongoDB qui, associé aux deux autres piliers de l'architecture, permettra un accès performant à une très forte volumétrie de données.

La visualisation d'informations étant par ailleurs un domaine phare d'Angular, l'affichage de graphiques ainsi que l'annotation graphique de Google Maps sont également étudiés. Enfin, l'utilisation de trois bibliothèques de composants graphiques très populaires (PrimeNG, Material et ngx-bootstrap) est également introduite en fin d'ouvrage.

Tout au long du livre, un fil rouge avec de très nombreux exemples de code guide le lecteur vers la création d'une application de e-commerce, exemple idéal pour illustrer la mise en œuvre d'une architecture MEAN.



Quizinclus dans
la version en ligne !

• Testez vos connaissances à l'issue de chaque chapitre
• Validez vos acquis

Téléchargements

• Des fichiers complémentaires (1,75 Mo)

Avant-propos

1. Organisation de cet ouvrage

Introduction

1. Introduction
2. L'architecture MEAN pour une application web
   1. 1. Le principe des applications monopages (single pageapplications)
   2. 2. Le paradigme de conception modèle-vue-contrôleur
3. Angular au centre de l'architecture MEAN
4. Présentation du fil rouge : une application d'e-commerce

Le langage JavaScript

1. Introduction à JavaScript
   1. 1. Bref historique
   2. 2. Panorama de l’utilisation de JavaScript
   3. 3. Les bibliothèques et les frameworks applicatifsJavaScript
2. Où coder du code JavaScript ?
3. Les outils du navigateur et le débogage
4. Les éléments de programmation de base
   1. 1. Les variables
      1. a. Les types internes
      2. b. Le transtypage
   2. 2. Les structures de données usuelles
   3. 3. Application d’expressions régulières
   4. 4. Les blocs d’instructions
   5. 5. Les structures conditionnelles
      1. a. La structure if ... else ...
      2. b. La structure switch d’aiguillage multiple
   6. 6. Les structures itératives
      1. a. Les structures itératives avec indices deboucle
      2. b. Les structures itératives sans indices deboucle
5. La programmation fonctionnelle en JavaScript
   1. 1. Une fonction passée en paramètre(fonction de callback)
      1. a. Exemple avec la méthode forEach()
      2. b. Exemple avec la méthode map()
   2. 2. Une fonction retourne une fonction (factory)
6. La programmation objet avec JavaScript
   1. 1. Les principes de la programmation objet avec JavaScript
   2. 2. Les objets littéraux
   3. 3. L’héritage par chaînage de prototypes
      1. a. La propriété __proto__ del’objet héritant
      2. b. La propriété prototype
   4. 4. La création d’un objet par l’appel d’unefonction constructrice
   5. 5. Exemples d’implémentations d’une méthode
   6. 6. La problématique de l’objet courant (this)
   7. 7. L’héritage
   8. 8. Le chaînage de méthodes
7. Les principaux apports de la norme ECMAScript 6
   1. 1. La norme ECMAScript
   2. 2. Le mot réservé let
   3. 3. L’interpolation de variables dans les chaînes
   4. 4. Les paramètres par défaut
   5. 5. Une manipulation plus confortable des listes
      1. a. La structure for (... of …) ...
      2. b. La méthode includes()
   6. 6. L’opérateur « fat arrow » (=>)
   7. 7. Les classes
8. La programmation réactive, les observables et les promises
   1. 1. Premier exemple : un observable sur un bouton
   2. 2. Deuxième exemple : un observable sur un entier
   3. 3. Troisième exemple : un observable sur untimer
   4. 4. Les promises

Extensions JavaScript pour les classes

1. Présentation des extensions à JavaScript
2. Le langage TypeScript
   1. 1. Le transpiler tsc
   2. 2. Typage statique des variables
      1. a. Les types de base
      2. b. Typage de variables non scalaires
      3. c. Le type enum
      4. d. Le type générique any
      5. e. Typage des fonctions
   3. 3. Les classes
      1. a. L’héritage
      2. b. Les interfaces
      3. c. La généricité
3. Le langage Dart
   1. 1. Installation et test de Dart
   2. 2. Génération du code JavaScript avecDart
   3. 3. Les classes
      1. a. L’héritage
      2. b. Les interfaces

La plateforme Node.js

1. Présentation de Node.js
2. Installation et test de Node.js
   1. 1. Création du fichier de test
   2. 2. Installation et test de Node.js sous Ubuntu
   3. 3. Installation et test de Node.js sous Windows
   4. 4. Installation et test de Node.js sous Mac OS
3. La modularité de Node.js
   1. 1. Les modules et les packages
      1. a. Le gestionnaire de modules de Node.js : npm
      2. b. Spécification des dépendances :le fichier package.json
   2. 2. Création d’un premier serveur Node.js detest
   3. 3. Création et réutilisation d’un module
   4. 4. Création d’un serveur renvoyant des données
   5. 5. Le module express
      1. a. Gestion de routes REST avec le module express
      2. b. Gestion des templates avec le module express
      3. c. Spécification des dépendances dansun fichier package.json
      4. d. Installation du module express
   6. 6. Le module fs (FileSystem)
   7. 7. Test d’un serveur Node.js
      1. a. Création d’un fichier de donnéesJSON
      2. b. La problématique du contrôle d’accèsHTTP
      3. c. Renvoi au client d’un fichier JSON
      4. d. Paramétrage des routes
      5. e. Gestion des paramètres
4. Sécurisation d'un serveur Node.js (protocole HTTPS)
   1. 1. Création de l’autorité de certification
   2. 2. Création du certificat
   3. 3. Création du serveur
5. Bilan des acquis de ce chapitre

Le SGBD NoSQL MongoDB

1. Introduction
2. Pourquoi utiliser une base de données NoSQL ?
3. Présentation de MongoDB
   1. 1. Les collections et les documents
   2. 2. Les index
4. Mise en œuvre de MongoDB
   1. 1. Installation de MongoDB
      1. a. Installation de MongoDB sous Linux
      2. b. Installation de MongoDB sous Windows ou sous Mac OS
      3. c. Utilisation de MongoDB en lignes de commande
   2. 2. Affichage de la liste des bases de données
   3. 3. Création d’une base de données
   4. 4. Affichage de la liste des collections
   5. 5. Création d’une collection
      1. a. Insertion des documents dans une collection
      2. b. Importation de documents à partir d’un fichier
      3. c. Exportation des documents d’une collection dans unfichier JSON
   6. 6. Interrogation d’une collection
      1. a. Interrogation via un objet « filtre »
      2. b. Les opérateurs de comparaison, les opérateursensemblistes et logiques
      3. c. L’opérateur $exists
      4. d. L’opérateur $in
      5. e. L’opérateur $nin
      6. f. L’opérateur $or
      7. g. L’opérateur $not
      8. h. L’opérateur $nor
   7. 7. Application d’expressions régulières
   8. 8. Les projections et la méthode distinct()
      1. a. Les projections
      2. b. La méthode distinct()
   9. 9. Référencement des documents et jointures
      1. a. Les objets imbriqués (nested objects)
      2. b. Les objets référencés
      3. c. Les jointures
   10. 10. Mise à jour et suppression d’un document
       1. a. Mise à jour d’un document
       2. b. Suppression d’un document
   11. 11. Suppression d’une collection
5. Utilisation de MongoDB via Node.js
   1. 1. Installation du module MongoDB pour Node.js
   2. 2. Connexion au serveur MongoDB
   3. 3. Insertion de données à partir d’unserveur Node.js
   4. 4. Interrogation de données à partird’un serveur Node.js
      1. a. Exploitation du résultat de la méthodefind()
      2. b. Utilisation de la méthode toArray()
   5. 5. Synchronisation des requêtes
      1. a. Utilisation des fonctions de callback
      2. b. Utilisation du module async
      3. c. La méthode async.series()
      4. d. La méthode async.waterfall()
6. Interrogation de MongoDB via les routes gérées par express
   1. 1. La structure d’un serveur Node.js interrogeant MongoDB
   2. 2. La problématique du cross-origin resourcesharing
   3. 3. Exemples de gestion de routes
      1. a. Gestion d’une route pour lister les marques
      2. b. Gestion d’une route pour filtrer les produits
      3. c. Recherche d’un produit à partir de son identifiantinterne
7. Le fil rouge du côté serveur
   1. 1. Création de la collection
   2. 2. Mise en place de deux recherches sur les produits
      1. a. La superstructure du serveur
      2. b. Gestion de la route qui filtre les documents sur différentscritères
      3. c. Gestion de la route qui renvoie un document via sonidentifiant interne
      4. d. Exemples de requête sur le serveur
8. Bilan des acquis de ce chapitre

Introduction au framework applicatif Angular

1. Présentation d'Angular
   1. 1. Une évolution radicale d’AngularJS
   2. 2. La modularité de l’application : les moduleset les composants
      1. a. Les modules
      2. b. Les composants et les services
   3. 3. Manipulation des composants comme des balises
   4. 4. Utilisation d’une extension à JavaScript(TypeScript ou Dart)
2. Angular par rapport au framework MVC (voire MVVM)
3. Mise en place d'une application Angular
   1. 1. Présentation d’Angular CLI
   2. 2. Installation d’Angular CLI
   3. 3. Création d’un projet Angular avec AngularCLI
   4. 4. Structure des dossiers d’un projet Angular CLI
   5. 5. Un premier composant créé par AngularCLI
   6. 6. Le root module créé par AngularCLI
   7. 7. Mise à jour d’Angular via Angular CLI
4. Génération du code JavaScript à partir de TypeScript
5. Les décorateurs
6. Création d'un nouveau composant qui affiche un message
   1. 1. Création du composant
      1. a. Le template HTML
      2. b. La feuille de style
   2. 2. Interfaçage du composant dans le composantracine
   3. 3. Spécification des composants dans le module
   4. 4. Activation du module
   5. 5. La page web frontale
7. Le cycle de vie d'un composant
   1. 1. Le hook ngOnChanges()
   2. 2. Le hook ngOnInit()
   3. 3. Le hook ngDoCheck()
   4. 4. Le hook ngOnDestroy()
8. Bilan des acquis de ce chapitre

Angular : les templates, bindings et directives

1. Les templates
   1. 1. Imbrication des templates
   2. 2. Les templates insérés (embeddedtemplates)
   3. 3. Les templates externalisés
2. Data bindings entre le composant et le template
   1. 1. Accès aux éléments du DOM
   2. 2. Interpolation d’une variable dans un template
   3. 3. Property binding
   4. 4. Event binding
   5. 5. Two-way data binding
3. Les directives
   1. 1. Les directives structurelles
      1. a. La directive *ngFor
      2. b. La directive *ngIf
   2. 2. Les directives attributs
   3. 3. Émission d’information d’un composant versson père (@Output())
4. Les pipes
5. Exemple de synthèse : un formulaire d'authentification
6. Le fil rouge : création d'un composant qui affiche les produits
   1. 1. Le composant
      1. a. La classe implémentant le composant
      2. b. Le template HTML
      3. c. La feuille de style
   2. 2. Le module spécifiant le composant
   3. 3. Activation du module
   4. 4. La page web frontale
   5. 5. Lancement de l’application
7. Bilan des acquis de ce chapitre

Angular et la connexion à Node.js : les services

1. Introduction
2. Injection de dépendances
3. Utilisation des services pour le transfert de données
   1. 1. Récupération de donnéesformatées en JSON
   2. 2. Envoi de données JSON au serveur
   3. 3. Envoi de données via la querystring
4. Mise en œuvre des services dans le fil rouge
   1. 1. Déclaration des routes du côté serveur
   2. 2. Gestion des produits
      1. a. Affichage des sélecteurs
      2. b. Affichage des produits suivant des critèresde recherche
      3. c. Affichage des produits associés à desmots-clés
      4. d. Accès à un produit par son identifiant
   3. 3. Gestion du panier
      1. a. Affichage des identifiants des produits du panier
      2. b. Affichage de tous les produits du panier
      3. c. Ajout d’un produit au panier
      4. d. Suppression d’un produit du panier
      5. e. Réinitialisation du panier
5. La bibliothèque NgRx et les stores
6. Bilan des acquis de ce chapitre

Angular et la gestion des routes internes

1. Principe général du routage
   1. 1. Pourquoi mettre en place un routage ?
   2. 2. Les routes, le routeur, les tables de routage
   3. 3. Les vues activées par les routes
   4. 4. Exemple de routage
   5. 5. Définition d’un arbre de vues
   6. 6. Utilisation des outlets nommées
2. La syntaxe des routes
   1. 1. Les deux syntaxes d’une route : chaîne oulink parameters array
   2. 2. Les routes absolues et les routes relatives
   3. 3. Paramétrage des routes
   4. 4. Association d’une route à une auxiliary outlet
3. Sélection des routes
   1. 1. La directive routerLink
   2. 2. La méthode navigate()
   3. 3. Exemple de route
4. Gestion des routes du contrôleur vers le composant cible
   1. 1. Configuration de la table de routage
   2. 2. Les propriétés d’une route
   3. 3. Prise en charge d’une route par plusieurs modules/tables deroutage
   4. 4. Contrôle des routes : les guards
   5. 5. Invocation d’un composant
   6. 6. Capture d’une route lors de l’invocation d’un composant
5. Gestion de routes dans le fil rouge
   1. 1. Le module de routage associé au root module
   2. 2. Le module de routage associé au feature moduleresearch
   3. 3. Le module de routage associé au feature modulecart
6. Bilan des acquis de ce chapitre

Angular et la visualisation d’informations

1. Introduction
2. Création de charts avec D3.js et dc.js
   1. 1. Installation de D3.js
   2. 2. Le langage SVG
   3. 3. Génération d’élémentsgraphiques associés aux objets d’une collection
   4. 4. Sélection et modification d’élémentsdu DOM
      1. a. Ajout d’éléments graphiques
      2. b. Remplacement d’éléments graphiques
   5. 5. Mise en œuvre d’écouteurs d’événements
   6. 6. Intégration de D3.js dans Angular
      1. a. Un serveur virtuel de données commerciales
      2. b. Le service accédant aux donnéesdu serveur
      3. c. Le template du composant qui affiche un histogramme
      4. d. Implémentation du composant qui affiche unhistogramme
   7. 7. Les bibliothèques dc.js et Crossfilter
      1. a. Installation de dc.js et de Crossfilter
      2. b. Implémentation du composant affichant l’histogramme
3. Intégration de cartes Google Map dans un projet Angular
   1. 1. Installation des prérequis techniques
      1. a. Installation des types TypeScript
      2. b. Installation de la bibliothèque PrimeNG
   2. 2. Présentation d’une carte Google Map statique
   3. 3. Un composant PrimeNG pour gérer une carteGoogle Map
   4. 4. Gestion d’un chart associé à uneGoogle Map
4. Mise en œuvre de composants graphiques
   1. 1. Autre exemple de composant PrimeNG (Calendar)
   2. 2. La bibliothèque de composants Material
   3. 3. La bibliothèque ngx-bootstrap
5. Bilan des acquis de ce chapitre

Test et déploiement

1. Test
2. Déploiement
   1. 1. Déploiement avec Apache
   2. 2. Déploiement avec Node.js
   3. 3. Déploiement avec http-server (raccourci surNode.js)
3. Pour aller plus loin