Comment créer votre premier projet Angular ?

Dans cet article, je vous propose de découvrir les bases d’Angular en vous montrant comment créer votre premier projet. J’ai choisi d’utiliser l’Interface en ligne de commande (CLI) et la commande ng serve pour tester le projet Angular.

Prérequis pour démarrer votre projet Angular

  • Node 4.x.x ou supérieur ;
  • Npm 3.x.x ou supérieur.

Si vous avez déjà une installation de Node, vérifiez que vous utilisez au moins node 4.x.x et npm 3.x.x ou supérieur en exécutant dans le terminal/console :
node -v
et
npm -v

Mise en place d’un nouveau projet Angular

Étape 1. Configurer l’environnement de développement

Pour la grande majorité des actions, vous allez utiliser la ligne de commande dans le terminal (pour MacOS et Linux) ou la console (pour Windows). vous allez tout d’abord installer l’Angular CLI. Cet environnement est incontournable pour créer les composants et services de votre application.

Pour installer l’Angukar CLI :
npm install -g angular-cli

Étape 2. Créer un nouveau projet

Ouvrez une fenêtre de terminal et créez un nouveau projet et un squelette d’application en exécutant les commandes suivantes:
ng new my_first_angular_app

Cette commande créé un squelette d’application Angular 2.
Vous pouvez vérifier la structure de dossier par défaut.
Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.
Mais si vous souhaitez créer un projet Angular utilisant SASS, vous devez exécuter la commande suivante:
ng new my_first_angular_app --style = scss

Étape 3: servir la demande

Rendez-vous dans le répertoire du projet en utilisant la commande :
cd my_first_angular_app

Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :
ng serve

La commande ng serve lance le serveur, surveille les fichiers et reconstruit l’application lorsque vous modifiez votre code. Vous n’avez pas besoin de rafraichir la page qui s’affiche dans votre navigateur : c’est automatique 😉

Ouvrez un navigateur sur http://localhost:4200/

L’application nous accueille avec un message:
Our app works!

J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.

Réagissez en laissant un commentaire ci-dessous.

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Créez un site ou un blog sur WordPress.com

Retour en haut ↑

%d blogueurs aiment cette page :