Dans ce tutoriel, je vous apprendrai à mettre en place un environnement pour commencer à développer avec Angular. A l’issue de ce tutoriel, vous disposerez de l’ensemble des outils nécessaires à la création d’un projet Angular.
Travailler avec Angular, ce n’est pas seulement apprendre un langage de programmation. C’est aussi une galaxie d’outils à maîtriser, ce qui rend la courbe d’apprentissage pour un débutant assez déroutante. Nous allons donc installer ensemble pas à pas les outils indispensable pour commencer notre projet, et nous limiter dans un premier temps au strict nécessaire.
Installer node
Node.js est un runtime permettant de faire tourner du Javascript côté serveur. Vous n’avez pas compris cette phrase ? Aucune importance. Installez Node.js : il est indispensable.
Rendez-vous sur https://nodejs.org/en/ pour télécharger l’installer qui correspond à votre OS, et préférez la dernière version LTS (Long Time Support).
Node.js installe la commande npm que vous utiliserez très régulièrement dans votre projet. Pour vérifier que tout fonctionne correctement, ouvrez un terminal et testez la commande suivante :
node -v
Cette commande doit vous renvoyer un numéro de version (v7.7.0 chez moi à la rédaction de cet article). Si tout fonctionne, testez :
npm -v
Là aussi, vous devez récupérer un numéro de version (4.6.1 ici).
Installer Angular CLI
CLI signifie Command Line Interface (Interface en ligne de commande). C’est un ensemble de raccourcis qui automatisent la création des parties les plus fastidieuses à mettre en place dans un projet Angular. Travailler sans Angular CLI quand on débute, c’est apercevoir les neuf cercles de l’enfer.
Pour installer Angular CLI, ouvrez un terminal et entrez cette commande :
npm install -g @angular/cli
On retrouve ici la commande npm à qui vous demandez d’installer pour l’ensemble de votre système (-g pour -globally) l’outil cli fourni par l’équipe @angular.
Angular CLI installe la commande ng que vous utiliserez… quasiment en continu dans votre projet.
Vérifiez votre installation avec la commande
ng help
Si cette commande vous renvoie la longue liste des outils disponibles et leur différentes options, tout fonctionne correctement.
Hello World
Vous disposez maintenant du strict minimum nécessaire pour commencer à travailler. Nous pouvons donc commencer un premier projet.
Pour ce faire, vous allez demander à Angular CLI de générer votre projet. Ouvrez un terminal et entrez la commande suivante :
ng new Hello-World
Ici, on demande à Angular CLI ( ng ) de créer un nouveau projet ( new ) dans un répertoire à créer au nom du projet ( Hello-World ).
En tant que débutant, vous ne soupçonnez pas encore tout ce que cette étape automatise et vous évite de faire à la main. Dans quelques temps, quand vous chercherez à configurer finement votre projet, vous comprendrez, et tout comme moi vous aurez envie de faire un gros câlin aux développeurs derrière Angular CLI.
Déplacez-vous dans le répertoire nouvellement créé :
cd Hello-World
et utilisez la commande suivante :
ng serve
Angular CLI ( ng ) créera un serveur temporaire de développement ( serve ) qui rechargera votre projet à chaque modification de l’un de ses fichiers.
Comme vous invite à le faire votre terminal, pointez votre navigateur vers http://localhost:4200 pour voir s’afficher votre projet.
Ce projet est minimaliste, pas spécialement intéressant, je vous l’accorde, mais hé ! Vous avez réussi à installer tous les outils dont vous aurez besoin pour commencer.
Trackbacks / Pingbacks