Tutorial on the installation and use of CLI in Angular4

Many tutorials on the Internet are out of date, commands are not applicable in angular4, etc., so the following article mainly introduces you to the relevant information about the installation and usage tutorial of Angular CLI for Angular4 learning. Friends in need can refer to it

Introduction

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

"CLI" is the abbreviation of "Command Line Interface". It is a command line interface that realizes automated development processes.

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

Let me give you a detailed introduction to the installation and use tutorial of Angular4 Angular CLI. Friends in need can refer to it. I won’t say much below, let’s take a look at the detailed introduction.

Install Angular CLI

1. You need to install nodejs and npm

The address of Node official website: https://nodejs .org/en (For detailed installation methods, you can refer to this article: //www.jb51.net/article/90518.htm)

2. Install typescript globally. Angular recommends using typescript to write (.ts document).

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

Illustration

Note: Because it is a bit early to install angular-cli , but it doesn’t matter if it’s not my version when you install it.

New Angular project

Use the command new

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

Project icon

Note: You need to wait 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

Write 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 Through "Blue Light" Agent to download

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

3. The command line usage address: https://github.com/angular/angular-cli/wiki Paste pictures of commonly used commands provided by the official

4. Introduce how to update the version of angular-cli

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

The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.

Related articles:

VUE personal summary (problems encountered)

JavaScript recursive traversal and non-recursive traversal

How to use the Upload upload component of element-ui in vue

How to implement calls between methods in vue

How vux implements the pull-up refresh function

The above is the detailed content of Tutorial on the installation and use of CLI in Angular4. For more information, please follow other related articles on the PHP Chinese website!