Table of Contents
Introduction:
Install Angular CLI
Image
Create a new Angular project
Use the command new
Project icon
Run the Angular project
Use the command serve
Run the icon
Interface access
Written at the end
Home Web Front-end JS Tutorial How to install and use Angular CLI? (Detailed explanation with pictures and text)

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

Sep 09, 2020 am 10:30 AM
angular

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.

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

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
Copy after login

3. Install angular-cli

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

Use command:

npm install -g @angular/cli
Copy after login

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

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

Create a new Angular project

Use the command new

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

Project icon

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

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

Generated project structure:

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

Run the Angular project

Use the command serve

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

Run the icon

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

Interface access

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

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

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

4. Introduce the version method of updating angular-cli

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

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

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1247
24
Let's talk about metadata and decorators in Angular Let's talk about metadata and decorators in Angular Feb 28, 2022 am 11:10 AM

This article continues the learning of Angular, takes you to understand the metadata and decorators in Angular, and briefly understands their usage. I hope it will be helpful to everyone!

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

An article exploring server-side rendering (SSR) in Angular An article exploring server-side rendering (SSR) in Angular Dec 27, 2022 pm 07:24 PM

Do you know Angular Universal? It can help the website provide better SEO support!

A brief analysis of how to use monaco-editor in angular A brief analysis of how to use monaco-editor in angular Oct 17, 2022 pm 08:04 PM

How to use monaco-editor in angular? The following article records the use of monaco-editor in angular that was used in a recent business. I hope it will be helpful to everyone!

Angular + NG-ZORRO quickly develop a backend system Angular + NG-ZORRO quickly develop a backend system Apr 21, 2022 am 10:45 AM

This article will share with you an Angular practical experience and learn how to quickly develop a backend system using angualr combined with ng-zorro. I hope it will be helpful to everyone!

How to use PHP and Angular for front-end development How to use PHP and Angular for front-end development May 11, 2023 pm 04:04 PM

With the rapid development of the Internet, front-end development technology is also constantly improving and iterating. PHP and Angular are two technologies widely used in front-end development. PHP is a server-side scripting language that can handle tasks such as processing forms, generating dynamic pages, and managing access permissions. Angular is a JavaScript framework that can be used to develop single-page applications and build componentized web applications. This article will introduce how to use PHP and Angular for front-end development, and how to combine them

Detailed explanation of angular learning state manager NgRx Detailed explanation of angular learning state manager NgRx May 25, 2022 am 11:01 AM

This article will give you an in-depth understanding of Angular's state manager NgRx and introduce how to use NgRx. I hope it will be helpful to you!

Token-based authentication with Angular and Node Token-based authentication with Angular and Node Sep 01, 2023 pm 02:01 PM

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

See all articles