How to use AngualrJS in ASP.NET?

We know AngularJS is an open source JavaScript framework for creating single page web applications. It follows the Model View Controller (MVC) design pattern. We can use it in our ASP.NET application. This article describes how to creating application with Angular.JS and ASP.NET?

Before starting AngularJS we should have a basic understanding of:

• HTML
• CSS
• JavaScript

The following steps describes how to works with AngularJS in ASP.NET project:

Step1
At first we need to include a single file “angular.min.js” in our project. We can download it from the AngularJS web site.We can also add AngularJS to the current project with the help of “NuGet”. For that, right-click on the solution explorer and select “Manager NuGet Package”. It is also available on the tools menu. From the Nuget manager window search for AngularJS as shown below and install it to the current project.

Step2
Include its reference in our master page or required .aspx page.  Ii is better to include it in master page. Because then we can write AngularJS code in any page. Otherwise we must need to include the reference in every page.
<script src=”Scripts/angular.min.js” type=”text/javascript”></script>

We can also use AngularJS without downloading. For that we need to add the following code to the web page with a <script> tag.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"

Step3
AngualrJS has several directives which perform different tasks. At first write “ng-app” directive in a div. It initializes an AngularJS application. It is the root element of the application allowing behavior to be modified through custom HTML tags. Inside this div we can write any HTML/ASPX code.

<div ng-app="">
     
</div>

Step4
Add one TextBox and one Label inside this “ng-app” directive.

<div ng-app="">
    <asp:TextBox ID="TextBox1" runat="server" ng-model="name"></asp:TextBox>
    <br />    
    <asp:Label ID="Label1" runat="server" Text="Label" ng-bind="name"></asp:Label>
</div>

Lets explain the above code:

• The ng-app directive notifies AngularJS that the <div> element is the “owner” of an AngularJS application
• The ng-model directive binds the value of HTML controls to application data
• The ng-bind directive binds application data to the HTML view. We can see the value of data on runtime

Step5
Run the application. AngularJS starts automatically when the web page is loaded. Type any things in the Textbox. Its result will be displayed in the Label.

In this way we can use Angular.JS in ASP.NET application. That’s all about a sample example of Angular.JS and ASP.NET.