Comment installer Angular 5

0
Premiers pas avec Angular 5

L’un des framework javascript frontend les plus populaires, Angular 5, est sorti le 08 novembre 2017.

Le processus d’installation d’un nouveau projet Angular 5 s’effectue quasiment de la même façon que ses prédécesseurs Angular 2 et 4.

Cependant, ce cours permettra de reprendre les bases.

Prérequis

Avant de démarrer, il est nécessaire d’installer deux outils : NodeJS et son gestionnaire de paquet npm.

Pour vérifier s’ils sont installé, il suffit de lancer une invite de commande et de taper :

$ node -v
$ npm -v

Dans le cas où une de ces commandes n’est pas reconnue, il est nécessaire de se rendre sur https://nodejs.org/en/ est de télécharger la version appropriée à votre système d’exploitation.

Une fois téléchargé, lancer l’installateur avec les paramètres par défaut, ce qui permettra de disposer sur votre machine de NPM. Lorsque c’est terminé, il suffit de relancer les deux commandes précédentes dans votre console et d’afficher les numéros de versions :

$ node -v
v6.10.3

$ npm -v
5.5.1

Installer Angular 5 via Angular CLI

Angular CLI (pour Commande Line Interface) est probablement le moyen le plus simple et le plus rapide pour démarrer un nouveau projet Angular 5.

Pour cela, nous allons utiliser NPM pour installer l’interface Angular CLI via la commande :

$ npm install @angular/cli -g

Une fois terminé, vous pouvez vérifier que tout s’est bien passé en tapant :

$ ng -v

Qui devrait vous afficher :

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.2
Node: 6.10.3
OS: win32 x64
Angular:
...

Dans votre console, placez-vous à l’endroit où vous souhaitez créer votre premier projet. Par exemple, sous Windows :

$ cd d:\dev

Pour installer Angular 5 via CLI, tapez maintenant :

$ ng new projet-tuto ng5 --style=scss --routing

Vous pouvez noter que deux flags ont été ajoutés. En effet, nous indiquons que notre projet utilisera le compilateur SASS pour nos styles CSS ainsi que que les bases du routage, permettant de gérer plusieurs URLs.

Une fois terminé, vous devriez avoir un message qui s’affiche :

Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'projet-tuto' successfully created.

Déplacez-vous dans le nouveau projet créé :

cd projet-tuto

Il suffit maintenant de lancer votre projet. L’avantage d’Angular est qu’une fois le projet démarré, il sera automatiquement compilé et se rechargera dans votre navigateur.

$ ng serve

Une fois la compilation terminé, vous pouvez y accéder via http://localhost:4200/

Vous venez de créer votre premier projet Angular 5 !

En savoir plus sur les options d’Angular CLI

Angular CLI propose une page Wiki :

https://github.com/angular/angular-cli/wiki

Lors de la création de notre nouveau projet, nous n’avons utilisé que deux options (–style=scss et –routing). Cependant, il existe bon nombre d’autres flags pour la création d’un nouveau projet.

Vous pouvez trouver sur le Wiki d’Angular toutes les options proposées pour la création d’un nouveau projet via ng new :   

https://github.com/angular/angular-cli/wiki/new

La documentation, en anglais, détail chacune de ces options ainsi que sa valeur par défaut.

Conclusion

Vous l’aurez probablement remarqué, créer un nouveau projet Angular 5 avec Angular CLI est très rapide. L’ajout d’option permet de le rendre encore plus flexible.

No comments