Install Node & the Angular CLI

Instructeur : Pour ce cours, nous aurons besoin de quelques outils, que nous allons installer et ajouter étape par étape. Par exemple, MongoDB sera ajouté un peu plus tard. Ce dont nous aurons certainement besoin est Node. js. D'une part, parce que nous allons écrire, et exécuter Node. js, notre logique côté serveur, mais aussi parce que même Angular en a besoin, même si nous ne devions pas créer notre propre application node. Pas parce qu'Angular utilise Node. js, mais parce qu'Angular est en fait un framework dont le flux de travail de construction est plus complexe. Donc la partie où nous prenons notre code source tel que nous l'écrivons en tant que développeur, et le transformons en code qui s'exécute bien dans le navigateur, c'est un peu plus complexe avec Angular, parce que Angular pour un utilisateur type de script un super ensemble à JavaScript. Il s'agit donc d'un langage différent, fortement basé sur JavaScript, et qui n'est pas exécuté dans le navigateur. Et pour le faire fonctionner, nous devons le compiler et cela sera fait pour nous. Pas d'inquiétude. Mais le responsable de la compilation au final est Node. js, par exemple. Cela se fera donc tout au long du processus de développement. Nous n'aurons pas besoin d'écrire de code pour cela, mais ce sont des choses qui se passent en coulisse. Et pas seulement la compilation JavaScript TypeScript, le code Angular lui-même doit être regroupé et optimisé, et nous devons réduire la taille du code en supprimant le code inutilisé et en le réduisant. Et toutes ces tâches sont gérées par Node. js sur notre machine, pendant que nous développons l'application, ou quand nous la terminons en fait. Et Node. js sera utilisé pour cela aussi. Nous en avons donc besoin pour ces deux raisons, pour le Node. js que nous écrivons pour notre back-end, et pour le workflow de construction d'Angular. Et pour en savoir plus sur Angular, sur le flux de travail Angular et sur son fonctionnement, consultez absolument un cours consacré à Angular. En effet, même si j'aborde les bases d'Angular dans ce cours, j'attends de vous que vous connaissiez les bases d'Angular. Ce cours n'est pas fait pour vous si vous n'avez jamais touché à Angular auparavant. Donc, avec cela hors de la voie, télécharger Node. js de Node. js. org et là, choisissez la dernière version 10. 1 dans mon cas, si vous rencontrez des problèmes avec ça, revenez à l'ancienne version. Mais en général, il est recommandé d'utiliser 10. 1 ou la dernière version en date au moment où vous lisez ces lignes. Il suffit de cliquer dessus pour télécharger un programme d'installation que vous pouvez parcourir. Il est disponible à la fois pour Mac OS, pour Windows et pour tout Linux, et il devrait automatiquement vous donner le bon téléchargement. Et une fois que vous l'avez installé avec succès, par le biais de l'installateur, nous pouvons penser à mettre en place une application Angular parce que c'est en fait ce avec quoi nous allons commencer dans ce cours. Pour cela, nous allons utiliser un autre outil, à savoir le CLI d'Angular. CLI est l'abréviation de command line interface (interface en ligne de commande), et c'est le moyen par défaut de créer des applications Angular. En raison du flux de production plus complexe que j'ai mentionné, nous avons besoin d'un grand nombre d'outils pour compiler notre code, l'optimiser, et la mise en place de tout cela par nous-mêmes est assez lourde et sujette à erreurs. Le CLI nous permet de mettre en place un projet où tout cela est pris en charge et où nous pouvons nous concentrer sur l'écriture de notre code Angular. Notre logique. Le CLI est installé comme ceci et il utilise NPM, le gestionnaire de paquets de Node, pour installer l'outil CLI globalement sur notre machine avec cette première commande ici. NPM ,le gestionnaire de paquets de Node, est installé en même temps que Node. js automatiquement. Donc si vous installez Node. js, vous aurez NPM. Maintenant, installons donc maintenant le CLI. J'ai déjà Node. js installé, donc je peux juste avancer rapidement à cette étape. Et pour installer le CLI, vous devez ouvrir votre terminal, ou l'invite de commande sur votre machine et ensuite exécuter NPM, cette commande de gestionnaire de paquet de noeud, qui est disponible avec Node. js. Install-g pour globally, parce que nous voulons installer Angular CLI globalement sur notre machine, de sorte que nous puissions l'utiliser de n'importe où sur notre machine. Et le nom de ce paquet CLI est @angular-cli. Et assurez-vous de ne pas faire de faute de frappe, la dénomination est importante. Vous pouvez ajouter un @latest pour récupérer absolument la dernière version, mais il devrait par défaut vous donner cette version. Maintenant, sous Windows, cette commande devrait se présenter comme ceci. Sur Mac et Linux, vous devrez peut-être ajouter un sudo devant cette commande afin d'obtenir les autorisations nécessaires pour l'exécuter. Appuyez ensuite sur Entrée et saisissez votre mot de passe si vous y êtes invité. Ensuite, il téléchargera le paquet CLI du dépôt NPM et l'installera sur votre machine. Cela peut prendre de quelques secondes à quelques minutes, et je reviendrai une fois que ce sera fait. L'installation est terminée et dans mon cas, j'ai eu quelques erreurs entre les deux, mais ce n'est pas un problème, tant qu'elle se termine par une sortie où elle mentionne le nom du paquet et la version, et dit qu'elle a été mise à jour ou ajoutée huit fois, ou le nombre peut différer d'un paquet à l'autre. Donc si vous voyez quelque chose comme ça, ça a réussi. Vous pouvez ignorer toutes les erreurs qui se sont produites entre-temps, il a été capable de les récupérer. Maintenant, une fois que tout cela est installé, nous pouvons créer un nouveau projet Angular avec le CLI et nous ajouterons Node et Mongo et express à cette configuration de projet tout au long du cours. Mais commençons par le frontal, car c'est ainsi que nous pouvons voir rapidement quelque chose à l'écran. Créons donc un nouveau projet et pour cela, naviguez dans le dossier où vous voulez créer le projet. Une fois que vous êtes dans ce dossier, et vous pouvez y accéder avec la commande CD sur votre machine. Créer un nouveau projet avec ng new qui est une commande maintenant disponible grâce à ce paquet CLI, ng est essentiellement une commande rendue disponible par cela. Et puis le nom du projet et je vais le nommer mean-course, mais bien sûr vous pouvez choisir le nom que vous voulez. Assurez-vous simplement qu'il ne commence pas par un chiffre, et qu'il ne s'appelle pas test, c'est interdit. Mais tout le reste est bien. Mean-course devrait fonctionner et une fois que vous aurez appuyé sur la touche entrée, il mettra en place ce projet. Ça va créer beaucoup de fichiers là-dedans. La plupart d'entre eux sont des fichiers de configuration pour ce flux de travail. Nous n'avons pas besoin de nous inquiéter pour eux. Et cela nous donnera également une petite application factice avec laquelle nous pourrons commencer. Il installera également toutes les dépendances, comme le framework Angular, et d'autres dépendances dont le framework dépend. Mais aussi un couple de dépendances construites ou de flux de travail. Ainsi, les dépendances qui compilent le code TypeScript, les dépendances qui optimisent le code, des choses comme ça. Cela peut donc prendre un certain temps et je reviendrai une fois que ce sera fait. Une fois que c'est fait, vous pouvez naviguer dans ce dossier nouvellement créé avec cd, puis le nom de ce dossier. Et là, il suffit de lancer ng serve pour faire apparaître un serveur de développement uniquement. Et ce n'est pas un serveur que vous utiliserez pour le déployer. Je vous montrerai comment déployer cette application vers la fin du cours. Il s'agit d'un serveur de développement uniquement qui vous permet de prévisualiser votre application. Double-cliquer sur le fichier NX HTML ne fonctionnera pas car cela utilisera le protocole de fichier et non le protocole Http, et donc de nombreuses fonctionnalités dont nous avons besoin ne seront pas activées. Et cela nous donne un vrai serveur web fonctionnant sur notre machine à cette adresse. Vous voyez ici, Http://localhost:4200 par défaut, et vous pouvez ensuite aller dans un navigateur, et simplement visiter l'hôte local 4200. Et sur cette URL, vous devriez voir quelque chose comme cette page de démarrage pour les nuls que le CLI vous donne par défaut. Maintenant que tout est en place, nous voulons bien sûr travailler sur notre code et pour cela nous avons besoin d'un IDE ou d'un éditeur de texte avancé qui nous facilite la tâche. Maintenant vous pouvez utiliser n'importe quel IDE comme Sublime, Atom, WebStorm. Dans ce cours, je vais utiliser Visual Studio Code. Maintenant, nous allons le configurer et ouvrir notre projet, dans le prochain cours.