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/

Visual Studio Code

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

Node.js installation

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

angular-cli installation

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

create directory and change into directory

Then to create new angular application enter following command:

ng new hello-world

ng new hello-world command

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

To run your application, enter the following command

ng serve

ng serve command

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

http://localhost:4200

default template

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>

hello world application code

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

Hello world application user interface

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

0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Prashanth
Prashanth
1 year ago

After creating project I am not able to find app.component.html file in visual studio in Open editors