Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

6. 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 ng-pokemons-app --minimal --routing=false --style=css --skipGit

Cette commande doit générer une architecture de dossiers, et certains fichiers pour votre nouveau projet, dans un dossier nommé ng-pokemons-app.

Pourquoi un tel nom ? Et bien parce que tout le long du cours je vous propose de développer une application qui vous permettent de gérer des Pokémons, ni plus ni moins. (Qui y a vu un lien avec le jeu Pokémon GO ?) Nous partirons d’un dossier vide jusqu’à obtenir une application finale prête pour la production ! Cela vous permettra d’avoir une vision globale du processus de réalisation d’une application Angular.

Vous pouvez nommer votre dossier comme vous le voulez, cela n’a pas beaucoup d’importance pour la suite.

Heu… pourquoi cette commande est aussi complexe, alors que l’on veut simplement démarrer un petit projet ?

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 j’ai choisi d’appliquer à notre petit projet :

L’option –minimal: Cette option permet de générer une version très allégée du socle de notre projet. Cela nous évite de nous retrouver avec une quantité de fichiers de configuration astronomique, comme cela peut être le cas pour un projet plus conséquent.

L’option –routing=false: Cette option permet de dire à Angular CLI de ne pas générer de fichier de configuration pour les routes de notre application. Cela nous permettra de voir par nous même comment tout cela fonctionne.

L’option –style=css: Cette option permet d’indiquer que nous souhaitons utiliser du code CSS pour le style de notre application. En effet, il est possible d’utiliser un préprocesseur CSS, qui vous permet notamment de déclarer des variables dans du code CSS, afin de vous éviter des duplications dans vos feuilles de style. Mais ce n’est pas le sujet de ce cours, restons sur le CSS.

L’option –skipGit: Cette option permet ne pas ajouter le système de versionning Git dans notre projet. Si vous n’en avez jamais entendu parler, sachez que cela nous fait simplement des fichiers de configuration en moins. C’est toujours ça de pris.

Voilà, vous devriez avoir mieux compris le rôle de chacun de ces options.

Avant de continuer, pensez à bien exécuter cette commande :

ng new ng-pokemons-app --minimal --routing=false --style=css --skipGit

La commande peut être un peu longue, car Angular CLI va installer toutes les dépendances dont nous aurons besoin pour notre projet.