# Bootstrap ## Prérequis Installation des outils suivants : {% content-ref url="../tools/git" %} [git](https://guide-angular.wishtack.io/tools/git) {% endcontent-ref %} {% content-ref url="../tools/nodejs" %} [nodejs](https://guide-angular.wishtack.io/tools/nodejs) {% endcontent-ref %} {% content-ref url="../tools/yarn" %} [yarn](https://guide-angular.wishtack.io/tools/yarn) {% endcontent-ref %} {% content-ref url="../tools/angular-cli" %} [angular-cli](https://guide-angular.wishtack.io/tools/angular-cli) {% endcontent-ref %} {% content-ref url="../tools/intellij-webstorm-vscode" %} [intellij-webstorm-vscode](https://guide-angular.wishtack.io/tools/intellij-webstorm-vscode) {% endcontent-ref %} {% content-ref url="../tools/chrome" %} [chrome](https://guide-angular.wishtack.io/tools/chrome) {% endcontent-ref %} ## Création de l'application Angular Pour créer une application Angular, nous utiliserons la commande Angular CLI : `ng`. Il faut d'abord indiquer à Angular CLI que nous utiliserons Yarn plutôt que NPM. ```bash ng config cli.packageManager yarn --global ``` {% hint style="danger" %} En cas de problème avec cette commande, vous pouvez ignorer cette étape puis ajouter l'option `--skip-install` afin d'éviter l'installation avec npm puis installer les dépendances manuellement avec `yarn`.\ `ng new book-shop --prefix wt --skip-install && cd book-shop && yarn install` {% endhint %} La commande ci-dessous va créer un projet Angular *(avec une application)* dans le dossier `book-shop`. ```bash ng new book-shop --prefix wt ``` {% hint style="info" %} L'option --prefix permet d'indiquer le préfixe que nous utiliserons pour nos composants Angular (entre autres) afin de les reconnaître rapidement dans le code HTML (e.g.: \). Autrement, la valeur par défaut utilisée par Angular CLI est app et notre composant se nommerait alors \. Ici, l'acronyme wt fait référence à Wishtack. {% endhint %} La commande `ng new` : 1. Crée le squelette du projet dans le dossier `book-shop` *(`package.json`, `.gitignore`, code source, configurations etc...)* 2. Installe implicitement à l'aide de la commande `yarn install` toutes les dépendances indiquées par défaut dans le fichier `package.json` *(sauf si l'on ajoute l'option `--skip-install`)*. 3. Initialise un "repository" git et ajoute le fichier `yarn.lock` généré par l'étape précédente. {% hint style="info" %} Vous obtenez donc une application opérationnelle dont tous les fichiers ont été "commit" proprement.\ Il vous suffit alors d'ajouter un "remote" pour partager votre code source avec les copains.\ \ {% endhint %} {% hint style="info" %} Le module `@angular/cli` installé globalement n'est utile que pour la création de l'application.\ Pour la suite, le module `@angular/cli` sera installé localement dans chaque projet. Une fois le projet initialisé, les développeurs n'ont plus besoin d'installer le module `@angular/cli` globalement. {% endhint %} ## Développement Il suffit maintenant d'ouvrir le projet sur votre IDE puis de lancer la commande suivante : ```bash yarn start ``` ... ou ajouter l'option `--open` pour ouvrir une fenêtre de votre navigateur sur l'application : ```bash yarn start --open ``` Cette commande est un "alias" pour `ng serve` qui lui-même lance un serveur de développement à l'aide de `webpack-dev-server` qui s'occupe principalement des tâches suivantes : * **Watch et build avec webpack** : à chaque fois que vous modifiez le code source de votre application, webpack va détecter les changements et "rebuild" l'application. * **Livereload** : à chaque "rebuild", webpack-dev-server communique avec vos fenêtres de navigation ouvertes sur l'application (par websocket) pour rafraîchir le contenu. C'est ainsi qu'à chaque changement, vous pouvez en observer le résultat quasi-immédiatement sur vos navigateurs. Vous pouvez également lancer l'application *(ou n'importe quel script yarn)* directement depuis l'IDE. ![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LAYWnLip7VzH0ZMpwdg%2F-LAYWpASX1hYOFKFaURi%2Fintellij-yarn-start.gif?alt=media\&token=22026c19-e4eb-4161-a79f-6cf2f0d747d3) Et c'est parti : ![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LAYWDPCp08smq1cyOyg%2F-LAYWF32dCFt2j16EOH2%2Flivereload.gif?alt=media\&token=a6c1fbc8-2716-4e6e-9533-a5d529226e9b) ## Mise à jour La commande update d'Angular CLI permet : * de mettre à jour les dépendances de votre projet, * d'adapter sa structure aux nouvelles version d'Angular CLI *(e.g. : renommage et restructuration du fichier `.angular-cli.json` => `angular.json`)*. * à partir d'Angular 6, d'adapter votre code quand la mise à jour d'une dépendance le nécessite *(e.g. : adaptations en fonction des mises à jour d'Angular Material)*. ```bash yarn ng update ``` {% hint style="warning" %} Nous utilisons la commande `yarn ng update` au lieu de `ng update` afin d'utiliser la version Angular CLI locale à votre projet plutôt que la version installée globalement sur votre environnement *(si Angular CLI est installé globalement)*. {% endhint %} Cf.