Comment installer Angular sur Windows: un guide sur Angular CLI, Node.js et les outils de construction

Dans ce didacticiel, nous allons apprendre à installer Angular CLI dans Windows et à l'utiliser pour créer un projet Angular.

Qu'est-ce que la CLI angulaire?

Angular CLI est l'outil officiel pour initialiser et travailler avec des projets Angular. Cela vous évite les tracas des configurations complexes et des outils de création tels que TypeScript, Webpack, etc.

Après avoir installé Angular CLI, vous devrez exécuter une commande pour générer un projet et une autre pour le servir à l'aide d'un serveur de développement local pour jouer avec votre application.

Comme la plupart des outils frontaux modernes de nos jours, Angular CLI repose sur Node.js.

Node.js est une technologie serveur qui vous permet d'exécuter JavaScript sur le serveur et de créer des applications Web côté serveur. Cependant, Angular est une technologie frontale, donc même si vous devez installer Node.js sur votre machine de développement, c'est uniquement pour exécuter la CLI.

Une fois que vous avez créé votre application pour la production, vous n'aurez plus besoin de Node.js, car les ensembles finaux ne sont que du HTML, du CSS et du JavaScript statiques pouvant être servis par n'importe quel serveur ou CDN.

Cela étant dit, si vous créez une application Web complète avec Angular, vous aurez peut-être besoin de Node.js pour créer la partie back-end si vous souhaitez utiliser JavaScript pour le front-end et le back-end.

Découvrez la pile MEAN - c'est une architecture qui comprend MongoDB, Express (un serveur Web et un cadre d'API REST construit au-dessus de Node.js) et Angular. Vous pouvez lire cet article si vous souhaitez un tutoriel étape par étape pour commencer.

Dans ce cas, Node.js est utilisé pour créer la partie principale de votre application et peut être remplacé par toute technologie côté serveur de votre choix, telle que PHP, Ruby ou Python. Mais Angular ne dépend pas de Node.js, sauf pour son outil CLI et pour l'installation de packages à partir de npm.

NPM signifie Node Package Manager. C'est un registre pour l'hébergement de packages Node. Ces dernières années, il a également été utilisé pour publier des packages frontaux et des bibliothèques comme Angular, React, Vue.js et même Bootstrap.

Remarque : vous pouvez télécharger gratuitement notre livre Angular 8: Créez vos premières applications Web avec Angular 8 .

Installation de la CLI angulaire sous Windows

Tout d'abord, vous devez avoir Node et npm installés sur votre machine de développement. Il existe de nombreuses façons de le faire, telles que:

  • utilisation de NVM (Node Version Manager) pour installer et travailler avec plusieurs versions de nœud dans votre système
  • en utilisant le gestionnaire de packages officiel de votre système d'exploitation
  • l'installer à partir du site officiel.

Restons simples et utilisons le site officiel. Visitez simplement la page de téléchargement et récupérez les binaires pour Windows, puis suivez l'assistant de configuration.

Vous pouvez vous assurer que Node est installé sur votre système en exécutant la commande suivante dans une invite de commande qui devrait afficher la version installée de Node:

$ node -v 

Ensuite, exécutez la commande suivante pour installer Angular CLI:

$ npm install @angular/cli 

Une fois la commande terminée, vous devez avoir installé Angular CLI.

Un guide rapide pour la CLI angulaire

Après avoir installé Angular CLI, vous pouvez exécuter de nombreuses commandes. Commençons par vérifier la version de la CLI installée:

$ ng version 

Une deuxième commande que vous devrez peut-être exécuter est la helpcommande pour obtenir une aide complète sur l'utilisation:

$ ng help 

La CLI fournit les commandes suivantes:

add: Ajoute la prise en charge d'une bibliothèque externe à votre projet.

build (b): Compile une application Angular dans un répertoire de sortie nommé   dist/  au chemin de sortie donné. Doit être exécuté à partir d'un répertoire d'espace de travail.

config: Récupère ou définit les valeurs de configuration angulaire.

doc (d): Ouvre la documentation officielle Angular (angular.io) dans un navigateur et recherche un mot-clé donné.

e2e (e): Crée et sert une application angulaire, puis exécute des tests de bout en bout à l'aide de Protractor.

generate (g): Génère et / ou modifie des fichiers à partir d'un schéma.

help: Répertorie les commandes disponibles et leurs brèves descriptions.

lint (l): Exécute les outils de linting sur le code d'application Angular dans un dossier de projet donné.

new (n): Crée un nouvel espace de travail et une première application angulaire.

run: Exécute une cible personnalisée définie dans votre projet.

serve (s): Construit et sert votre application, en reconstruisant sur les changements de fichiers.

test (t): Exécute des tests unitaires dans un projet.

update: Met à jour votre application et ses dépendances. Voir //update.angular.io/

version (v): Sortie de la version CLI angulaire.

xi18n: Extrait les messages i18n du code source.

Générer un projet

Vous pouvez utiliser Angular CLI pour générer rapidement votre projet Angular en exécutant la commande suivante dans votre interface de ligne de commande:

$ ng new frontend 

Remarque: frontend est le nom du projet. Vous pouvez, bien sûr, choisir n'importe quel nom valide pour votre projet. Depuis que nous allons créer une application full-stack, j'utilise  frontend comme nom pour l'application frontale.

Comme mentionné précédemment, la CLI vous demandera Voulez-vous ajouter le routage angulaire? , et vous pouvez répondre en entrant y(Oui) ou n(Non), qui est l'option par défaut. Il vous posera également des questions sur le format de feuille de style que vous souhaitez utiliser (tel que CSS). Choisissez vos options et appuyez sur   Enter  pour continuer.

Structure de projet angulaire 8

Après cela, vous aurez votre projet créé avec une structure de répertoires et un tas de configurations et de fichiers de code. Ce sera principalement aux formats TypeScript et JSON. Voyons le rôle de chaque fichier:

  • /e2e/: contient des tests de bout en bout (simulation du comportement de l'utilisateur) du site Web
  • /node_modules/: Toutes les bibliothèques tierces sont installées dans ce dossier en utilisant  npm install
  • /src/: contient le code source de l'application. La plupart des travaux seront effectués ici
  • /app/: contient des modules et des composants
  • /assets/: contient des éléments statiques tels que des images, des icônes et des styles
  • /environments/: contient des fichiers de configuration spécifiques à l'environnement (production et développement)
  • browserslist: nécessaire par autoprefixer pour le support CSS
  • favicon.ico: le favicon
  • index.html: le fichier HTML principal
  • karma.conf.js: le fichier de configuration de Karma (un outil de test)
  • main.ts: le fichier de départ principal à partir duquel l' AppModule est amorcé
  • polyfills.ts: polyfills requis par Angular
  • styles.css: le fichier de feuille de style global du projet
  • test.ts: ceci est un fichier de configuration pour Karma
  • tsconfig.*.json: les fichiers de configuration pour TypeScript
  • angular.json: contient les configurations pour CLI
  • package.json: contient les informations de base du projet (nom, description et dépendances)
  • README.md: un fichier de démarques contenant une description du projet
  • tsconfig.json: le fichier de configuration de TypeScript
  • tslint.json: le fichier de configuration de TSlint (un outil d'analyse statique)

Au service de votre projet

Angular CLI fournit une chaîne d'outils complète pour développer des applications frontales sur votre machine locale. En tant que tel, vous n'avez pas besoin d'installer un serveur local pour servir votre projet - vous pouvez simplement utiliser la   ng servecommande de votre terminal pour servir votre projet localement.

Naviguez d'abord dans le dossier de votre projet et exécutez les commandes suivantes:

$ cd frontend $ ng serve 

Vous pouvez maintenant accéder à l'adresse // localhost: 4200 / pour commencer à jouer avec votre application frontale. La page se rechargera automatiquement en direct si vous modifiez un fichier source.

Générer des artefacts angulaires

Angular CLI fournit une ng generatecommande qui aide les développeurs à générer des artefacts angulaires de base tels que des modules, des composants, des directives, des tubes et des services:

$ ng generate component my-component 

my-componentest le nom du composant. La CLI angulaire ajoutera automatiquement une référence à components, directiveset pipesdans le src/app.module.tsfichier.

Si vous souhaitez ajouter votre composant, directive ou pipe à un autre module (autre que le module principal de l'application, app.module.ts), vous pouvez simplement préfixer le nom du composant avec le nom du module et une barre oblique:

$ ng g component my-module/my-component 

my-module est le nom d'un module existant.

Conclusion

Dans ce tutoriel, nous avons vu comment installer Angular CLI sur notre machine Windows et nous l'avons utilisé pour initialiser un nouveau projet Angular à partir de zéro.

Nous avons également vu diverses commandes que vous pouvez utiliser tout au long du développement de votre projet pour générer des artefacts angulaires tels que des modules, des composants et des services.

Découvrez nos autres tutoriels Angular.

Vous pouvez contacter ou suivre l'auteur via son site Web personnel, Twitter, LinkedIn et Github.