AngularJS MVC Repository

Demo Link: http://technical.cosmicverse.info/employee.

It is a simplest tutorial on AngularJS and Repository Pattern for developing professional MVC Applications. It includes a source code about practical permission management project.



Introduction

The aim of this article is to clear AngularJS technology and Repository which is one of the useful design pattern in order to developing web applications easy and more professional. There are some fundamental difficulties with the Jquery such as sticking among unstructured code or tangling in deadlocks but AngularJS is able to solve some barriers in Jquery. AngularJS is enough power, specially for CRUD (Create, Read, Update and Delete) web applications, it follows MVC pattern, so our code is neat and clear. Besides it enables us to write less code and testing code has better condition in AngularJS. Albeit these factors do not diminish JQuery power for writing rest of other types of application such as Game or etc.

The other major in this article is to explain repository pattern which encapsulates data access layer and draw a separate line between actual database and other parts of data access layer. It has some advantages for developers for examples; it makes changing and updating data context more convenient and testing frameworks do not run for physical data access code, so this isolation makes it more flexible.

Last but not least is how to debug scripts in web browser for beginners.

I will describe more about each of sections widely, I will open these technologies and pattern within real project in order to having a clear concept from them.

Background

What is Repository

Repository is one of the useful design pattern which hides physical data from the rest of the other sections of data access layers. professionally speaking Repository give us an instruction to how encapsulates our data context from other database queries and data access logic. It is such as a line which isolates actual database from other parts, eventually it makes our web application more convenient to test it layer by layer. Moreover it supplies an in memory like collection List vs IEnumerable vs IQueryable vs ICollection vs IDictionary for accessing domain objects which ignore persistence and enhance performance. So we prefer to use repository in MVC application to have test ability and speed with the flexibility to future changing.



We have two choices for repository structure. One is building one Repository class and IRepository interface for each entity and another way is creating one GenericRepository class for all of entities and defining basic CRUD (Create, Read, Update, Delete) operations and one UnitOfWork class so that all of repository for each entity should be built on UnitOfWork class. Definitely second way is approved when having too much entities.

As we make for each entity one controller in MVC as a “XController”. We create a folder and name it GenericRepository and make one class “GenericRepository.cs”. Class “GenericRepository.cs” has CRUD functions deal with data context and then create a folder and name it "UnitOfWork" and make one class “UnitOfWork.cs”. you should write inside "UnitOfWork.cs" list of repositories for each entities and moreover "Save()" and "Dispose()" methods. Controllers just have access to UnitOfWork. Therefore you separated your business layer from data layer and whenever you want to change your policy and prefer to use another ORM such as NHibernate you will not have any trouble with high layer such as business layer.

Why Repository with Entity Framework:

It is good question that if we use Entity Framework so why we need to establish another repository above Data Context. Because Data Context is repository itself. Image one day you want to use in Data Access Layer another approaches such as NHibernate, ADO.NET or even XML files or suppose you have to change database from sql to oracle, so your trouble is very small and you have to change just a bit in your code instead of changing almost the whole of your structure and write it again. Therefore Repository Pattern enables us to decouple layers properly and comes in handy when we will change our section specially data layer in future. On the other hand testing will be easily.



What is AngularJS

AngularJS is a JavaScript framework for organizing HTML code in a more structural, clear and succinct mode. This client-side technology provides easy and light code in order to make developing and even designing as a simple task. AngularJS eliminates most of redundant code specially in CRUD web application. It is a MV(Whatever you like) pattern and not just a MVC.

There are two kinds of accessories which help us to make a bridge between user interface and the core of business and data layer.

• Library: These types are set of functions such as JQuery and whenever you use some of them ($.ajax) it will call related function to handle functions.
  
  
• Frameworks: These types are specific structure for implementation application and developer have to follow these structure. Such as durandal and ember.

AngularJS has different approach to work out our needs, angular embeds new properties inside HTML tags such as “ng-model”, “ng-repeat” which are known as Directives in order to fade our barriers to match and transform data.
On the other hand AngularJS has mingled Ajax and HTML DOM in a good structure which I will describe it more as follow:

Angular Advantages:

1. It is very good for CRUD web application.
   
   
2. It makes testing easy in CRUD web application.
   
   
3. You need to write less code.
   
   
4. You can run your code more quickly.
   
   
5. One of the most popular and famous features in the AngularJS is two way and simple binding.
   

   <input type="text" ng-model="simpleBinding" /><span>{{simpleBinding}}</span>

6. You do not need to modify HTML DOM.
   
   
7. By the aid of directives your tasks are more easy and time saving.
   
   
8. By its architecture in MVC or in the better word MVW, decoupling is real and excellent.

Design Guidance

As you see in the above picture, you should download angular files and put jquery and angular js files inside script folder. Inside Module.js write name for angular app such as "MyApp" this name relates your angular file to each other and you should use it inside html tag for your view, in this scenario I have used "_Layout.cshtml" as my master view (according to MVC Pattern), in this html tag you should write a directive angular ng-app='MyApp' which hold angular files.

Then you have to introduce these file into your view by <script src=?>.

Index.cshtml inherits from _Layout.cshtml, now by adding another directive as ng-controller='angularCtrl' inside a div, you make a relation between your view and controller.js because angularCtrl is name of Controller.js.

You just need to use simple html tag such as <input type='text'> and add ng-model='empid' directive to this input tag and whenever you want to refer to this input (set or get data) from Controller.js, call it by $Scope.empid.

This same story repeat for <input type='button'> and add ng-click='add()' directive to this input tag and whenever you want to refer to this input (set or get data) from Controller.js call it by $Scope.add().

For representing data inside table in angular you can use simple table tag by the aid of ng-repeat="employee in employees" now whenever you want to (set or get data) from Controller.js you just need to use: $Scope.employees and use expressions such as {{employee.ID}} or {{employee.FirstName}} or other fields.

<table>
   <tr ng-repeat="employee in employees">
      <td>
         {{employee.ID}}
      </td>
   </tr>
</table>

If you want to write function inside controller.js you should call ServiceName.FunctionName such as angularservice.getEmp(), "angularservice" is the name of Service.js. Now in the "Service.js" you can continue function { "getEmp()" } with $http.get("/ControllerName/ActionName"), or for adding function which you use pass data from view to controller use:

Inside Controller.js to pass data to service.

var Employee = {
   FirstName: $scope.FirstName ,
   LastName: $scope.LastName ,
   UserName: $scope.UserName
};

angularService.Add(Employee)

Inside Service.js to pass data to EmployeeController.cs.

this.Add = function (employee) {
   var response = $http({
      method: "post",
      url: "/Employee/Add",
      data: JSON.stringify(employee),
      dataType: "json"

   });
   return response;
}

Angularjs vs Jquery

Barriers in the Jquery and Solution in AngularJS:

 

1. Jquery Problem: If you want to use multiple entities you are not allowed to use multiple model in one view, therefore you have to write viewmodel to support it.
   
   
2. AngularJS Solution: You can handle it by using $Scope object. This tiny and awesome object can supply data and do changes.
   
   
3. Jquery Problem: You have problem to use foreach loop if you are going to use viewmodel, of that you have to use for loop.
   
   
4. AngularJS Solution: You can solve it by using ng-repeat directive inside table {tr tag}.
   
   
5. Jquery Problem: You should manipulate on HTM DOM and customized your requirement according to your model architecture and writing something like that: Html.EditorFor(model => model.ArticleTitle).
   
   
6. AngularJS Solution: But by the aid of AngularJS you can use <input> and just by adding specific directives, you will reach your goal.

How to arrange AngularJS Files:


Dispose Pattern

In order to know Dispose pattern, it is necessary to know Garbage Collection.

Garbage Collection

When you create object from data type Common Language Runtime (CRL) assigns specific space inside memory for your new object, in this process Managed Heap helps to CLR to allocate object to memory. Memory space is finite and it is not possible that many objects as consumers use resources. Indeed we need a tool to release memory from objects which do not use memory for long time and they were not called by applications for a while. Garbage Collector is proper tool to manage memory and release space from old and useless objects.

IDisposable is an interface to release resources for particular reclaiming resources whose their life time is well known for programmer. Its advantages are high speed allocation service without long term fragmentation problems.

In the below picture you see three stages, first one objects with these names "A", "B", "C" has taken resources as it is obvious "A" and "B" are dead whereas "C" is live, on the other hand our new objects "D", "E" and "F" are in the queue to use resources. Suppose if there is no tools to stop and release memory or resources so we other objects must wait long in the queue and the performance comes down. Garbage Collection comes here to help us and gather "A" and "B" and takes them from resource due to they are old and no application uses them in long term. So in second stage we have more free space and "D", "E" and "F" will come in third stage. Dispose method or in a better word "Dispose Pattern" helps us to have more performance. Especially when we know life time of the resource (context).

class X : IDisposable
    {

        //Define Flag: Show us if dispose has been called or not
        bool disposed = false;

        // Public implementation of Dispose pattern callable by consumers.
        public void Dispose()
        {
            Dispose(true);
            //Using SuppressFinalize helps us to do not finalize object later
            GC.SuppressFinalize(this);
        }


        // Protected implementation of Dispose pattern and allow to override it later
        protected virtual void Dispose(bool disposing)
        {
            if (disposed)
                return;

            if (disposing)
            {
                //Free any other managed objects here.
                context.Dispose();
            }

            // Free any unmanaged objects here.
            disposed = true;
        }


        ~X()
        {
            // release resources
            Dispose(false);

        }
    };


    //Calling dispose inside Controller:
    protected override void Dispose(bool disposing)
    {
        X.Dispose();
        base.Dispose(disposing);
    }

How to install AngularJS

 

• Go to -> Tools Menu -> Library Package Manager -> Package Manager Console.
  
  
• Write in commanc line: Install-Package angularjs -Version 1.3.8.
  
  
• Be careful about varient angular version due to it might need a bit different code style.

Using the code

Scenario:

I want to follow permission management scenario to explain better these concepts (AngularJS and Repository in MVC). It includes two pages, first on just do CRUD functions, creating employees, reading or selecting employees, updating and deleting their information, besides them it mentions to other facilities in Angular such as routing, filtering. Second page assigns permission for each of employees, here you need to have combo box to keep employees name and permission roles. Therefore it covers fundamental requirements in dealing with have a robust MVC web application.

1. Employee CRUD (Create Read Update Delete): This page shows data and user can edit and delete or add new employee to it.



2. AngularJS is able to filter data:



3. When user clicks on "Edit" button -> "Update Employee" section appears.



4. When user clicks on "Add" button -> "Add Employee" section appears. Finally by clicking on "Permission" link, angular leads you to permission page by routing facility.



5. User can assign permission to specific employee by selecting his or her name from combobox.



6. Loading Data inside combobox.



Step By Step Using Repository and AngularJS in your MVC Project (Instruction as Cookbook):

Create Database and name it "MVCAdvanced".
Create two Tables: "Employee" and "EmpRole".
Create New MVC Project for have more information see here.
Create New Data Model for have more information see here.
Create New Folder in Solution and name it "GenericRepository".
Create "GenericRepository.cs" Class. using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Linq.Expressions;

namespace MvcAdvanced.GenericRepository
{
    public class GenericRepository<TEntity> where TEntity : class
    {
        internal MvcAdvancedEntities context;
        internal DbSet<TEntity> dbSet;

        public GenericRepository(MvcAdvancedEntities context)
        {
            this.context = context;
            this.dbSet = context.Set<TEntity>();
        }

        public virtual IEnumerable<TEntity> Get()
        {
            IQueryable<TEntity> query = dbSet;
            return query.ToList();
        }

        public virtual TEntity GetByID(object id)
        {
            return dbSet.Find(id);
        }

        public virtual void Insert(TEntity entity)
        {
            dbSet.Add(entity);
        }

        public virtual void Delete(object id)
        {
            TEntity entityToDelete = dbSet.Find(id);
            Delete(entityToDelete);
        }

        public virtual void Delete(TEntity entityToDelete)
        {
            if (context.Entry(entityToDelete).State == EntityState.Detached)
            {
                dbSet.Attach(entityToDelete);
            }
            dbSet.Remove(entityToDelete);
        }

        public virtual void Update(TEntity entityToUpdate)
        {
            dbSet.Attach(entityToUpdate);
            context.Entry(entityToUpdate).State = EntityState.Modified;
        }

    }

}
Create "UnitOfWork" Folder and Create a class "UnitOfWork.cs". using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcAdvanced.GenericRepository;

namespace MvcAdvanced.UnitOfWork
{
    public class UnitOfWork : IDisposable
    {
        private MvcAdvancedEntities context = new MvcAdvancedEntities();

        private GenericRepository<Employee> employeeRepository;
        private GenericRepository<EmpRole> empRoleRepository;

        public GenericRepository<Employee> EmployeeRepository
        {
            get
            {
                if (this.employeeRepository == null)
                    this.employeeRepository = new GenericRepository<Employee>(context);
                return employeeRepository;
            }
        }

        public GenericRepository<EmpRole> EmpRoleRepository
        {
            get
            {
                if (this.empRoleRepository == null)
                    this.empRoleRepository = new GenericRepository<EmpRole>(context);
                return empRoleRepository;
            }
        }

        public void Save()
        {
            context.SaveChanges();
        }

        private bool disposed = false;
        protected virtual void Dispose(bool disposing)
        {
            if (disposed)
            return;

            if (disposing)
            {
                //Free any other managed objects here.
                context.Dispose();
            }

            // Free any unmanaged objects here.
            disposed = true;
        }
        public void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }

    }
}
Create "EmployeeController" inside "Controller" Folder. using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAdvanced.GenericRepository;
using AutoMapper;

namespace MvcAdvanced.Controllers
{
    public class EmployeeController : Controller
    {
        private UnitOfWork.UnitOfWork unitOfWork = new UnitOfWork.UnitOfWork();

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetAllEmployees()
        {
            var employeeList = (List<Employee>)unitOfWork.EmployeeRepository.Get();
            return Json(employeeList, JsonRequestBehavior.AllowGet);
        }

        public string Update(Employee employee)
        {
            if (employee != null)
            {
                var emp = unitOfWork.EmployeeRepository.GetByID(employee.ID);
                emp.FirstName = employee.FirstName;
                emp.LastName = employee.LastName;
                emp.UserName = employee.UserName;

                unitOfWork.EmployeeRepository.Update(emp);
                unitOfWork.Save();

               return "Record has been Updated";

            }
            else
            {
                return "Record has Not been Updated";
            }
        }

        public string Delete(int id)
        {
            try
            {
                if (id != null)
                {
                    unitOfWork.EmployeeRepository.Delete(id);
                    unitOfWork.Save();

                    return "Employee Has Been Deleted";
                }
                else
                {
                    return "Employee Hasnot Been Deleted";
                }
            }
            catch
            {
                return "Employee Hasnot Been Deleted";
            }
        }

        public string Add(Employee employee)
        {
            try
            {
                if (employee != null)
                {
                    unitOfWork.EmployeeRepository.Insert(employee);
                    unitOfWork.Save();
                    return "Record has been Added";
                }
                else
                {
                    return "Record has Not been Verified";
                }
            }

            catch
            {
                return "Record has Not been Added";
            }
        }

        protected override void Dispose(bool disposing)
        {
            unitOfWork.Dispose();
            base.Dispose(disposing);
        }

    }
}
Create "PermissionController" inside "Controller" Class.using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAdvanced.GenericRepository;

namespace MvcAdvanced.Controllers
{
    public class PermissionController : Controller
    {
        private UnitOfWork.UnitOfWork unitOfWork = new UnitOfWork.UnitOfWork();

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetAllEmpRole()
        {
            var employeeList = unitOfWork.EmpRoleRepository.Get();
            return Json(employeeList, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetAllEmpNames()
        {
            var employeeList = unitOfWork.EmployeeRepository.Get();
            return Json(employeeList, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetAllRoles()
        {
            var roleList = (from emp in unitOfWork.EmployeeRepository.Get() join role in unitOfWork.EmpRoleRepository.Get() on emp.RoleID equals role.ID select new { emp.ID, emp.FirstName, emp.LastName, emp.UserName, role.Role }).ToList();
            return Json(roleList, JsonRequestBehavior.AllowGet);
        }

        public string UpdateRole(Employee permission)
        {

            if (permission != null)
            {
                var emp = unitOfWork.EmployeeRepository.GetByID(permission.ID);
                emp.RoleID = permission.RoleID;

                unitOfWork.EmployeeRepository.Update(emp);
                unitOfWork.Save();

                return "Record has been Updated";
            }
            else
            {
                return "Record has Not been Updated";
            }
        }

        protected override void Dispose(bool disposing)
        {
            unitOfWork.Dispose();
            base.Dispose(disposing);
        }

    }
}
Downloading angularjs from. I have used angularjs version 1.3.8. Something (code style) might be changed version by version. Put angular.js and angular-route.js inside "Scripts" folder.
Create Angular Files:. In the "Content" folder make new folder and name it "Angular", then create three javascript files inside it and name them: { Module.js, Controller.js, Service.js }.
Inside Module.js write: var app = angular.module('MyApp', ['ngRoute']);

app.config(['$routeProvider',function ($routeprovider) {
      $routeprovider.
        when('/employee', {
            templateurl: '/Views/Employee/index.cshtml',
            controller: 'AngularCtrl'
        }).
        when('/permission', {
            templateurl: '/Views/Permission/index.cshtml',
            controller: 'AngularCtrlRole'
        }).
        otherwise({
            redirectto: '/employee'
        });
  }]);
Inside Views -> Shared -> _Layout.cshtml write: (you are introducing your application name "MyApp" to your view by adding ng-app). <!DOCTYPE html>
<html ng-app='MyApp'>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
   <script src="~/Scripts/angular.js"></script>
     <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
  <script src="~/Content/Angular/Module.js"></script>
    <script src="~/Content/Angular/Service.js"></script>
    <script src="~/Content/Angular/Controller.js"></script>

    @Styles.Render("~/Content/css")

</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>
Inside Views -> Employee -> Index.cshtml write: @{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div ng-controller="AngularCtrl">
    <a href="/permission">Permission</a><br />

  Filter: <input type="text" value="Name" ng-model="FilterByFirstName" />
  <br />


    <br />
     <input type="button" value="Add" ng-click="add()" />
        <table cellpadding="12">
            <tr>
                <td><b>ID</b></td>
                <td><b>FirstName</b></td>
                <td><b>LastName</b></td>
                <td><b>UserName</b></td>
                <td><b>Operation</b></td>
            </tr>
            <tr ng-repeat="employee in employees | filter:FilterByFirstName ">

                <td>
                    {{employee.ID}}
                </td>
                <td>
                    {{employee.FirstName}}
                </td>
                <td>
                    {{employee.LastName}}
                </td>
                <td>
                    {{employee.UserName}}
                </td>
               <td>
                     <input type="button" value="Edit" ng-click="edit(employee)" />
                     <input type="button" value="Delete" ng-click="delete(employee)" />

                </td>

            </tr>

        </table>
     <div ng-show="divEmpModification">
        <p>{{Operation}} Employee</p>
        <table>
            <tr>

                <td>
                    <input type="text" style="width:20px;"  disabled="disabled" ng-model="ID" />
                </td>


                <td>
                    <input type="text" style="width:94px;" ng-model="FirstName" />
                </td>


                <td>
                    <input type="text" style="width:94px;" ng-model="LastName" />
                </td>


                <td>
                    <input type="text" style="width:94px;" ng-model="UserName" />
                </td>

                <td colspan="2">
                    <input type="button"  value="Save" ng-click="Save()" />
                </td>
            </tr>
        </table>
    </div>

    </div>
Inside Views -> Permission -> Index.cshtml write:<h2>Index</h2>
<div ng-controller="AngularCtrlRole">
     <a href="/employee">Employee</a>
    <p ng-model="mahsa"> ID of selected LastName is : {{selectedItem.ID}} </p>

        <select data-ng-Model="selectedItem" ng-options="item.LastName for item in items">
      </select>

    <p> ID of selected Role is : {{selectedItemRole.ID}} </p>

     <select ng-model="selectedItemRole" ng-options="roleitem.Role for roleitem in roleitems">
      </select>

     <input type="button" value="Save Permission" ng-click="SavePermission()" />


        <table cellpadding="12">
            <tr>
                <td><b>ID</b></td>
                <td><b>First Name</b></td>
                <td><b>Last Name</b></td>
                <td><b>User Name</b></td>
                <td><b>Role Name</b></td>
            </tr>
            <tr ng-repeat="view in views ">

                <td>
                    {{view.ID}}
                </td>
                <td>
                    {{view.FirstName}}
                </td>
                <td>
                    {{view.LastName}}
                </td>
                <td>
                    {{view.UserName}}
                </td>
                <td>
                    {{view.Role}}
                </td>


            </tr>

      </table>


 </div>
Inside Content -> Angular -> Controller.js write:app.controller("AngularCtrl", function ($scope, angularService) {
    $scope.divEmpModification = false;
    GetAll();
    //To Get All Records
    function GetAll() {
        var Data = angularService.getEmp();
            Data.then(function (emp) {
            $scope.employees = emp.data;
        }, function () {
            alert('Error');
        });
    }

    $scope.edit = function (employee) {

            $scope.ID = employee.ID;
            $scope.FirstName = employee.FirstName;
            $scope.LastName = employee.LastName;
            $scope.UserName = employee.UserName;
            $scope.Password = employee.Password;
            $scope.Operation = "Update";
            $scope.divEmpModification = true;
    }

    $scope.add = function () {

        $scope.ID ="";
        $scope.FirstName = "";
        $scope.LastName = "";
        $scope.UserName = "";
        $scope.Password = "";
        $scope.Operation = "Add";
        $scope.divEmpModification = true;
    }

    $scope.Save = function () {
        var Employee = {
            FirstName: $scope.FirstName ,
            LastName: $scope.LastName ,
            UserName: $scope.UserName,
            Password: $scope.Password
        };
        var Operation = $scope.Operation;

        if (Operation == "Update") {
            Employee.ID = $scope.ID;
            var getMSG = angularService.update(Employee);
            getMSG.then(function (messagefromController) {
                GetAll();
                alert(messagefromController.data);
                $scope.divEmpModification = false;
            }, function () {
                alert('Update Error');
            });
        }
        else {
            var getMSG = angularService.Add(Employee);
            getMSG.then(function (messagefromController) {
                GetAll();
                alert(messagefromController.data);
                $scope.divEmpModification = false;
            }, function () {
                alert('Insert Error');
            });
        }
    }

    $scope.delete = function (employee) {
        var getMSG = angularService.Delete(employee.ID);
        getMSG.then(function (messagefromController) {
            GetAll();
            alert(messagefromController.data);
        }, function () {
            alert('Delete Error');
        });
    }
});

app.controller("AngularCtrlRole", function ($scope, angularServiceRole) {
    GetAllNames();
    GetAllRoles();
    GetAllEmpRole();
    //To Get All Records
    function GetAllEmpRole() {
        var Data = angularServiceRole.getEmpRole();
        Data.then(function (emp) {
            $scope.views = emp.data;
        }, function () {
            alert('Error');
        });
    }

    //To Get All Records
    function GetAllNames() {
        var Data = angularServiceRole.getName();
        Data.then(function (emp) {
            $scope.items = emp.data;
        }, function () {
            alert('Error');
        });
    }

    function GetAllRoles() {
        var Data = angularServiceRole.getRole();
        Data.then(function (role) {
            $scope.roleitems = role.data;
        }, function () {
            alert('Error');
        });
    }

    $scope.SavePermission = function () {
        var Permission = {
            ID: $scope.selectedItem.ID,
            RoleID: $scope.selectedItemRole.ID
         };

        var getMSG = angularServiceRole.updateRole(Permission);
            getMSG.then(function (messagefromController) {
                GetAllNames();
                GetAllRoles();
                GetAllEmpRole();
                alert(messagefromController.data);
              }, function () {
                alert('Save Permission Error');
            });


    }

});
Inside Service.js write:app.service("angularService", function ($http) {

        this.getEmp = function () {
            return $http.get("/Employee/GetAllEmployees");
        };



    //Save (Update)
        this.update = function (employee) {
            var response = $http({
                method: "post",
                url: "/Employee/Update",
                data: JSON.stringify(employee),
                dataType: "json"
            });
            return response;
        }

    //Delete
        this.Delete = function (empID) {
            var response = $http({
                method: "post",
                url: "/Employee/Delete",
                params: {
                    id: empID
                }
            });
            return response;
        }

    //Add
        this.Add = function (employee) {
            var response = $http({
                method: "post",
                url: "/Employee/Add",
                data: JSON.stringify(employee),
                dataType: "json"

            });
            return response;
        }

});

app.service("angularServiceRole", function ($http) {
    this.getEmpRole = function () {
        return $http.get("/Permission/GetAllEmpRole");
    };

    this.getName = function () {
        return $http.get("/Permission/GetAllEmpNames");
    };
    this.getRole = function () {
        return $http.get("/Permission/GetAllRoles");
    };

    //Save Permission
    this.updateRole = function (permission) {
        var response = $http({
            method: "post",
            url: "/Permission/UpdateRole",
            data: JSON.stringify(permission),
            dataType: "json"
        });
        return response;
    }
});

References

• The Repository Pattern
• Using the Repository Pattern with ASP.NET MVC and Entity Framework
• What Is Angular?
• https://www.youtube.com/watch?v=i9MHigUZKEM&feature=youtu.be
• Learn AngularJs with MVC

History

• First Version: 1/26/2015
• Second Version: 1/29/2015 : Making one Repository for entities
• Third Version: 02/15/2015 : Repository Pattern with GenericRepository and UnitOfWork +Graph Explaination

Feedback

Feel free to leave any feedback on this article; it is a pleasure to see your comments and vote about this code. If you have any questions, please do not hesitate to ask me here.