How To Implement AngularJS In ASP.NET MVC

Introduction to Using AngularJS Directives with ASP.NET for Web Development

AngularJS also has an inbuilt set of directives like ng-app, ng-Bind, and ng-Mode. These directives give a new behaviour to HTML. The view in HTML can access this data model and display it. 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 web development services, one can have a great start with HTML and JavaScript without using dependent technology.

Step by Step: How to Set Up AngularJS with ASP.NET MVC?

Starting to work AngularJS with ASP.NET MVC for web development is not that difficult and these two major steps are required:

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

Step 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

Step-by-Step Guide

Let us get into some details now.

1. AngularJS Setup

The following steps should be taken to achieve the setup:

1.1 Create a New ASP.NET MVC Project

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

1.2. Download and Install the AngularJS Library

1.3. Add the AngularJS Library to Your Project

There are two options available to add the AngularJS library:

• Adding bundles
• Adding AngularJS in the Script section

The drawback of adding it in the script section is that the added AngularJS cannot be used in the entire application. So, we will go ahead with the bundle addition.

1. 4. Add Bundles to Render AngularJS Files

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

bundles.Add(new ScriptBundle("~/bundles/angular").Include(

1. 5. Modify the _Layout.cshtml Page to Support AngularJS

Change the following lines of code:

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

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

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

1.6. Add a Controller in the Controllers Folder

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

1.7. Add a New Action in the Controller to Get View

You can have the following code added:

public ActionResult Index()

{

return View();

}

1. 8. Define ng-controller

ng-controller defines the controller that is in charge of the view.

Add the lines:
Here, ng-controller is defined as HomeController.

1.9. Run the Application

You have successfully set up AngularJS in the ASP.NET MVC application.

2. Fetch Data from the Database

2.1 Add a Database

• Select SQL Server as the database type.

• Provide a suitable database name.

• Click OK to create the database.

2.2 Create a Table

Create a table with the following structure:

2.3 Add Entity Data Model

• Right-click the project.

• Select Add → New Item → ADO.NET Entity Data Model.

• Choose EF Designer from Database.

• Select the created table and required entities.

• Finish the wizard to generate the model.

2.4 Create a Controller

• Right-click the Controllers folder.

• Select Add → Controller.

• Choose MVC Controller – Empty.

• Name it DataController.

2.5 Add an Action to Fetch Data from the Database and Return JSON

Below is the code to fetch the latest address record:

public class DataController : Controller
{
public JsonResult GetLastAddress()
{
Contact c = null;

using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
c = dc.Addresses
.OrderByDescending(a => a.AddressID)
.FirstOrDefault();
}

return Json(c, JsonRequestBehavior.AllowGet);
}
}

2.6 Add a JavaScript File for AngularJS Controller and Factory

Create a new .js file and add the following code:

$scope.Address = null;

AddressService.GetLastAddress().then(function (d) {
$scope.Address = d.data;
}, function () {
alert('Failed');
});

app.factory('AddressService', function ($http) {
var fac = {};

fac.GetLastAddress = function () {
return $http.get('/Data/GetLastAddress');
};

return fac;
});

2.7 Add a New Action to Display Data

Add the following action method in the controller:

2.8 Add the View and Run the Application

• Right-click the Part2 action.

• Select Add View.

• Design the view to bind AngularJS data.

• Run the application and verify the data is fetched from the database.

If you want, I can also:

• Convert this into a blog/tutorial format

• Fix naming conventions (e.g., Address vs Addresses)

• Add AngularJS HTML binding code

• Upgrade it to ASP.NET Core + Angular/React

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 services and companies like ManekTech rely on this combination to deliver scalable and high-performance applications. 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 it.