AngularJS With ASP.NET MVC

Mukesh Kumar

17 Comments

Join the conversation! Your thoughts help the community grow.

Damor Raju9y ago
Very nice working......................................................................
Anant Anand Gupta9y ago
There are a lot of articles on the web, trying to explain the same concept. This one is one of many, I liked. It is a nice article ... thanks. I was researching on the topic when I came around to your post, as I am also trying to create a similar post in more details on my technical blog. For the readers, in case they want to continue reading the same concept in more details, I would like to invite you to read it here http://www.anantanandgupta.net/2017/01/27/angularjs-with-asp-net-mvc-part-1/
Jaygovind Chauhan10y ago
Thnkz its working...............................................................
Esmaeel Haddadian10y ago
In file route.config in folder app_start wirte : defaults: new { controller = "EmployeeController", action = "getallemployee", id = UrlParameter.Optional }
Manav Pandya10y ago
Great sir ...
Munesh Sharma10y ago
good one
Syed Furquan10y ago
Nice Article
Ravi Kumar10y ago
Nice One
Aishwarya D11y ago
Nice share
Akash Malhotra11y ago
Nice Article
Harshad Pansuriya11y ago
Nice one
Ajay Gandhi11y ago
Helpful
Santhakumar Munuswamy11y ago
Good one
Manas Mohapatra11y ago
Good introduction: Angular JS with MVC
Nikhil Shirdhankar11y ago
Nice
Rupali Shinde11y ago
nice share
Raja T11y ago
Nice,Thanks for sharing

AngularJS is a JavaScript framework to create SPA (Single Page Application). It is a client side MV* (MVC+MVVM=MV*) framework. AngularJS extends HTML by providing Directives that add functionality to your markup and that allow you to create powerful dynamic templates for application.

The following are some AngularJS directives which I have used in sample application.

ng-app: It is entry point of AngularJS to the page. It shows that the application is AngularJS app.
ng-controller: It is directive to define the controller. It attaches a controller class to the view.
ng-repeat: It creates loop in your page like foreach loop.
angular.module: It is use to create, register and retrieve all angular module.
$http: It is an XMLHttpRequest object for requesting external data.
$http.get: It read the json data. It takes two parameter url and config but config is optional.

In this article I am going to show a basic example to use AngularJS. I will show you how to create a basic application in MVC 4 with AngularJS.

Step 1

Start Visual Studio 2013 or 2012.
Create a new project - Web, then click Visual Studio 2012.
Select ASP.NET MVC4 Web Application.
Provide the Name and Location for the project and click Next.
Choose Basic template as project template and click Ok.

Step 2

Create a DataBaseContext class inside Model folder for database factory (insert, update, delete or select the data in database). You can create database and table manually or if you use my approach it will create database and table automatically when you run the application first time because of I have used Code First approach here.

DatabaseContext.cs

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
namespace AngularJSWithMVC.Models
{
public class DatabaseContext: DbContext
{
public DatabaseContext(): base("DefaultConnection")
{}
public DbSet < EmployeeModel > EmployeeModels
{
get;
set;
}
}
}

Create another entity class EmployeeModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace AngularJSWithMVC.Models
{
public class EmployeeModel
{
[Key]
public int EmployeeId
{
get;
set;
}
public string EmployeeName
{
get;
set;
}
public string Address
{
get;
set;
}
public string EmailId
{
get;
set;
}
}
}

Web.Config connection string to access database.

<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(local);DataBase=demodb;user id=sa; password=xyz;" providerName="System.Data.SqlClient" />
</connectionStrings>

And now a controller to show the data on View,

using AngularJSWithMVC.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularJSWithMVC.Controllers
{
public class EmployeeController: Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetAllEmployee()
{
using(DatabaseContext db = new DatabaseContext())
{
var employeeList = db.EmployeeModels.ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
}
}

Step 3

Now time to setup AngularJS Module, Service and Controller. So, create a folder with name “AngularScripts” inside the Content folder for clean code.

AppModule.js

Inside AngularScripts folder create a AppModule.js file when you manage your module setting and give it a name as I have given “AngularApp”.

var app = angular.module("AngularApp", []);

Service.js

Create another javascript file “Service.js” for fetching the data from database and provide it to controller. You have to provide a name of the service like “EmployeeService”. Here I am getting the json data from database using GetAllEmployee which will return JsonResult from the EmployeeController.

app.service("EmployeeService", function($http)
{
this.getEmployee = function()
{
debugger;
return $http.get("/employee/getallemployee");
};
});

Controller.js

You have to create another javascript file to “Controller.js” which will use to show the data on View. Here also you have to provide a unique name for the controller as I have used “EmpCtrl”.

app.controller("EmpCtrl", function($scope, EmployeeService)
{
GetAllEmployee();
function GetAllEmployee()
{
debugger;
var getAllEmployee = EmployeeService.getEmployee();
getAllEmployee.then(function(emp)
{
$scope.employees = emp.data;
}, function()
{
alert('Data not found');
});
}
});

Step 4

Now time to show the data on View but before that I have to setup AngularJS component and setting on Layout file. Like add all js component which I have created before Service.js, Controller.js etc. Below you can see firstly, all I have used ng-app that denote that It is an angular app and you have to provide the name of app which is already defined in “AngularApp.js”.

I have also used CDN file to use angular feature.

Layout.cshtml

<!DOCTYPE html>
<html ng-app="AngularApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="~/Content/AngularScripts/AppModule.js"></script>
<script src="~/Content/AngularScripts/Service.js"></script>
<script src="~/Content/AngularScripts/Controller.js"></script> @Styles.Render("~/Content/css") </head>
<body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body>
</html>

Create a view for EmployeeController’s Index method and add the following code,

Index.cs

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}<div ng-controller="EmpCtrl">
<div>
<h2 align="center">Angular JS Basic Example</h2>
<h5 align="center">Employee List</h5>
<table border="1" cellpadding="10" align="center">
<tr>
<td>
Employee Id
</td>
<td>
Employee Name
</td>
<td>
Address
</td>
<td>
Email Id
</td>
</tr>
<tr ng-repeat="emp in employees">
<td>
{{emp.EmployteeId}}
</td>
<td>
{{emp.EmployeeName}}
</td>
<td>
{{emp.Address}}
</td>
<td>
{{emp.EmailId}}
</td>
</tr>
</table>
</div>
</div>

Thanks for reading this article, hope you enjoyed it.