Hello World Application using Angular 2

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

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.

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

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 .

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

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

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

Your project directory should look like this.

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

npm install.

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

This will start your lite web server and launch your Angular 2 Application.

Output:

View More:

Hello World Angular Js Application.
Introduction to Node.Js
ng-bind-html directive in Angular Js.
Hello World Example in Node.JS.

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.

Debug On Web