Bootstrap
Prérequis
Installation des outils suivants :
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.
1
ng config cli.packageManager yarn --global
Copied!
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 installLa commande ci-dessous va créer un projet Angular (avec une application) dans le dossier
book-shop.1
ng new book-shop --prefix wt
Copied!
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 installtoutes les dépendances indiquées par défaut dans le fichierpackage.json(sauf si l'on ajoute l'option--skip-install). - 3.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 :
1
yarn start
Copied!
... ou ajouter l'option
--open pour ouvrir une fenêtre de votre navigateur sur l'application : http://localhost:42001
yarn start --open
Copied!
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).
1
yarn ng update
Copied!
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 3yr ago
Copier le lien