SlideShare une entreprise Scribd logo
vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1
Angular 4
Installation
info@vertika.org
-- Angular 4 -- -- 2by Jean Garutti
Installer Angular
Hormis quelques
étrangetés mineures
C’est vraiment simple
Jean Garutti – vertika.org
info@vertika.org
-- Angular 4 -- -- 3by Jean Garutti
ANGULAR, des projets énormes
info@vertika.org
-- Angular 4 -- -- 4by Jean Garutti
 l'installer manuellement à la main
 utiliser l'interface Angular CLI (
interface de ligne de commande)
qui l'installe pour vous
 mettre à niveau un projet Angular 2
vers un projet Angular 4
 cloner un projet Angular 4 de Github
ANGULAR, 4 façons de
commencer un projet
info@vertika.org
-- Angular 4 -- -- 5by Jean Garutti
C’est un package Node.js .
Install
 npm install -g typescript
Compile
 tsc helloworld.ts
Installation de TypeScript
vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 6
Angular 4
Dépendances
info@vertika.org
-- Angular 4 -- -- 7by Jean Garutti
Avant de commencer,
vous devez vous assurer
que vous avez installé
quelques dépendances.
 Node.js avec npm
(Node Package Manager)
 Angular-CLI
(interface de ligne de commande)
ANGULAR, les dépendances
info@vertika.org
-- Angular 4 -- -- 8by Jean Garutti
 Pour vérifier si vous avez installé
Node.js, tapez sur votre
console / ligne de commande :
node -v
Si cette commande n'est pas reconnue,
vous devez installer Node.js.
ANGULAR, Node.js ?
info@vertika.org
-- Angular 4 -- -- 9by Jean Garutti
 Oubliez la fenêtre de commandes
standard…
 https://www.fosshub.com/ConEmu.html
http://www.topbestalternatives.com/con
sole/
CONSOLE
info@vertika.org
-- Angular 4 -- -- 10by Jean Garutti
 Dans la page de téléchargement
Node.js
https://nodejs.org/en/download/
 choisissez l’'installation
en fonction de l’OS.
 Acceptez l'accord, choisissez un dossier
d'installation, cliquez sur « Suivant »
dans la page de Configuration.
installer Node.js et npm
info@vertika.org
-- Angular 4 -- -- 11by Jean Garutti
Il installera aussi
le gestionnaire de paquetages npm
dont nous aurons besoin.
npm met les modules en place
 afin que Node puisse les trouver
et gère les conflits de dépendance
 de manière intelligente.
installer Node.js et npm
info@vertika.org
-- Angular 4 -- -- 12by Jean Garutti
 Fermez la console / ligne de
commande et rechargez-la.
 Vous pouvez maintenant
exécuter la commande node –v
 elle vous fournira
le numéro de version actuel.
installer Node.js et npm
info@vertika.org
-- Angular 4 -- -- 13by Jean Garutti
 Cet outil vous permet de créer des
projets Angular
 et différentes tâches de développement.
 À la console, tapez:
npm install -g @angular/cli
installer Angular-CLI
info@vertika.org
-- Angular 4 -- -- 14by Jean Garutti
 Le résultat résultant ressemblera à ceci:
@ Angular / cli: 1.0.0
Nœud: 6.10.0
Os: win32 x64
installer Angular-CLI
info@vertika.org
-- Angular 4 -- -- 15by Jean Garutti
Lorsque nous exécutons
ng -v
 dans un
dossier de projet Angular,
il fournira la version d'Angular
utilisée par ce projet particulier.
installer Angular-CLI
info@vertika.org
-- Angular 4 -- -- 16by Jean Garutti
Le moyen le plus simple
de démarrer
un nouveau projet Angular 4
 consiste à utiliser la CLI
que nous venons d'installer.
installer Angular avec Angular-CLI
info@vertika.org
-- Angular 4 -- -- 17by Jean Garutti
 Pour démarrer un nouveau projet ng4, sur la
console, tapez:
> ng new my-project-name
// laissez-le installer
> cd my-project-name
Après environ une minute, vous serez prêt!
installer Angular avec Angular-CLI
info@vertika.org
-- Angular 4 -- -- 18by Jean Garutti
 Si vous préférez installer Angular 4
sans la ligne de commande,
 vous pouvez l'installer manuellement à
l'aide du démarrage rapide Angular .
 Actuellement il n'y a pas de référentiel
QuickSart Angular 4.
 Le démarrage rapide actuel
est basé sur Angular 2.
installer Angular avec Angular-CLI
info@vertika.org
-- Angular 4 -- -- 19by Jean Garutti
Vous pouvez toujours utiliser
git
 pour cloner le démarrage
rapide
 et exécuter le processus de
mise à niveau décrit ci-dessus.
installer Angular avec Angular-CLI
info@vertika.org
-- Angular 4 -- -- 20by Jean Garutti
https://www.atlassian.com/git/
tutorials/install-git
$ git clone
https://github.com/angular/
quickstart.git quickstart
installer git et cloner quickstart
info@vertika.org
-- Angular 4 -- -- 21by Jean Garutti
git clone
https://github.com/git/git
il présente
sa grande arborescence
installer git dernière version
info@vertika.org
installer npm
-- Angular 4 -- -- 22by Jean Garutti
npm <command>
access
adduser
bin
bugs
c
cache
completion
config
ddp
dedupe
deprecate
dist-tag
docs
Isaac Z. Schlueter
link
list
ln
login
logout
ls
outdated
owner
pack
ping
prefix
prune
publish
rb
rebuild
repo
restart
root
run
run-script
s
se
search
set
shrinkwrap
star
stars
start
stop
t
tag
team
test
tst
un
uninstall
unpublish
unstar
up
update
v
version
view
whoami
edit
explore
get
help
help-search
i
init
install
install-test
it
https://www.npmjs.com/package/download
$ npm install --save download
info@vertika.org
-- Angular 4 -- -- 23by Jean Garutti
npm install npm@latest –g
installer npm dernière version
info@vertika.org
-- Angular 4 -- -- 24by Jean Garutti
 (Un-) Install a package
 Check for outdated
packages
 Check npm version
 Clean npm cache
 Enable Auto completion
 Get package info
 Install a package from
github
 Install a package from local
cache
 List installed packages
 Lockdown package
versions
 npm install -g without sudo
 Remove duplicate packages
 Run npm in production
 Some npm global configs
 Update all / one package
 Update npm itself
 View package info
npm paquets utiles
https://gist.github.com/ankurk91/48e0844320601ebc0cae
info@vertika.org
-- Angular 4 -- -- 25by Jean Garutti
 en 7 langues
 en présentiel
ou en e-learning
 par des experts
Pour la suite, inscrivez-vous
aux cours Angular 4
info@vertika.org
-- Angular 4 -- -- 26by Jean Garutti

Contenu connexe

PPT
Angular 4 - architecture -- français
PPT
Angular 4 - pöurquoi --Français
PPT
Angular 4 - ngfor -- Français
PPT
Angular 4 - creer projet par CLI -- français
PPT
Angular 4 - directives d'attribut -- Français
PPT
Angular 4 - creer pipes services -- Français
PPT
Angular 4 - directives structurelles -- Français
PPT
Angular 4 - property binding- slsh-fr
Angular 4 - architecture -- français
Angular 4 - pöurquoi --Français
Angular 4 - ngfor -- Français
Angular 4 - creer projet par CLI -- français
Angular 4 - directives d'attribut -- Français
Angular 4 - creer pipes services -- Français
Angular 4 - directives structurelles -- Français
Angular 4 - property binding- slsh-fr

Tendances (12)

PPT
Angular 4 - explorer un projet par CLI-- Français
PPT
Angular 4 - event binding -- Français
PPT
Angular 4 - directives -- Français
PPT
Angular 4 - regles -- Français
PPT
Angular 4 - template -- Français
PPT
Angular 4 - creer composants -- français
PPT
Angular 4 - decorateurs -- Français
PPT
Angular 4 - shadow dom -- Français
PPT
Angular 4 - css Français
PPT
Angular 4 - ngIf -- Fra,çais
PPT
Angular 4 - interpolation -- Français
PDF
Geek Time December 2016 : Swagger II
Angular 4 - explorer un projet par CLI-- Français
Angular 4 - event binding -- Français
Angular 4 - directives -- Français
Angular 4 - regles -- Français
Angular 4 - template -- Français
Angular 4 - creer composants -- français
Angular 4 - decorateurs -- Français
Angular 4 - shadow dom -- Français
Angular 4 - css Français
Angular 4 - ngIf -- Fra,çais
Angular 4 - interpolation -- Français
Geek Time December 2016 : Swagger II
Publicité

Similaire à Angular 4 - installation d'Angular -- Français (20)

PDF
Presentation de nagios mohamed bouhamed
PDF
Mise en place de Nagios core sur Ubuntu 22.04
PDF
Le service workers
PDF
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
PPTX
Intégration de SonarQube dans GitLab ci
PDF
Cours 1 introduction
PDF
CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?
PDF
Mise en place nagios
PDF
ASP.NET MVC 6
PDF
Retour d'expérience technique Go, gRPC, Kubernetes
PDF
Firefox OS dans le web - Journée du libre 2015 Lille
PPTX
Angular in the Liferay portlet world
PDF
PPT
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
PDF
wallabag, comment on a migré vers symfony3
PPTX
BIENVENUE.pptx
PPTX
Introduction à ASP.NET Core
PPT
Introduction à Vaadin
PDF
Installation de snort avec pulled pork
PPTX
Angular2 / Typescript symposium Versusmind
Presentation de nagios mohamed bouhamed
Mise en place de Nagios core sur Ubuntu 22.04
Le service workers
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Intégration de SonarQube dans GitLab ci
Cours 1 introduction
CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?
Mise en place nagios
ASP.NET MVC 6
Retour d'expérience technique Go, gRPC, Kubernetes
Firefox OS dans le web - Journée du libre 2015 Lille
Angular in the Liferay portlet world
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
wallabag, comment on a migré vers symfony3
BIENVENUE.pptx
Introduction à ASP.NET Core
Introduction à Vaadin
Installation de snort avec pulled pork
Angular2 / Typescript symposium Versusmind
Publicité

Dernier (20)

PPTX
Présentation Projet Entreprise Minimaliste Moderne Sobre Blanc Noir.pptx
PPT
Les moyens de transport-2023.ppt french language teaching ppt
PDF
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 🌿 SVT - Extrait
PDF
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 📈 SES - Extrait
PPTX
plus que ´parfait--.-.-.-..-.--.-..-.-.-.-.
PDF
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - Physique ⚡ - Chimi...
PDF
🎓 Le Secret des Profs Captivants - 💡 2. Hygiène vocale et santé professionnel...
PPTX
SESSION5-SUPPORT-DE-COURS-FLEC-(Future leader en énergie au Cameroun)-CECOSDA...
PDF
Articles definis et indefinis. Comment les différencier ?
DOCX
ENDODONTIE CONSERVATRICE.docx faculté de médecine dentaire
PDF
🎓 Le Secret des Profs Captivants - 💡 Pourquoi l’oral est stratégique en class...
PDF
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
PDF
rédigés - Spécialité: 📊 Mathématique - Extrait
PDF
Il y a et les lieux de la ville (négation avec les indéfinis)
PPTX
Bienvenido slides about the first steps in spanish.pptx
PPTX
Formation Equipement de protection .pptx
PDF
Formation SSIAP _ Gestion et contrôle .pdf
PPTX
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
PPT
calcul---électrique--et--chutes de tension.ppt
PPTX
Devenir Inspecteur HSE _ Chp1_ L1....pptx
Présentation Projet Entreprise Minimaliste Moderne Sobre Blanc Noir.pptx
Les moyens de transport-2023.ppt french language teaching ppt
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 🌿 SVT - Extrait
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 📈 SES - Extrait
plus que ´parfait--.-.-.-..-.--.-..-.-.-.-.
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - Physique ⚡ - Chimi...
🎓 Le Secret des Profs Captivants - 💡 2. Hygiène vocale et santé professionnel...
SESSION5-SUPPORT-DE-COURS-FLEC-(Future leader en énergie au Cameroun)-CECOSDA...
Articles definis et indefinis. Comment les différencier ?
ENDODONTIE CONSERVATRICE.docx faculté de médecine dentaire
🎓 Le Secret des Profs Captivants - 💡 Pourquoi l’oral est stratégique en class...
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
rédigés - Spécialité: 📊 Mathématique - Extrait
Il y a et les lieux de la ville (négation avec les indéfinis)
Bienvenido slides about the first steps in spanish.pptx
Formation Equipement de protection .pptx
Formation SSIAP _ Gestion et contrôle .pdf
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
calcul---électrique--et--chutes de tension.ppt
Devenir Inspecteur HSE _ Chp1_ L1....pptx

Angular 4 - installation d'Angular -- Français

  • 1. vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1 Angular 4 Installation
  • 2. info@vertika.org -- Angular 4 -- -- 2by Jean Garutti Installer Angular Hormis quelques étrangetés mineures C’est vraiment simple Jean Garutti – vertika.org
  • 3. info@vertika.org -- Angular 4 -- -- 3by Jean Garutti ANGULAR, des projets énormes
  • 4. info@vertika.org -- Angular 4 -- -- 4by Jean Garutti  l'installer manuellement à la main  utiliser l'interface Angular CLI ( interface de ligne de commande) qui l'installe pour vous  mettre à niveau un projet Angular 2 vers un projet Angular 4  cloner un projet Angular 4 de Github ANGULAR, 4 façons de commencer un projet
  • 5. info@vertika.org -- Angular 4 -- -- 5by Jean Garutti C’est un package Node.js . Install  npm install -g typescript Compile  tsc helloworld.ts Installation de TypeScript
  • 6. vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 6 Angular 4 Dépendances
  • 7. info@vertika.org -- Angular 4 -- -- 7by Jean Garutti Avant de commencer, vous devez vous assurer que vous avez installé quelques dépendances.  Node.js avec npm (Node Package Manager)  Angular-CLI (interface de ligne de commande) ANGULAR, les dépendances
  • 8. info@vertika.org -- Angular 4 -- -- 8by Jean Garutti  Pour vérifier si vous avez installé Node.js, tapez sur votre console / ligne de commande : node -v Si cette commande n'est pas reconnue, vous devez installer Node.js. ANGULAR, Node.js ?
  • 9. info@vertika.org -- Angular 4 -- -- 9by Jean Garutti  Oubliez la fenêtre de commandes standard…  https://www.fosshub.com/ConEmu.html http://www.topbestalternatives.com/con sole/ CONSOLE
  • 10. info@vertika.org -- Angular 4 -- -- 10by Jean Garutti  Dans la page de téléchargement Node.js https://nodejs.org/en/download/  choisissez l’'installation en fonction de l’OS.  Acceptez l'accord, choisissez un dossier d'installation, cliquez sur « Suivant » dans la page de Configuration. installer Node.js et npm
  • 11. info@vertika.org -- Angular 4 -- -- 11by Jean Garutti Il installera aussi le gestionnaire de paquetages npm dont nous aurons besoin. npm met les modules en place  afin que Node puisse les trouver et gère les conflits de dépendance  de manière intelligente. installer Node.js et npm
  • 12. info@vertika.org -- Angular 4 -- -- 12by Jean Garutti  Fermez la console / ligne de commande et rechargez-la.  Vous pouvez maintenant exécuter la commande node –v  elle vous fournira le numéro de version actuel. installer Node.js et npm
  • 13. info@vertika.org -- Angular 4 -- -- 13by Jean Garutti  Cet outil vous permet de créer des projets Angular  et différentes tâches de développement.  À la console, tapez: npm install -g @angular/cli installer Angular-CLI
  • 14. info@vertika.org -- Angular 4 -- -- 14by Jean Garutti  Le résultat résultant ressemblera à ceci: @ Angular / cli: 1.0.0 Nœud: 6.10.0 Os: win32 x64 installer Angular-CLI
  • 15. info@vertika.org -- Angular 4 -- -- 15by Jean Garutti Lorsque nous exécutons ng -v  dans un dossier de projet Angular, il fournira la version d'Angular utilisée par ce projet particulier. installer Angular-CLI
  • 16. info@vertika.org -- Angular 4 -- -- 16by Jean Garutti Le moyen le plus simple de démarrer un nouveau projet Angular 4  consiste à utiliser la CLI que nous venons d'installer. installer Angular avec Angular-CLI
  • 17. info@vertika.org -- Angular 4 -- -- 17by Jean Garutti  Pour démarrer un nouveau projet ng4, sur la console, tapez: > ng new my-project-name // laissez-le installer > cd my-project-name Après environ une minute, vous serez prêt! installer Angular avec Angular-CLI
  • 18. info@vertika.org -- Angular 4 -- -- 18by Jean Garutti  Si vous préférez installer Angular 4 sans la ligne de commande,  vous pouvez l'installer manuellement à l'aide du démarrage rapide Angular .  Actuellement il n'y a pas de référentiel QuickSart Angular 4.  Le démarrage rapide actuel est basé sur Angular 2. installer Angular avec Angular-CLI
  • 19. info@vertika.org -- Angular 4 -- -- 19by Jean Garutti Vous pouvez toujours utiliser git  pour cloner le démarrage rapide  et exécuter le processus de mise à niveau décrit ci-dessus. installer Angular avec Angular-CLI
  • 20. info@vertika.org -- Angular 4 -- -- 20by Jean Garutti https://www.atlassian.com/git/ tutorials/install-git $ git clone https://github.com/angular/ quickstart.git quickstart installer git et cloner quickstart
  • 21. info@vertika.org -- Angular 4 -- -- 21by Jean Garutti git clone https://github.com/git/git il présente sa grande arborescence installer git dernière version
  • 22. info@vertika.org installer npm -- Angular 4 -- -- 22by Jean Garutti npm <command> access adduser bin bugs c cache completion config ddp dedupe deprecate dist-tag docs Isaac Z. Schlueter link list ln login logout ls outdated owner pack ping prefix prune publish rb rebuild repo restart root run run-script s se search set shrinkwrap star stars start stop t tag team test tst un uninstall unpublish unstar up update v version view whoami edit explore get help help-search i init install install-test it https://www.npmjs.com/package/download $ npm install --save download
  • 23. info@vertika.org -- Angular 4 -- -- 23by Jean Garutti npm install npm@latest –g installer npm dernière version
  • 24. info@vertika.org -- Angular 4 -- -- 24by Jean Garutti  (Un-) Install a package  Check for outdated packages  Check npm version  Clean npm cache  Enable Auto completion  Get package info  Install a package from github  Install a package from local cache  List installed packages  Lockdown package versions  npm install -g without sudo  Remove duplicate packages  Run npm in production  Some npm global configs  Update all / one package  Update npm itself  View package info npm paquets utiles https://gist.github.com/ankurk91/48e0844320601ebc0cae
  • 25. info@vertika.org -- Angular 4 -- -- 25by Jean Garutti  en 7 langues  en présentiel ou en e-learning  par des experts Pour la suite, inscrivez-vous aux cours Angular 4
  • 26. info@vertika.org -- Angular 4 -- -- 26by Jean Garutti