Création d’un projet Angular avec Angular CLI

Créer un projet Angular avec Angular CLI

La création d’un projet Angular avec Angular CLI est effectuée via la commande ng new :

Les applications Angular utilisent généralement un routeur et l’option –routing permet de rendre plus lisible la mise en œuvre de celui-ci en créant un fichier séparé pour spécifier la table de routage.

Créez le projet openApp:

Une fois la création du projet terminée, testez l’application par défaut associée à tout nouveau projet. Pour cela, utilisez la commande suivante :

En fait, cette commande réalise deux choses essentielles :

  • Elle lance un serveur local (le NG Live Development Server) qui en sous-main appelle le transpiler TypeScript qui transcode (transpile) en JavaScript tous les codes TypeScript que vous créez ou modifiez.
  • Elle exécute l’outil webpack, qui lie les codes JavaScript pour former différents bundles (des fichiers qui regroupent les codes et ressources et ne sont pas sauvegardés sur votre disque tant que l’application est en mode développement) et visualise votre application sur l’URL localhost:4200.

Ces deux opérations sont répétées dès que vous modifiez un de vos codes sources. Du code étant produit et la fenêtre de votre navigateur étant rafraîchie, ne sauvegardez donc vos fichiers qu’à bon escient.
Dans votre navigateur, invoquez le serveur local sur le port 4200 : localhost:4200.

Angular 8 – Installation d’Angular CLI

Installation d’Angular CLI

L’installation Angular CLI est effectuée par les commandes suivantes :

Globalement :

Localement :

L’option --save enregistre une dépendance dans le fichier de configuration package.json.

Angular CLI est donc géré via un module Node.js…

(Sous Linux/Ubuntu, il se peut que vous deviez passer en mode administrateur pour utiliser la commande précédente.)

angular-cli vs angular/cli

Une version obsolète (angular-cli) était installable par :

Si vous l’aviez installée (ici localement), vous pouvez la désinstaller (et installer la nouvelle version) ainsi :

 

Angular 8 – Présentation d’Angular CLI

angular cli

Angular CLI

Angular CLI est un outil qui permet :

  • D’installer les modules de Node.js (des modules supplémentaires devront être installés suivant vos besoins).
  • De créer la structure d’un projet Angular .
  • De créer les ossatures des différentes entités qui composent une application Angular et dont vous aurez besoin : les modules, les composants, les services, les directives, les pipes, les guards, les enums.
  • De spécifier et d’exécuter les tests unitaires ou d’intégration.
  • De créer la version de production de votre application.
  • Etc.

Une fois Angular CLI installé, exécutez vos actions via la commande ng en ligne de commande.