Cours web frontend - Angular 8

Chap 2 : Initialisation de notre première application

On a vu comment installer les dépendances nécessaires à une application web dans le chapitre précédent.

On va maintenant voir comment générer le squelette de base d’une application en Angular 8.

Création de l’app

On va générer notre application avec la commande CLI suivante :

  • ng new NomdeL’app

 

CLI va nous demander plusieurs questions concernant la génération :

Angular routing : nous le verrons dans un prochain chapitre. Cela permet de gérer la navigation au sein de l’application. On ne va pas s’en servir dans le chapitre actuel, mais vous pouvez mettre Oui.

Choix des feuilles de style : CLI nous propose entre CSS, SCSS et Sass. Le CSS étant le plus commun, on va garder celui-ci. Sachez que le compilateur transformera le SCSS et Sass en CSS. Ces deux derniers permettent juste une écriture des styles de façon plus lisible et rapide. Ce choix n’est pas définitif puisque vous pourrez le changer à n’importe quel moment plus tard dans le développement de votre application.

Comparaison syntaxique entre 3 langages de style

Cli va nous générer des fichiers. Pas besoin de savoir l’utilité de chaque pour le moment, nous le verrons dans le prochain chapitre. On va se déplacer dans le fichier racine du projet :

  • cd NomdeL’app

Pour enfin lancer :

  • ng serve

Cette dernière commande va nous permettre de build notre application. Et celle-ci est pratique, puisqu’il suffira de changer une seule ligne de code dans notre projet, pour que le projet soit re-buildé automatiquement, et que l’on voit les modifications dans le navigateur en temps quasi-réel.

 

Vous n’avez plus qu’a lancer votre navigateur préféré et aller sur :

  • http://localhost:4200/

 

Eeeeeeeeeh TADAAAAAAA

Je vous l’accorde ce n’est pas ouf. Mais c’était rapide non ?

 

Avant d’aller plus loin dans  la customisation de notre application web, dans le prochain chapitre 3, nous ferons une halte pour comprendre l’ensemble des composants crées précédemment.