# Bootstrap ## Prérequis Installation des outils suivants : {% content-ref url="/pages/-LAMjNHvWi7kD6OoNzMu" %} [Git](/tools/git.md) {% endcontent-ref %} {% content-ref url="/pages/-LAMjNHxOMsk08oRX-6R" %} [NodeJS](/tools/nodejs.md) {% endcontent-ref %} {% content-ref url="/pages/-LAMjNHysypEoFR5lFVP" %} [Yarn](/tools/yarn.md) {% endcontent-ref %} {% content-ref url="/pages/-LAQ3Zbow6iB85A4ZTY1" %} [Angular CLI](/tools/angular-cli.md) {% endcontent-ref %} {% content-ref url="/pages/-LAMjNI-S3isSxZPX3Dc" %} [IntelliJ / WebStorm / VSCode](/tools/intellij-webstorm-vscode.md) {% endcontent-ref %} {% content-ref url="/pages/-LAMjNHzsO8taWedFX0Y" %} [Chrome](/tools/chrome.md) {% 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. ![](/files/-LAYWpASX1hYOFKFaURi) Et c'est parti : ![](/files/-LAYWF32dCFt2j16EOH2) ## 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://guide-angular.wishtack.io/angular/bootstrap.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.