Bootstrap
Prérequis
Installation des outils suivants :
GitNodeJSYarnAngular CLIIntelliJ / WebStorm / VSCodeChromeCré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.
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.
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 :
Crée le squelette du projet dans le dossier
book-shop(package.json,.gitignore, code source, configurations etc...)Installe implicitement à l'aide de la commande
yarn installtoutes les dépendances indiquées par défaut dans le fichierpackage.json(sauf si l'on ajoute l'option--skip-install).Initialise un "repository" git et ajoute le fichier
yarn.lockgé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 :
... ou ajouter l'option --open pour ouvrir une fenêtre de votre navigateur sur l'application : http://localhost:4200
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).
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).
Dernière mise à jour
