Tutoriel sur l'installation et l'utilisation de CLI dans Angular4

De nombreux didacticiels sur Internet sont obsolètes, les commandes ne sont pas applicables dans angulaire4, etc., donc l'article suivant vous présente principalement les informations pertinentes sur le didacticiel d'installation et d'utilisation d'Angular CLI pour l'apprentissage d'Angular4. peut s'y référer

Introduction

Concernant la version "Angular", "Angular" a officiellement été nommé Angular 1.x comme Angular JS , Angular 2.x et ce qui précède sont collectivement appelés « Angular ».

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

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.

Laissez-moi vous donner une introduction détaillée au didacticiel d'installation et d'utilisation d'Angular4 Angular CLI. Les amis dans le besoin peuvent s'y référer, je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée.

Installer Angular CLI

1 Vous devez installer nodejs et npm

Adresse du site officiel du nœud : https:/. /nodejs .org/en (Pour les méthodes d'installation détaillées, vous pouvez vous référer à cet article : //www.jb51.net/article/90518.htm)

2. Installez TypeScript globalement. écrire (document .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/

Utiliser la commande :

npm install -g @angular/cli

Image

Remarque : Parce qu'il est un peu tôt pour installer angulaire-cli, mais peu importe si ce n'est pas ma version lorsque vous l'installez.

Nouveau projet Angular

Utilisez la commande new

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

Projet diagramme Afficher

Remarque : doit attendre longtemps, car cela nécessite le téléchargement de node_modules, qui fait plus de 140 Mo

Structure du projet générée :

Exécuter le projet Angular

Utiliser le service de commande

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

pour exécuter Icon

Accès à l'interface

Écrivez à la fin

1. Pendant le processus d'installation, comme 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 remplacez-le par l'agent

1.2 Passed "Blue Lantern" de Taobao à télécharger

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

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

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

peut être mise à jour directement en utilisant

npm install -g @angular/cli

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Résumé personnel VUE (problèmes rencontrés)

Parcours récursif JavaScript et parcours non récursif

Comment utiliser le composant de téléchargement Upload d'element-ui dans vue

Comment implémenter les appels entre méthodes dans vue

Comment vux implémente la fonction d'actualisation pull-up

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!