• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 25/06/2019

Installez les outils et créez votre projet

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Préparez l'environnement de développement

Qu’est-ce que le CLI ?

Le CLI, ou “Command Line Interface” (un outil permettant d'exécuter des commandes depuis la console), d’Angular est l’outil qui vous permet d’exécuter des scripts pour la création, la structuration et la production d’une application Angular.

Installez les outils

Vous devez installer les outils suivants si vous ne les avez pas déjà sur votre machine :

NODE.JS
Téléchargez et installez la dernière version LTS de Node.js ici :
https://nodejs.org/en/download/

NPM
NPM est un package manager qui permet l’installation d’énormément d’outils et de libraries dont vous aurez besoin pour tout type de développement.  Pour l’installer, ouvrez une ligne de commande et tapez la commande suivante :

npm install -g npm@latest

ANGULAR/CLI
Vous allez maintenant installer le CLI d’Angular de manière globale sur votre machine avec la commande suivante (avec sudo si besoin) :

npm install -g @angular/cli

À partir de là, la commande  ng  est disponible depuis la ligne de commandes depuis n’importe quel dossier de l’ordinateur.

Créez votre premier projet

Pour créer un nouveau projet Angular, naviguez vers le dossier souhaité depuis une ligne de commande et saisissez la commande suivante :

ng new mon-premier-projet

Ensuite, naviguez dans le dossier du projet et lancez le serveur de développement :

cd mon-premier-projet
ng serve --open

Si tout se passe bien, vous verrez les informations du serveur qui se lance à l'adresse localhost:4200 et votre navigateur préféré se lancera automatiquement avec le message "Welcome to app!!" et le logo Angular.

Félicitations, votre environnement de développement est prêt !

Quelques conseils pour le développement

Pour développer, je vous conseille d'utiliser un éditeur comme Atom ou Sublime Text, ou un IDE comme VS Code ou WebStorm.  Pour les screencast et screenshot, j'utiliserai WebStorm, qui comporte beaucoup de fonctionnalités prévues spécifiquement pour le développement JavaScript/TypeScript, donc ne vous inquiétez pas si les couleurs ou les visuels dans votre éditeur ne ressemblent pas exactement à ceux que je vous montre.

Je vous conseille d'utiliser Chrome comme navigateur par défaut pour le développement, car les Developer Tools sont très complets, et vous avez également la possibilité d'installer Augury, un plugin Chrome spécifique pour le développement Angular.

Pour la suite du cours, j'utiliserai les styles en SCSS plutôt qu'en CSS simple : cela apporte pas mal d'avantages (création de variables, utilisations de mixins pour un code plus modulaire etc), et est intégré par le CLI. Ne vous inquiétez pas si vous ne maîtrisez pas la syntaxe SCSS : tout code CSS valable est aussi valable en SCSS.

Vous utiliserez également Bootstrap pour les styles de votre application pour faciliter la mise en page simple que vous effectuerez. Ce n'est bien sûr pas obligatoire, mais puisque le cours se concentre ici sur Angular, je ne parlerai pas de l'esthétique ou de la qualité générale de l'UI.

Dans la partie suivante, nous allons découvrir les éléments fondamentaux d'un projet Angular.

Exemple de certificat de réussite
Exemple de certificat de réussite