AngularJS With ASP.NET MVC

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.