Bootstrap

Prérequis

Installation des outils suivants :

GitNodeJSYarnAngular CLIIntelliJ / WebStorm / VSCodeChrome

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.

ng config cli.packageManager yarn --global

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

La commande ci-dessous va créer un projet Angular (avec une application) dans le dossier book-shop.

ng new book-shop --prefix wt

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.: <wt-book-list>).

Autrement, la valeur par défaut utilisée par Angular CLI est app et notre composant se nommerait alors <app-book-list>. Ici, l'acronyme wt fait référence à Wishtack.

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.

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. https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes https://help.github.com/articles/adding-a-remote/

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.

Développement

Il suffit maintenant d'ouvrir le projet sur votre IDE puis de lancer la commande suivante :

yarn start

... ou ajouter l'option --open pour ouvrir une fenêtre de votre navigateur sur l'application : http://localhost:4200

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.

Et c'est parti :

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

yarn ng update

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

Cf. https://update.angular.io