How To Implement AngularJS In ASP.NET MVC

AngularJs also has an inbuilt set of directives like ng-app, ng-Bind, and ng-Mode. These directives give a new behavior to HTML. The view in HTML can access this data model and display them. Directives bind the inner HTML to the specified model property. In the steps ahead we will be using the ng-directive to bind data from the model to the view on HTML controls. The second element is ASP.NET. ASP.NET is related and is a great platform to deliver HTML and JavaScript. Using AngularJs and ASP.NET for development one can have a great start with HTML and javascript without using dependent technology.

Starting to work with both is not that difficult and these two major steps are required:

1. First is to setup Angular JS in ASP.NET MVC

2. The data from the database needs to be fetched using AngularJs in the MVC application

Let us get into some details now

Directives bind the inner HTML to the specified model property. In the steps ahead we will be using the ng-directive to bind data from the model to the view on HTML controls. The second element is ASP.NET. ASP.NET is related and is a great platform to deliver HTML and JavaScript. Using AngularJs and ASP.NET for development one can have a great start with HTML and javascript without using dependent technology. Starting to work with both is not that difficult and these two major steps are required:

1. First is to setup Angular JS in ASP.NET MVC

2. The data from the database needs to be fetched using AngularJs in the MVC application

Let us get into some details now

1. The Angular JS Setup

The following steps should be taken to achieve the setup:

1. Create A New ASP.NET MVC Project

This project should be completely empty without any bare default codes. This point is important to start this project from the very start.

2. Download And Install The AngularJs Library.

3. Add This AngularJs Library To Your Project

There are two options available to add AngularJs library. The one is adding bundles to add AngularJs library and the other is adding AngularJs in the Script section. The drawback with adding in script section is that the added AngularJs cannot be used in the entire application. So, we will go ahead with the bundle addition.

4. Add Bundles To Render AngularJs Files

Simply open the BundleConfig.cs file and add bundle. Add the bundle in the code as below:

bundles.Add(newScriptBundle("~/bundles/angular").Include(

5. Modify the _layout CS.html Page To Support AngularJs.

Change the following lines of codes:

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/angular")

6. Add A Controller In The Controller Folder

Controllers are important as they contain methods and variables to make our front-end business logic work.

7. Add New Action In The Controller To Get View. Your Can Have The Following Additions In Your Code:

publicActionResultIndex()
{
returnView();
}

8. Define Ng Controller

Ng-controller defines the controller which is in charge of the view. Add the lines: Here, ng-controller is defined as HomeController

9. Run The Application

You have successfully setup AngularJs in ASP.NET MVC application
2. Fetch Data from the database

1. Add A Database

Select a SQL server database and give it a name

2. Create A Table

A table for example is given below
Details Data Type Default
Name varchar(100)
Contact int
Email Id varchar(200)
Address varchar(300)

3. Add Entity Data Model

Select the table and other entities that will be kept as part of the model

4. Again, Create A Controller

5. Add New Action Into It To Fetch Data From Database And Return As Result In Json Following Can Be The Code Added To Fetch The Last Address:

publicclassDataController:Controller
{
publicJsonResultGetLastAddress()
{
Contact c =null;
using(MyDatabaseEntities dc =newMyDatabaseEntities())
{
c =dc.Address.OrderByDescending(a =>a.AddressID).Take(1).FirstOrDefault();
}
returnnewJsonResult{Data= c,JsonRequestBehavior=
JsonRequestBehavior.AllowGet};
}

6. Add A New JS File To Add AngularJs Controller And A Factory.

The following lines of codes can be added:
$scope.Address=null;
AddressService.GetLastAddress().then(function(d) {
$scope.Address=d.data;
},function(){
alert('Failed');// Failed
});
.factory('AddressService',function($http){
varfac={};
fac.GetLastAddress=function(){
return $http.get('/Data/GetLastAddress');
}
returnfac;

7. Add New Action Is Controller To Show Data From Database.

The code can be:
publicActionResultPart2()
{
returnView();
}

8. Add The View For The Action And Run The Application

Finally, the Data is fetched from the database using Angular Jason.
Finally, the implementation of AngularJs with ASP.NET MVC is complete. Using ASP.NET and AngularJs together is one of the best options for web development. Both the technologies benefit each other and coexist.AngularJs very well supports the MVC style for application design.AngularJs looks after routing between pages in the front end and MVC architecture looks after the pages served. It may take time to get accustomed to MVC but it is worth.

About Author

ManekTech Team

ManekTech is a well-known software development and IT consulting company, providing custom software, website, and mobile app development services. ManekTech has own content writing and development team who writes content on various and trending technology that it serves currently.