Click here to Skip to main content
11,706,323 members (45,940 online)
Click here to Skip to main content

Example Using Angularjs in ASP.NET Application

, 18 Mar 2014 CPOL 38.7K 3 13
Rate this:
Please Sign up or sign in to vote.
This tip shows how to create a Hello World example using Angularjs in an ASP.NET application

Introduction

This tip shows how to create a Hello World example using Angularjs in an ASP.NET application.

Angularjs works great on HTML, MVC and ASP.NET as well, it contains some important directives like np-model, np-bind, np-app, np-controller, all these will be explained with examples for them. Let's create a Simple Hello World Example that is the first step of learning any new technology, framework and so on.

Using the Code

Step 1

First of all, you need to add an external Angular.js file to your application. For this, you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file, you now need to add this file to the Head section of your application.

<head>
<script src="angular.min.js"></script>
</head>

Step 2

Now I will create a JavaScript function that will work for showing the Hello World.

Add this JavaScript function in the head section of your application.

<script>
function HelloWorld($scope) {
 $scope.test = 'World';
 }
</script>

Here, I had created a function named as "HelloWorld", in this HelloWorld "$scope" makes a connection between the function and the View, in other words, the Design part. "Test" is a variable that will be holding "World" as its default value.

Step 3

Now I will create a Div, TextBox and some Labels for showing the Hello World example.

<body>
<div ng-controller="HelloWorld">
 Your Name: <input type="text" ng-model="test"/>
<hr/>
 Hello {{test || "World"}}!
</div>
</body>

Here in the Div, you can see that a directive is used named "ng-controller" that consists of the name of the JavaScript function that was applied to a specific Div, Span and so on.

Then an input tag is used in which "ng-model" provides the Binding between the View and the Model. In ng-model, it has "test" that means the value entered in this TextBox will replace the default value provided in the JavaScript Function.

One more thing is to be done and that is to add "ng-app" in the HTML tag.

<html ng-app xmlns="http://www.w3.org/1999/xhtml">

ng-app declares that it is the AngularJS page, if you didn't add this directive in the HTML tag, then your application will not work properly because it will become unable to detect the other directives of Angular.

Now our Hello World application is ready to be executed.

The complete code of this application is as follows:

<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
function HelloWorld($scope) {
 $scope.test = 'World';
 }
</script>
</head> 
<body>
<div ng-controller="HelloWorld">
 Your Name: <input type="text" ng-model="test"/>
<hr/>
 Hello {{test || "World"}}!
</div>
</body>
</html> 

Points of Interest

We are using Two Way Binding for Angular Js and Scope Directive.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Viral Sarvaiya
Software Developer (Senior)
India India
I love to do challenging work

You may also be interested in...

Comments and Discussions

 
Questionwhere is ASP.NET , Wrost article Pin
dev46342-Dec-14 23:46
memberdev46342-Dec-14 23:46 
GeneralMy vote of 1 Pin
Member 948830715-Aug-14 9:58
memberMember 948830715-Aug-14 9:58 
GeneralMy vote of 1 Pin
Afazal MD 31042093-Jul-14 21:25
memberAfazal MD 31042093-Jul-14 21:25 
GeneralMy vote of 2 Pin
Cybermaxs3-Jun-14 9:29
memberCybermaxs3-Jun-14 9:29 
QuestionThis is good! Pin
Moonstrider16-May-14 12:39
memberMoonstrider16-May-14 12:39 
GeneralMy vote of 1 Pin
acroitoriu13-May-14 4:12
memberacroitoriu13-May-14 4:12 
GeneralMy vote of 1 Pin
GFoley8327-Apr-14 10:07
memberGFoley8327-Apr-14 10:07 
GeneralMy vote of 1 Pin
afueo19-Mar-14 22:20
memberafueo19-Mar-14 22:20 
GeneralMy vote of 2 Pin
HaBiX19-Mar-14 11:32
memberHaBiX19-Mar-14 11:32 
GeneralRe: My vote of 2 Pin
Viral Sarvaiya19-Mar-14 18:17
professionalViral Sarvaiya19-Mar-14 18:17 
GeneralRe: My vote of 2 Pin
HaBiX19-Mar-14 20:32
memberHaBiX19-Mar-14 20:32 
GeneralMy vote of 1 Pin
Dmitry A. Efimenko19-Mar-14 8:10
memberDmitry A. Efimenko19-Mar-14 8:10 
GeneralMy vote of 3 Pin
Prakash Kalakoti18-Mar-14 21:56
memberPrakash Kalakoti18-Mar-14 21:56 
GeneralRe: My vote of 3 Pin
Sandeep Singh Shekhawat19-Mar-14 3:21
professionalSandeep Singh Shekhawat19-Mar-14 3:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 18 Mar 2014
Article Copyright 2014 by Viral Sarvaiya
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid