Hello Friends, In this tutorial we are going to learn how to create a simple Hello World application using Angular 2. Angular 2 is most popular framework nowadays which is developed by Google. This framework has overcome the problem while developing a single page application.

Introduction:

There are various ways to get started with a simple Angular 2 application.

  • One way which is the most difficult way also not preferred way is to start everything from starting.
  • Another way is to start with Angular Github, which provides the necessary code to start with a Simple Angular 2 application. We will use this approach to start with Angular 2 application.
  • One way is to start with Angular CLI. We will discuss this in upcoming sessions.

For creating a simple Hello World Application using Angular 2 we need to install following components.

npm:

npm acronyms for node package manager which is used to work with open source repository. npm is used to add the dependent component of Angular 2 to your project.

Click Here to download the latest version of npm. This is the official site for npm. Follow the steps to install the npm on your system.

After completing installation you can check your node and npm version using the following command.

node -v
npm version

Hello World Application using Angular 2

git:

This is a source code provider software.  Using git we can get the sample application from GitHub Angular site.

You can download the latest version of git from here,

Editor:

There are many editors available for developing Angular Js development. I am using Visual Studio code editor.

You can download the latest version of the editor from here.

Simple Example Hello World Application using Angular 2:

Step 1- Open GIT cmd as shown in below image.

Hello World Application using Angular 2

Step 2- Goto your project directory as shown in below image depending on your folder name.

Hello World Application using Angular 2

Step 3- For creating your first application using Angular 2 we need to clone the quickstart application from Github. Go to your project directory and register the following commands on Command Prompt.

git clone https://github.com/angular/quickstart Demo .

Hello World Application using Angular 2

This will clone a sample application from GitHub to your project directory.

Hello World Application using Angular 2

Step 4-  Now navigate to Demo folder as shown in below image.

Hello World Application using Angular 2

Step 5- Now open Visual Studio Code and Open your project folder as shown in below image.

Hello World Application using Angular 2

Your project directory should look like this.

Hello World Application using Angular 2

Step 6-  Go to your command prompt and run the following command.

npm install.

Hello World Application using Angular 2

This will install all necessary packages that are required for Angular Js application to work.

Step 7- After successful installation npm, In Visual Studio Code goto to Demo>src>app and find app.component.ts file.

Step 8-  You will find the following code in app.component.ts

import { Component } from '@angular/core';

@Component({

selector:'my-app',

template:`<h1>Hello {{name}}</h1>`,

})

export class AppComponent { name = 'Angular'; }
Step 9- Replace the name Angular with World like this.
import { Component } from '@angular/core';

@Component({

selector:'my-app',

template:`<h1>Hello {{name}}</h1>`,

})

export class AppComponent { name = 'World'; }
There are other files in the application You don’t need to change other files. We will discuss on it in upcoming sessions.
Step 10- Goto GIT command prompt and run the following command.
npm start
Hello World Application using Angular 2
This will start your lite web server and launch your Angular 2 Application.

Output:

Hello World Application using Angular 2

View More:

Conclusion:

I hope this post will help you for starting with Angular 2. Your Feedback, Comments, and Suggestions are always welcome to me.

Thank You.

Leave a Comment