AngularJs 2.0 Hello World Example – Step By Step

In this tutorial i am going to explain about AngularJs 2.0 Hello World Example – Step By Step. In my previous tutorial i have explained about

Implementation :

Now we will see the implementation of AngularJs 2.0 Hello World Example – Step By Step.

AngularJS is an open source JavaScript MVC framework for web application mainly used to build Single Page Applications. To learn more about angularjs basic knowledge of HTML, JavaScript, CSS and web application is required.

Some of the advantages of Angularjs is it is supported by Google, open source mvc framework. It supports built-in attributes and supports separation of concern.

For developing AngularJs application we can use any one of the below IDEs

In our application we are going to use Visual Studio.

Download AngularJs:

We can download the AngularJs in many ways.

  1. Go to angularjs.org  website and download the required version of angular js.
  2. Or you can directly refer the angularjs from the below cdn into your project. https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js
  3. In visual studio we can install it using nuget manager.

Create AngularJs 2.0 Hello World Example

Now let us see how to create AngularJs 2.0 Hello World Example step by step.

Open visual studio and create a new project, name it as AngularJsExample.

Step 1 of AngularJs 2.0 Hello World Example - Step By Step

In the next page select Empty template and click Ok button.

Step 2 of AngularJs 2.0 Hello World Example - Step By Step

Now the project will get loaded. Now right click on the project and choose Manage NuGet Packages option from the context menu. Refer the below screenshot.

Step 3 of AngularJs 2.0 Hello World Example - Step By Step

Now search for angular js in the browse tab. It will list down all the nuget packages availaable.

Step 4 of AngularJs 2.0 Hello World Example - Step By Step

Choose AngularJS.Core by The AngularJS Team and install the latest version. Once it is installed you can see the new folder named Scripts inside our project. And if you expand it you can see the all angular js files required.

Step 5 of AngularJs 2.0 Hello World Example - Step By Step

Now right click on the project and add a new html file. Add the below code inside html file.

In the above code i have added reference to angular js. And i have the textbox where i will enter the name. That textbox value will be appended with the span text and displayed in the screen. For passing textbox value to span i am using{{}} angular expression.


Output:

Now if you run the program you can see the output of AngularJs 2.0 Hello World Example – Step By Step. Below is the sample screenshot.

Output of AngularJs 2.0 Hello World Example - Step By Step

Conclusion:

Hope you learned AngularJs 2.0 Hello World Example – Step By Step. Do you like this tutorial? Help us to improve. Please post your comments and feedback below.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!