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 :
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.