Creating a hello world application in angular 8

What is Angular?

Angular is a TypeScript-based open-source web application framework for developing mobile and desktop web applications.

Creating a hello world application in Angular

We will use Visual Studio code as our IDE for coding purposes. You can download it from the link below:

https://code.visualstudio.com/

Follow the below steps to create a hello world application in angular:

Step 1: Install the Node.js and npm package manager

Angular requires Node.js to install various npm packages. Download and install Node.js from the link given below:

https://nodejs.org/en

This setup guide uses the npm client command-line interface, which is installed with Node.js by default.

Step 2: Install the Angular CLI

To install the Angular CLI globally using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli

Step 3: Create a workspace and new application

To create a workspace open terminal and create a new directory with the following command:

mkdir projects

Then to into workspace directory, enter the following command

cd projects

Then to create new angular application enter following command:

ng new hello-world

After entering the above command angular CLI will create your new application.

To run your application, enter the following command

ng serve

Now angular CLI will run your project. To open your project in browser enter the following URL:

http://localhost:4200

This is the default template UI provided by angular.

Go to app.component.html and enter the following code:

<div style="text-align:center"> 
<h1>Hello world from DevConquer team.</h1>
</div> 
<router-outlet></router-outlet>

After typing the above code, save the changes. Your application will reload automatically.

Conclusion:

By the above steps, you can successfully create a hello world application in angular. If you face any problems, post the problem in the comment block. I will reply to you as soon as possible.

Links:

Bootstrap is a popular CSS framework for web development. To install bootstrap in angular click the following link.

Install bootstrap in angular

See also:

*ngFor in angular
template vs templateUrl
Components in angular
Services in angular
CRUD Operations in Angular
Routing in Angular