2.2. Générer le socle de notre projet

Angular CLI dispose d’une commande permettant de générer le socle de votre application. Sur le site officiel d’Angular CLI, on trouve la commande suivante :

ng new <nom-application>

Cette commande doit générer une architecture de dossiers, et certains fichiers pour votre nouveau projet.

Heu… est-ce que cette simple commande  est suffisante pour démarrer un projet professionnel ?

Pas vraiment. Vous avez eu raison de poser la question. En fait, il existe plusieurs options que vous pouvez passer à la commande ng new, afin de paramétrer un minimum le socle de l’application qui sera générée. Voici les principales options que nous allons utiliser :

• L’option –routing: Cette option permet d’ajouter un fichier de configuration pour les routes de votre application. Comme nous sommes fainéants, et que nous ne voulons par rajouter ce fichier nous-mêmes par la suite, nous allons demander à Angular CLI de le faire pour nous. 😉
• L’option –prefix : Cette option permet de préfixer le nom de vos composants par votre propre préfixe. Le préfixe par défaut est app. Par exemple, pour appeler un composant Home dans un template, vous devrez utiliser la balise <app-home>. Pour utiliser votre propre préfixe, il est recommandé de choisir quelques lettres seulement, qui font référence au nom de votre application. Par exemple, le préfixe pour notre planificateur de productivité sera “al” pour “Awesome List”.
• L’option –scss : Cette option permet de spécifier le pré-processeur à utiliser pour le code CSS de votre application. Par défaut, l’option vaut css, ce qui signifie que vous utiliserez simplement du code CSS pour vos feuilles de styles. Dans notre cas, nous spécifions scss, qui correspond au pré-processeur SASS. L’extension de nos feuilles de style sera donc ma-feuille-de-style.scss.

Si vous ne savez pas ce qu’est un préprocesseur, ça n’est pas important pour la suite du cours. Un préprocesseur vous permet notamment de déclarer des variables dans du code CSS, afin de vous éviter des duplications dans vos feuilles de style. Comme le préprocesseur génère du CSS en sortie, vous pouvez continuer à utiliser du code CSS comme vous en avez l’habitude, tout en vous laissant la possibilité d’utiliser le préprocesseur plus tard dans votre vie de développeur. Au moins, cette possibilité est déjà en place.

Avec les points précédents en tête, voici la commande à exécuter pour démarrer notre projet professionnel avec Angular CLI:

ng new awesome-list --prefix=al --style=scss --routing

Ensuite, il va falloir que nous soyons patients, car Angular-CLI va générer l’architecture de l’ensemble de notre application, et installer les dépendances pour nous (comme si nous lancions la commande npm install). Exceptionnellement, vous avez droit à une pause de cinq minutes avant de reprendre. 😉

Une fois que Angular CLI aura terminé, positionnez-vous à la racine de votre projet :

cd awesome-list

Enfin, Angular-CLI nous fournit une deuxième commande pour démarrer notre application directement dans un navigateur. Exécutez la commande suivante :

ng serve --open

Par défaut, votre application va se lancer sur le port 4200. Si vous préférez démarrer votre application sur un port différent, c’est possible en spécifiant l’option port :

ng serve --o --port=3000

L’option o et open sont équivalentes, il s’agit d’un raccourci de syntaxe. Cependant, je préfère éviter les raccourcis lors des explications, cela n’apporte pas grand-chose hormis de la confusion selon moi.

Patientez encore quelques instants (eh oui, encore !). Voici ce que vous devriez obtenir :

Angular CLI a mis en place le socle de notre application, et l’a même démarré pour nous dans le navigateur !

En plus d’une architecture de base, nous disposons d’un fichier de configuration pour nos routes, un suffixe défini au niveau global de l’application, et un pré-processeur CSS. Nous avons mis en place tout cela en une seule ligne de commande, grâce à Angular CLI. Beaucoup de personnes utilisent la commande ng new sans spécifier d’options, et se retrouvent à devoir faire eux-mêmes ce qu’Angular CLI aurait pu faire pour eux. En tant que développeur, on préfère déléguer le travail à Angular CLI. 😎

Dans toute la suite du cours, et pendant vos développements, je vous invite à laisser tourner la commande ng serve en tâche de fond. Ainsi, votre application se mettra à jour au fur et à mesure de vos développements. De plus, à chaque fois que je vous demanderai de retourner dans votre application pour visualiser le travail accomplis, je sous-entends que votre application tourne toujours en tâche de fond. Donc si vous avez éteint votre ordinateur entre deux sessions de lecture, pensez à redémarrer votre projet.