Dans ce tutoriel, vous allez apprendre à installer l’utilitaire de ligne de commande angular cli en tant que package de nodejs.
Angular est un framework très utilisé pour créer des applications web. Angular est un framework d’application Web open source développé par Google et une grande communauté d’individus.
À partir d’aujourd’hui, Angular 10 est la dernière version disponible pour l’installation.
Ce didacticiel vous aidera à installer le module de nœud Angular CLI sur votre système Linux Ubuntu 20.04.
Étape 1 – Installation de Node.js
NVM est un outil de ligne de commande pour installer et gérer node.js sur un système Linux.
Nous devons donc d’abord installer nvm sur notre système.
Connectez-vous au système avec l’utilisateur pour lequel vous devez installer Node.js, puis exécutez la commande ci-dessous pour installer nvm:
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
Après cela, vous pouvez installer n’importe quelle version de node sur votre système.
Vous pouvez également installer plusieurs versions de nœud sur un seul système.
Exécutez les commandes ci-dessous pour charger l’environnement et installer la dernière version de node.js:
source ~/.bashrc nvm install node
La commande ci-dessus affichera la version du nœud et de npm installés sur votre système.
Étape 2 – Installation de la CLI angulaire
Après avoir installé node.js et npm sur votre système, utilisez les commandes suivantes pour installer l’outil Angular cli sur votre système.
npm install -g @angular/cli
La dernière version de Angular CLI sera installée sur votre système Ubuntu Linux.
Vous pouvez avoir besoin d’une ancienne version Angular sur votre machine.
Pour installer une version Angular spécifique, exécutez la commande comme suit avec le numéro de version.
npm install -g @angular/cli@8 #Angular 8 npm install -g @angular/cli@9 #Angular 9 npm install -g @angular/cli@10 #Angular 10
L’utilisation de la commande -g ci-dessus installera l’outil Angular CLI globalement.
Il sera donc accessible à tous les utilisateurs et applications du système.
Angular CLI fournit une commande ng utilisée pour les opérations de ligne de commande. Vérifions la version installée de ng sur votre système.
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 10.1.1 Node: 14.10.1 OS: linux x64 Angular: ... Ivy Workspace: Package Version ------------------------------------------------------ @angular-devkit/architect 0.1001.1 @angular-devkit/core 10.1.1 @angular-devkit/schematics 10.1.1 @schematics/angular 10.1.1 @schematics/update 0.1001.1 rxjs 6.6.2
L’interface de ligne de commande Angular a été installée sur votre système.
Suivez les étapes suivantes pour créer une nouvelle application angulaire sur votre système.
Étape 3 – Création d’une nouvelle application angular
Vous pouvez utiliser la commande ng pour créer une nouvelle application angular.
Créez une application nommée hello-world à l’aide de l’outil de ligne de commande angulaire. Exécutez la commande ci-dessous dans le terminal:
ng new hello-world
Sortie:
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1028 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (631 bytes)
CREATE hello-world/angular.json (3606 bytes)
CREATE hello-world/package.json (1254 bytes)
CREATE hello-world/tsconfig.json (458 bytes)
CREATE hello-world/tslint.json (3185 bytes)
CREATE hello-world/.browserslistrc (853 bytes)
CREATE hello-world/karma.conf.js (1023 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2835 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (753 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (662 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (25757 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
CREATE hello-world/e2e/protractor.conf.js (869 bytes)
CREATE hello-world/e2e/tsconfig.json (294 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE hello-world/e2e/src/app.po.ts (301 bytes)
Packages installed successfully.
Successfully initialized git.
Cela créera un répertoire nommé hello-world dans votre répertoire actuel et créera tous les fichiers requis pour une application angulaire.
Étape 4 – Démarrer l’application angular
Votre application Angular de base est prête à être utilisée.
Basculez vers le répertoire hello-world, puis exécutez votre application angulaire à l’aide de la commande ng serve.
cd hello-world ng serve
Par défaut, l’application angulaire s’exécute sur le port 4200. Vous pouvez accéder à votre système sur le port 4200 pour ouvrir l’application angulaire, comme:
http://localhost:4200
Vous pouvez modifier l’hôte et le port pour exécuter l’application Angular en fournissant des arguments de ligne de commande –host et –port.
ng serve --host 0.0.0.0 --port 8080
L’adresse IP 0.0.0.0 écoute sur toutes les interfaces et est accessible au public.
Conclusion
Dans ce tutoriel, vous avez appris à installer l’utilitaire de ligne de commande angular en tant que package de nœuds.
Ce tutoriel vous a également aidé à créer une nouvelle application angular.
2 Comments