Comment installer et utiliser Angular CLI ? (Explication détaillée avec images et texte)

Cet article vous présentera le didacticiel d'installation et d'utilisation d'Angular CLI. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Introduction :

Concernant la version "Angular", "Angular" a été officiellement nommé Angular 1.x comme Angular JS, Angular 2.x et Les éléments ci-dessus sont collectivement appelés « Angulaire ».

Recommandations de didacticiel associées : "tutoriel angulaire"

"CLI" est l'abréviation de "Command Line Interface", qui est une interface de ligne de commande pour réaliser un processus de développement automatisé.

Par exemple : ionic-cli, vue-cli, etc. ; il peut créer des projets, ajouter des fichiers (composants, services, etc.) et effectuer de nombreuses tâches de développement, telles que les tests, l'empaquetage et la publication.

Installer Angular CLI

1. Vous devez installer nodejs et npm

Adresse du site officiel du nœud : https://nodejs.org/en

2. Installez TypeScript globalement, angulaire recommandé. Écrit à l'aide de TypeScript (fichier .ts).

Adresse du site officiel de Typescript : http://www.typescriptlang.org/index.html

Utilisez la commande :

 npm install -g typescript

3 Installez angulaire-cli

Adresse du site officiel d'Angular-cli : https://cli.angular.io/

Utilisez la commande :

npm install -g @angular/cli

Image

Remarque : en raison du temps d'installation angulaire-cli C'est un peu tôt, mais peu importe si ce n'est pas ma version lorsque vous l'installez

Créer un nouveau projet Angular

Utiliser la commande new

// ngStudy 是工程名称可以随意修改的
ng new ngStudy

Icône du projet

Remarque : Il faut attendre longtemps car cela nécessite le téléchargement de node_modules, soit plus de 140 Mo

Structure du projet générée :

Exécuter le projet Angular

Utilisez la commande serve

//需要进入工程的目录中
ng serve

Exécutez l'icône

Accès à l'interface

est écrit à la fin

1. processus d'installation, car de nombreux packages dépendants proviennent de l'étranger, vous ne pourrez peut-être pas les télécharger

1.1 Vous pouvez essayer de modifier l'image npm et de la changer en

1.2 de Taobao via le téléchargement. Agent "Blue Lantern"

2. Pour la structure des répertoires du projet, vous pouvez vous référer aux instructions officielles sur le site chinois : https://angular.cn/guide/quickstart

3. Adresse d'utilisation de la ligne de commande : https://github.com/angular/angular-cli/wiki Collez le diagramme officiel des commandes couramment utilisées

4. version méthode de mise à jour d'angular-cli

Vous pouvez directement utiliser npm install -g @angular/cli pour mettre à jour

Pour plus de connaissances liées à la programmation, veuillez visitez : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!