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.

19 Comments

  • I simply couldn’t leave your site prior to suggesting that I actually enjoyed the usual info an individual provide in your guests? Is going to be again continuously in order to investigate cross-check new posts|

  • Greetings from Los angeles! I’m bored to tears at work so I decided to check out your website on my iphone during lunch break. I enjoy the knowledge you provide here and can’t wait to take a look when I get home. I’m shocked at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, wonderful site!|

  • It’s going to be end of mine day, but before end I am reading this enormous paragraph to improve my experience.|

  • Thanks for your posting on this site. From my own experience, often times softening upwards a photograph could possibly provide the wedding photographer with a little bit of an inventive flare. Many times however, this soft clouds isn’t just what exactly you had in your mind and can quite often spoil a normally good snapshot, especially if you anticipate enlarging it.

  • Thanks for your post on this web site. From my own experience, there are occassions when softening right up a photograph may well provide the photographer with a little bit of an creative flare. More often than not however, the soft blur isn’t just what exactly you had planned and can often times spoil an otherwise good photograph, especially if you anticipate enlarging it.

  • Howdy! This post could not be written any better! Reading through this post reminds me of my old room mate! He always kept chatting about this. I will forward this article to him. Fairly certain he will have a good read. Many thanks for sharing!|

  • I’m curious to find out what blog platform you’re using? I’m having some minor security issues with my latest website and I would like to find something more safe. Do you have any recommendations?|

  • Hi, Neat post. There’s a problem with your website in internet explorer, may test this? IE nonetheless is the market leader and a big part of folks will omit your magnificent writing due to this problem.|

  • 164145 676278Im so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation thats at the other blogs. Appreciate your sharing this greatest doc. 193232

  • It’s actually a great and useful piece of info. I’m glad that you shared this helpful information with us. Please stay us up to date like this. Thank you for sharing.|

  • I’m amazed, I must say. Seldom do I come across a blog that’s both equally educative and interesting, and without a doubt, you’ve hit the nail on the head. The issue is something too few folks are speaking intelligently about. I am very happy that I came across this in my search for something concerning this.|