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

Auteur(s) :

Pompidor, Pierre Découvrir l'auteur

Résumé

Toutes les clés pour mettre en place une architecture MEAN avec un serveur Node.js et le framework applicatif Angular. De nombreux exemples de code et un cas concret (la création d'une application de e-commerce) illustrent le propos.

Éditeur(s)
- Éditions ENI
Date
- cop. 2019
Notes
- MEAN = MongoDB, Express, AngularJS, Node.js
- La couv. porte en plus : "Informatique technique" ; "En téléchargement : le code source, des exemples" ; "+quiz" ; "Version numérique offerte ! www.editions-eni.fr"
- La 4e de couv. porte en plus : "Surwww.editions-eni.fr : le code source de l'application utilisée en exemple"
- Contient un "flashcode" permettant d'accéder à un contenu via Internet
Langues
- Français
Description matérielle
- 1 vol. (378) : ill. ; 21 cm
Collections
- Expert IT
Sujet(s)
ISBN
- 978-2-409-01961-6
Indice
- 681.225 Java
Quatrième de couverture
- Angular et Node.js
  Optimisez le développement de vos applications web avec une architecture MEAN
  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 oeuvre 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 oeuvre d'une architecture MEAN.
Tables des matières
- - Angular et Node.js
  - Optimisez le développement de vos applications web avec une architecture MEAN
  - Avant-propos
  - Chapitre 1
    Introduction
  - 1. Introduction13
  - 2. L'architecture MEAN pour une application web15
  - 2.1 Le principe des applications monopages (single page applications)16
  - 2.2 Le paradigme de conception modèle-vue-contrôleur16
  - 3. Angular au centre de l'architecture MEAN19
  - 4. Présentation du fil rouge : une application d'e-commerce21
  - Chapitre 2
    Le langage JavaScript
  - 1. Introduction à JavaScript25
  - 1.1 Bref historique25
  - 1.2 Panorama de l'utilisation de JavaScript26
  - 1.3 Les bibliothèques et les frameworks applicatifs JavaScript27
  - 2. Où coder du code JavaScript ?28
  - 3. Les outils du navigateur et le débogage29
  - 4. Les éléments de programmation de base30
  - 4.1 Les variables30
  - 4.1.1 Les types internes30
  - 4.1.2 Le transtypage31
  - 4.2 Les structures de données usuelles32
  - 4.3 Application d'expressions régulières34
  - 4.4 Les blocs d'instructions35
  - 4.5 Les structures conditionnelles35
  - 4.5.1 La structure if ... else35
  - 4.5.2 La structure switch d'aiguillage multiple36
  - 4.6 Les structures itératives36
  - 4.6.1 Les structures itératives avec indices de boucle36
  - 4.6.2 Les structures itératives sans indices de boucle37
  - 5. La programmation fonctionnelle en JavaScript39
  - 5.1 Une fonction passée en paramètre (fonction de callback)39
  - 5.1.1 Exemple avec la méthode forEach ()39
  - 5.1.2 Exemple avec la méthode map ()40
  - 5.2 Une fonction retourne une fonction (factory)41
  - 6. La programmation objet avec JavaScript42
  - 6.1 Les principes de la programmation objet avec JavaScript42
  - 6.2 Les objets littéraux43
  - 6.3 L'héritage par chaînage de prototypes44
  - 6.3.1 La propriété _ proto _ de l'objet héritant44
  - 6.3.2 La propriété prototype45
  - 6.4 La création d'un objet par l'appel d'une fonction constructrice46
  - 6.5 Exemples d'implémentations d'une méthode47
  - 6.6 La problématique de l'objet courant (this)48
  - 6.7 L'héritage51
  - 6.8 Le chaînage de méthodes51
  - 7. Les principaux apports de la norme ECMAScript 652
  - 7.1 La norme ECMAScript52
  - 7.2 Le mot réservé let52
  - 7.3 L'interpolation de variables dans les chaînes53
  - 7.4 Les paramètres par défaut53
  - 7.5 Une manipulation plus confortable des listes53
  - 7.5.1 La structure for (... of ...)53
  - 7.5.2 La méthode includes()54
  - 7.6 L'opérateur « fat arrow » (=>)54
  - 7.7 Les classes55
  - 8. La programmation réactive, les observables et les promises55
  - 8.1 Premier exemple : un observable sur un bouton57
  - 8.2 Deuxième exemple : un observable sur un entier58
  - 8.3 Troisième exemple : un observable sur un timer59
  - 8.4 Les promises59
  - Chapitre 3
    Extensions JavaScript pour les classes
  - 1. Présentation des extensions à JavaScript61
  - 2. Le langage TypeScript62
  - 2.1 Le transpiler tsc62
  - 2.2 Typage statique des variables63
  - 2.2.1 Les types de base63
  - 2.2.2 Typage de variables non scalaires63
  - 2.2.3 Le type enum64
  - 2.2.4 Le type générique any64
  - 2.2.5 Typage des fonctions64
  - 2.3 Les classes65
  - 2.3.1 L'héritage66
  - 2.3.2 Les interfaces67
  - 2.3.3 La généricité67
  - 3. Le langage Dart68
  - 3.1 Installation et test de Dart68
  - 3.2 Génération du code JavaScript avec Dart69
  - 3.3 Les classes69
  - 3.3.1 L'héritage70
  - 3.3.2 Les interfaces71
  - Chapitre 4
    La plateforme Node.js
  - 1. Présentation de Node.js73
  - 2. Installation et test de Node.js74
  - 2.1 Création du fichier de test74
  - 2.2 Installation et test de Node.js sous Ubuntu75
  - 2.3 Installation et test de Node.js sous Windows75
  - 2.4 Installation et test de Node.js sous Mac OS76
  - 3. La modularité de Node.js76
  - 3.1 Les modules et les packages76
  - 3.1.1 Le gestionnaire de modules de Node.js : npm77
  - 3.1.2 Spécification des dépendances : le fichier package.json77
  - 3.2 Création d'un premier serveur Node.js de test78
  - 3.3 Création et réutilisation d'un module80
  - 3.4 Création d'un serveur renvoyant des données82
  - 3.5 Le module express83
  - 3.5.1 Gestion de routes REST avec le module express83
  - 3.5.2 Gestion des templates avec le module express86
  - 3.5.3 Spécification des dépendances dans un fichier package.json88
  - 3.5.4 Installation du module express88
  - 3.6 Le module fs (FileSystem)88
  - 3.7 Test d'un serveur Node.js90
  - 3.7.1 Création d'un fichier de données JSON90
  - 3.7.2 La problématique du contrôle d'accès HTTP91
  - 3.7.3 Renvoi au client d'un fichier JSON92
  - 3.7.4 Paramétrage des routes93
  - 3.7.5 Gestion des paramètres98
  - 4. Sécurisation d'un serveur Node.js (protocole HTTPS)99
  - 4.1 Création de l'autorité de certification100
  - 4.2 Création du certificat100
  - 4.3 Création du serveur101
  - 5. Bilan des acquis de ce chapitre102
  - Chapitre 5
    Le SGBD NoSQL MongoDB
  - 1. Introduction103
  - 2. Pourquoi utiliser une base de données NoSQL ?104
  - 3. Présentation de MongoDB105
  - 3.1 Les collections et les documents105
  - 3.2 Les index106
  - 4. Mise en oeuvre de MongoDB106
  - 4.1 Installation de MongoDB106
  - 4.1.1 Installation de MongoDB sous Linux106
  - 4.1.2 Installation de MongoDB sous Windows ou sous Mac OS107
  - 4.1.3 Utilisation de MongoDB en lignes de commande107
  - 4.2 Affichage de la liste des bases de données108
  - 4.3 Création d'une base de données108
  - 4.4 Affichage de la liste des collections108
  - 4.5 Création d'une collection108
  - 4.5.1 Insertion des documents dans une collection109
  - 4.5.2 Importation de documents à partir d'un fichier109
  - 4.5.3 Exportation des documents d'une collection dans un fichier JSON110
  - 4.6 Interrogation d'une collection111
  - 4.6.1 Interrogation via un objet « filtre »111
  - 4.6.2 Les opérateurs de comparaison, les opérateurs ensemblistes et logiques112
  - 4.6.3 L'opérateur $exists113
  - 4.6.4 L'opérateur $in113
  - 4.6.5 L'opérateur $nin113
  - 4.6.6 L'opérateur $or114
  - 4.6.7 L'opérateur $not114
  - 4.6.8 L'opérateur $nor114
  - 4.7 Application d'expressions régulières115
  - 4.8 Les projections et la méthode distinct ()115
  - 4.8.1 Les projections115
  - 4.8.2 La méthode distinct ()116
  - 4.9 Référencement des documents et jointures116
  - 4.9.1 Les objets imbriqués (nested objects)117
  - 4.9.2 Les objets référencés118
  - 4.9.3 Les jointures119
  - 4.10 Mise à jour et suppression d'un document123
  - 4.10.1 Mise à jour d'un document123
  - 4.10.2 Suppression d'un document124
  - 4.11 Suppression d'une collection124
  - 5. Utilisation de MongoDB via Node.js124
  - 5.1 Installation du module MongoDB pour Node.js124
  - 5.2 Connexion au serveur MongoDB126
  - 5.3 Insertion de données à partir d'un serveur Node.js127
  - 5.4 Interrogation de données à partir d'un serveur Node.js127
  - 5.4.1 Exploitation du résultat de la méthode find()128
  - 5.4.2 Utilisation de la méthode toArray()129
  - 5.5 Synchronisation des requêtes131
  - 5.5.1 Utilisation des fonctions de callback132
  - 5.5.2 Utilisation du module async134
  - 5.5.3 La méthode async.series()135
  - 5.5.4 La méthode async.waterfall()136
  - 6. Interrogation de MongoDB via les routes gérées par express138
  - 6.1 La structure d'un serveur Node.js interrogeant MongoDB138
  - 6.2 La problématique du cross-origin resource sharing139
  - 6.3 Exemples de gestion de routes139
  - 6.3.1 Gestion d'une route pour lister les marques140
  - 6.3.2 Gestion d'une route pour filtrer les produits141
  - 6.3.3 Recherche d'un produit à partir de soin identifiant interne142
  - 7. Le fil rouge du côté serveur144
  - 7.1 Création de la collection144
  - 7.2 Mise en place de deux recherches sur les produits146
  - 7.2.1 La superstructure du serveur146
  - 7.2.2 Gestion de la route qui filtre les documents sur différents critères148
  - 7.2.3 Gestion de la route qui renvoie un document via son identifiant interne149
  - 7.2.4 Exemples de requête sur le serveur149
  - 8. Bilan des acquis de ce chapitre150
  - Chapitre 6
    Introduction au framework applicatif Angular
  - 1. Présentation d'Angular151
  - 1.1 Une évolution radicale d'AngularJS151
  - 1.2 La modularité de l'application : les modules et les composants152
  - 1.2.1 Les modules153
  - 1.2.2 Les composants et les services154
  - 1.3 Manipulation des composants comme des balises155
  - 1.4 Utilisation d'une extension à JavaScript (TypeScript ou Dart)156
  - 2. Angular par rapport au framework MVC (voire MVVM)156
  - 3. Mise en place d'une application Angular158
  - 3.1 Présentation d'Angular CLI159
  - 3.2 Installation d'Angular CLI160
  - 3.3 Création d'un projet Angular avec Angular CLI160
  - 3.4 Structure des dossiers d'un projet Angular CLI162
  - 3.5 Un premier composant créé par Angular CLI163
  - 3.6 Le root module créé par Angular CLI166
  - 3.7 Mise à jour d'Angular via Angular CLI167
  - 4. Génération du code JavaScript à partir de TypeScript168
  - 5. Les décorateurs170
  - 6. Création d'un nouveau composant qui affiche un message171
  - 6.1 Création du composant171
  - 6.1.1 Le template HTML173
  - 6.1.2 La feuille de style173
  - 6.2 Interfaçage du composant dans le composant racine173
  - 6.3 Spécification des composants dans le module173
  - 6.4 Activation du module174
  - 6.5 Le page web frontale175
  - 7. Le cycle de vie d'un composant176
  - 7.1 Le hook ngOnChanges()177
  - 7.2 Le hook ngOnInit()178
  - 7.3 Le hook ngDoChek()178
  - 7.4 Le hook ngOnDestroy()179
  - 8. Bilan des acquis de ce chapitre180
  - Chapitre 7
    Angular : les templates, bindings et directives
  - 1. Les templates183
  - 1.1 Imbrications des templates185
  - 1.2 Les templates insérés (embedded templates)191
  - 1.3 Les templates externalisés192
  - 2. Data bindings entre le composant et le template192
  - 2.1 Accès aux éléments du DOM193
  - 2.2 Interpolation d'une variable dans un template193
  - 2.3 Property binding195
  - 2.4 Event binding197
  - 2.5 Two-way data binding199
  - 3. Les directives201
  - 3.1 Les directives structurelles202
  - 3.1.1 La directive *ngFor203
  - 3.1.2 La directive *ngIf205
  - 3.2 Les directives attributs206
  - 3.3 Émission d'information d'un composant vers son père ((...)Output())211
  - 4. Les pipes214
  - 5. Exemple de synthèse : un formulaire d'authentification218
  - 6. Le fil rouge : création d'un composant qui affiche les produits221
  - 6.1 Le composant222
  - 6.1.1 La classe implémentant le composant223
  - 6.1.2 Le template HTML224
  - 6.1.3 La feuille de style226
  - 6.2 Le module spécifiant le composant226
  - 6.3 Activation du module227
  - 6.4 La page web frontale227
  - 6.5 Lancement de l'application228
  - 7. Bilan des acquis de ce chapitre228
  - Chapitre 8
    Angular et la connexion à Node.js : les services
  - 1. Introduction231
  - 2. Injection de dépendances232
  - 3. Utilisation des services pour le transfert de données233
  - 3.1 Récupération de données formatées en JSON233
  - 3.2 Envoi de données JSON au serveur234
  - 3.3 Envoi de données via la querystring236
  - 4. Mise en oeuvre des services dans le fil rouge237
  - 4.1 Déclaration des routes du côté serveur237
  - 4.2 Gestion des produits239
  - 4.2.1 Affichage des sélecteurs239
  - 4.2.2 Affichage des produits suivant des critères de recherche243
  - 4.2.3 Affichage des produits associés à des mots-clés246
  - 4.2.4 Accès à un produit par son identifiant249
  - 4.3 Gestion du panier250
  - 4.3.1 Affichage des identifiants des produits du panier250
  - 4.3.2 Affichage de tous les produits du panier251
  - 4.3.3 Ajouter d'un produit au panier253
  - 4.3.4 Suppression d'un produit du panier256
  - 4.3.5 Réinitialisation du panier258
  - 5. La bibliothèque NgRx et les stores258
  - 6. Bilan des acquis de ce chapitre259
  - Chapitre 9
    Angular et la gestion des routes internes
  - 1. Principe général du routage261
  - 1.1 Pourquoi mettre en place un routage ?261
  - 1.2 Les routes, le routeur, les tables de routage263
  - 1.3 Les vues activées par les routes265
  - 1.4 Exemple de routage267
  - 1.5 Définition d'un arbre de vues270
  - 1.6 Utilisation des outlets nommées275
  - 2. La syntaxe des routes280
  - 2.1 Les deux syntaxes d'une route : chaîne ou link parameters array281
  - 2.2 Les routes absolues et les routes relatives282
  - 2.3 Paramétrage des routes282
  - 2.4 Association d'une route à une auxiliary outlet283
  - 3. Sélection des routes284
  - 3.1 La directive routerLink284
  - 3.2 La méthode navigate()286
  - 3.3 Exemple de route287
  - 4. Gestion des routes du contrôleur vers le composant cible287
  - 4.1 Configuration de la table de routage288
  - 4.2 Les propriétés d'une route289
  - 4.3 Prise en charge d'une route par plusieurs modules/tables de routage291
  - 4.4 Contrôle des routes : les guards293
  - 4.5 Invocation d'un composant301
  - 4.6 Capture d'une route lors de l'invocation d'un composant303
  - 5. Gestion de routes dans le fil rouge306
  - 5.1 Le module de routage associé au root module307
  - 5.2 Le module de routage associé au feature module research308
  - 5.3 Le module de routage associé au feature module cart309
  - 6. Bilan des acquis de ce chapitre310
  - Chapitre 10
    Angular et la visualisation d'informations
  - 1. Introduction313
  - 2. Création de charts avec D3.js et dc.js314
  - 2.1 Installation de D3.js315
  - 2.2 Le langage SVG315
  - 2.3 Génération d'éléments graphiques associés aux objets d'une collection318
  - 2.4 Sélection et modification d'éléments du DOM319
  - 2.4.1 Ajout d'éléments graphiques320
  - 2.4.2 Remplacement d'éléments graphiques321
  - 2.5 Mise en oeuvre d'écouteurs d'événements322
  - 2.6 Intégration de D3.js dans Angular323
  - 2.6.1 Un serveur virtuel de données commerciales323
  - 2.6.2 Le service accédant aux données du serveur325
  - 2.6.3 Le template du composant qui affiche un histogramme325
  - 2.6.4 Implémentation du composant qui affiche un histogramme326
  - 2.7 Les bibliothèques dc.js et Crossfilter330
  - 2.7.1 Installation de dc.js et de Crossfilter331
  - 2.7.2 Implémentation du composant affichant l'histogramme331
  - 3. Intégration de cartes Google Map dans un projet Angular333
  - 3.1 Installation des prérequis techniques334
  - 3.1.1 Installation des types TypeScript334
  - 3.1.2 Installation de la bibliothèque PrimeNG335
  - 3.2 Présentation d'une carte Google Map statique335
  - 3.3 Un composant PrimeNG pour gérer une carte Google Map337
  - 3.4 Gestion d'un chart associé à une Google Map341
  - 4. Mise en oeuvre de composants graphiques346
  - 4.1 Autre exemple de composant PrimeNG (Calendar)346
  - 4.2 La bibliothèque de composants Material348
  - 4.3 La bibliothèque ngx-bootstrap350
  - 5. Bilan des acquis de ce chapitre355
  - Chapitre 11
    Test et déploiement
  - 1. Test357
  - 2. Déploiement361
  - 2.1 Déploiement avec Apache361
  - 2.2 Déploiement avec Node.js362
  - 2.3 Déploiement avec http-server (raccourci sur Node.js)363
  - 3. Pour aller plus loin364
  - Index365
Origine de la notice:
- BPI