A brief discussion on how to build and run a simple project from scratch using the Angular CLI tool

AngularCLI is an official build tool of the angular framework. This article will introduce you to the development environment, how to install Angular CLI, and how to use Angular CLI to build and run a simple Angular application.

Angular Chinese official website: https://angular.cn/guide/quickstart

Prerequisites

Before you begin, make sure your development environment includesNode.js®and the npm package manager.

Node.js

Angular requires an 8.x or 10.x version ofNode.js.

• To check your version, run thenode -vcommand in a terminal/console window.
• To installNode.js, please visitnodejs.org.

[Related tutorial recommendations: "angular Tutorial"]

npm Package Manager

Angular, Angular Both CLI and Angular applications rely on features and functionality provided by certain libraries, which are npm packages. To download and install npm packages, you must have an npm package manager.

This article uses theyarn clientCommand line interface, management of dependency packages

To check whether you have installed the yarn client, please go to Terminal/Control Run theyarn -vcommand in the console window.

Step One: Install Angular CLI

You will use Angular CLI to create projects, create application and library code, and perform various development tasks, such as testing, Package and publish.

Install Angular CLI globally.

To install the CLI usingnpm, open a terminal/console window and enter the following command:

yarn global add @angular/cli

To check if you have installed angular/ cli, please run theng --versioncommand in the terminal/console window. The following picture represents a successful installation.

Step 2: Create a workspace and initial application

AngularWorkspaceis where you develop your application context. Each workspace contains a number of files used by one or moreprojects. Each project is a set of files consisting of an application, library, or end-to-end (e2e) test.

To create a workspace and initial application project:

• Run the CLI commandng newand provide a namemy-app, as shown below:

  ng new my-app

• ##ng newwill prompt you to Which features are included in the initial application project. Please press Enter to accept the default value.

A new workspace with the root directory named
• my-app
An initial skeleton application project, also called
• my-app(but located in thesrcsubdirectory)
An end-to-end test project (located in
• e2esubdirectory)
Related configuration files

--style less, represents the default use of less in the project, the file extension or preprocessor used for style files.

ng new my-app --style less

Angular includes a development server so you can easily build applications locally and start a development server.

my-app
1. ).Use the CLI command
ng serve
2. to start the development server with the--openoption.

   ng serve --open

The command will automatically start the server and monitor your file changes. When you modify these files, it will rebuild the application. The

(or just-o) option will automatically open the browser and visithttp://localhost:4200/.

are the basic building blocks in Angular applications. They display data on the screen, listen for user input, and take action based on that input.As part of the initial application, the CLI will also create your first Angular component for you. It is the

, namedapp-root.

1、打开 ./src/app/app.component.ts。

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First Angular App!'; }

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }