How to install and use Angular CLI? (Detailed explanation with pictures and text)

This article will introduce you to the Angular CLI installation and usage tutorial. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Introduction:

Regarding the "Angular" version, "Angular" has officially named Angular 1.x as Angular JS, Angular 2.x and The above are collectively referred to as "Angular".

Related tutorial recommendations: "angular Tutorial"

"CLI" is the abbreviation of "Command Line Interface", which is a Command line interface to realize automated development process.

For example: ionic-cli, vue-cli, etc.; it can create projects, add files (components, services, etc.) and perform a lot of development tasks, such as testing, packaging and publishing

Install Angular CLI

1. You need to install nodejs and npm

Node official website address: https://nodejs.org/en

2. Install typescript globally, angular recommended Written using typescript (.ts file).

Typescript official website address: http://www.typescriptlang.org/index.html

Use command:

 npm install -g typescript

3. Install angular-cli

Angular-cli official website address: https://cli.angular.io/

Use command:

npm install -g @angular/cli

Image

Note: Because of the time to install angular-cli It's a bit early, but it doesn't matter if it's not my version when you install it

Create a new Angular project

Use the command new

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

Project icon

Note: You need to wait for a long time, because this requires downloading node_modules, which is more than 140 MB

Generated project structure:

Run the Angular project

Use the command serve

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

Run the icon

Interface access

Written at the end

1. During the installation process, because many dependent packages are from abroad, you may not be able to download them.

1.1 You can try to modify the npm image and change it to Taobao's

1.2 Download through the "Blue Lantern" agent

2. For the directory structure of the project, you can refer to the official Instructions on the Chinese website: https://angular.cn/guide/quickstart

3. Command line usage address: https://github.com/angular/angular-cli/wiki Paste the official one Diagram of commonly used commands

4. Introduce the version method of updating angular-cli

You can directly use npm install -g @angular/cli to update

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to install and use Angular CLI? (Detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!