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 a SQL Server database and give it a name.

2.2 Create a Table

Example structure:

2.3. Add Entity Data Model

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

2. 4. Create a Controller Again

2.5. Add a New Action to Fetch Data from the Database and Return JSON

Following can be the code added to fetch the last address:

public class DataController : Controller

{

public JsonResult GetLastAddress()

{

Contact c = null;

using(MyDatabaseEntities dc = new MyDatabaseEntities())

{

c = dc.Address.OrderByDescending(a => a.AddressID).Take(1).FirstOrDefault();

}

return new JsonResult { Data = c, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

}

2.6. Add a New JS File to Add AngularJS Controller and Factory

Sample code:

$scope.Address = null;

AddressService.GetLastAddress().then(function(d) {

$scope.Address = d.data;

}, function() {

alert('Failed'); // Failed

});

.factory('AddressService', function($http) {

var fac = {};

fac.GetLastAddress = function() {

return $http.get('/Data/GetLastAddress');

}

return fac;

});

2.7. Add a New Action in Controller to Show Data from Database

Sample code:

public ActionResult Part2()

{

return View();

}

2.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 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.