Click here to Skip to main content
14,932,600 members
Articles / Web Development / HTML
Article
Posted 3 Apr 2019

Stats

219.7K views
163 bookmarked

AngularJS MVC Repository Dispose

Rate me:
Please Sign up or sign in to vote.
4.82/5 (98 votes)
3 Apr 2019CPOL11 min read
This is the simplest tutorial on AngularJS and Repository Pattern for developing professional MVC applications. It includes a source code about practical permission management project.

Image 1

Introduction

The aim of this article is to clear AngularJS technology and Repository which is one of the useful design patterns in order to develop web applications easily and in a more professional manner. 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 the other types of applications such as Game, etc.

The other major thing in this article is to explain repository pattern which encapsulates data access layer and draw a separate line between the actual database and other parts of the data access layer. It has some advantages for developers, for example, 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 the sections widely, I will open these technologies and patterns within a real project in order to have a clear concept from them.

Background

What is Repository

Repository is one of the useful design patterns which hides physical data from the other sections of data access layers. Professionally speaking, Repository gives us an instruction on how to encapsulate 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 layer by layer. Moreover, it supplies an in memory like collection http://www.codeproject.com/Articles/832189/List-vs-IEnumerable-vs-IQueryable-vs-ICollection-v 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 change in the future.

Image 2

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 entities and defining basic CRUD (Create, Read, Update, Delete) operations and one UnitOfWork class so that all repositories for each entity should be built on UnitOfWork class. Definitely, the second way is approved when having too many 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 entity 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 do we need to establish another repository above Data Context. Because Data Context is repository itself. Imagine one day, you want to use in Data Access Layer other 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 especially data layer in future. On the other hand, testing will be easy.

Image 3

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 the redundant code especially in CRUD web application. It is a MV (whatever you like) pattern and not just an 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 a specific structure for implementation application and developers have to follow these structures such as durandal and ember.

AngularJS has a 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 more as follows:

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:
    HTML
    <input type="text" ng-model="simpleBinding" /><span>{{simpleBinding}}</span>
  6. You do not need to modify HTML DOM.
  7. With the help 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.

Image 4

Design Guidance

As you see in the above picture, you should download Angular files from https://angularjs.org/ 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 holds Angular files.

Then you have to introduce these files 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 a 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 repeats 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 with the help 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.

HTML
<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 to pass data from view to controller use:

Inside Controller.js to pass data to service.

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

angularService.Add(Employee)

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

JavaScript
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 models in one view, therefore you have to write viewmodel to support it.

    AngularJS Solution: You can handle it by using $Scope object. This tiny and awesome object can supply data and make changes.

  2. Jquery Problem: You have problems using foreach loop if you are going to use viewmodel, of that you have to use for loop.

    AngularJS Solution: You can solve it by using ng-repeat directive inside table {tr tag}.

  3. Jquery Problem: You should manipulate on HTM DOM and customized your requirement according to your model architecture and writing something like: Html.EditorFor(model => model.ArticleTitle)

    AngularJS Solution: But with the help of AngularJS, you can use <input> and just by adding specific directives, you will reach your goal.

How to Arrange AngularJS Files

Image 5

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 a long time and they were not called by applications for a while. Garbage Collector is a 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 life time is well known to a 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" have 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 there are no tools to stop and release memory or resources so the 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 because they are old and no application uses them in the long term. So in the second stage, we have more free space and "D", "E" and "F" will come in the third stage. Dispose method or in a better words "Dispose Pattern" helps us to have more performance, especially when we know the life time of the resource (context).

Image 6

C#
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 command line: Install-Package angularjs -Version 1.3.8

Be careful about variant Angular version as it might need a slightly different code style.

Image 7

Using the Code

Scenario

I want to follow permission management scenario to better explain 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 the employees, here you need to have a combo box to keep employees name and permission roles. Therefore, it covers fundamental requirements in dealing with having 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.

    Image 8

  2. AngularJS is able to filter data:

    Image 9

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

    Image 10

  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.

    Image 11

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

    Image 12

  6. Loading data inside combobox:

    Image 13

Step By Step Using Repository and AngularJS in your MVC Project

(Instruction as Cookbook)

  1. Create database and name it "MVCAdvanced".
  2. Create two Tables: "Employee" and "EmpRole"

    Image 14

    Image 15 Image 16

  3. Create New MVC Project.
  4. Create New Data Model.
  5. Create New Folder in Solution and name it "GenericRepository".
  6. Create "GenericRepository.cs" Class:
    C#
    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;
            }
        }
    }
  7. Create "UnitOfWork" folder and create a class "UnitOfWork.cs":
    C#
    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);
            }
        }
    }
  8. Create "EmployeeController" inside "Controller" folder:
    C#
    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);
            }               
        }
    }
  9. Create "PermissionController" inside "Controller" Class:
    C#
    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);
            }
        }
    }
  10. 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.

  11. 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 }

  12. Inside Module.js, write:
    JavaScript
    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'
            });
      }]);
  13. Inside Views -> Shared -> _Layout.cshtml, write: (you are introducing your application name "MyApp" to your view by adding ng-app):
    HTML
    <!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>
  14. Inside Views -> Employee -> Index.cshtml, write:
    XML
    @{
        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>
  15. Inside Views -> Permission -> Index.cshtml write:
    XML
    @{
        ViewBag.Title = "Index";
    }
    
    <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>
  16. Inside Content -> Angular -> Controller.js, write:
    JavaScript
    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');
                });       
        }
    });
  17. Inside Service.js, write:
    JavaScript
    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

History

  • 1/26/2015: First version
  • 1/29/2015: Second version: making one Repository for entities
  • 02/15/2015: Third version: Repository Pattern with GenericRepository and UnitOfWork + Graph explanation

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mahsa Hassankashi
Doctorandin Technische Universität Berlin
Iran (Islamic Republic of) Iran (Islamic Republic of)
I have been working with different technologies and data more than 10 years.
I`d like to challenge with complex problem, then make it easy for using everyone. This is the best joy.

ICT Master in Norway 2013
Doctorandin at Technische Universität Berlin in Data Scientist ( currently )
-------------------------------------------------------------
Diamond is nothing except the pieces of the coal which have continued their activities finally they have become Diamond.

http://www.repocomp.com/

Comments and Discussions

 
QuestionMutiple Design Pin
Member 1107637220-Jan-16 19:25
MemberMember 1107637220-Jan-16 19:25 
AnswerRe: Mutiple Design Pin
Mahsa Hassankashi14-Aug-16 5:14
MemberMahsa Hassankashi14-Aug-16 5:14 
GeneralMy vote is 5+. Pin
Aladár Horváth2-Aug-15 21:07
professionalAladár Horváth2-Aug-15 21:07 
GeneralRe: My vote is 5+. Pin
Mahsa Hassankashi14-Aug-16 4:59
MemberMahsa Hassankashi14-Aug-16 4:59 
Questiononly adds to database, gets pop up errors with everything else Pin
Member 114725435-May-15 2:10
MemberMember 114725435-May-15 2:10 
AnswerRe: only adds to database, gets pop up errors with everything else Pin
Mahsa Hassankashi5-May-15 12:20
MemberMahsa Hassankashi5-May-15 12:20 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Member 114725437-May-15 2:21
MemberMember 114725437-May-15 2:21 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Mahsa Hassankashi14-May-15 12:31
MemberMahsa Hassankashi14-May-15 12:31 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Member 1147254317-May-15 23:38
MemberMember 1147254317-May-15 23:38 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Member 1147254317-May-15 23:51
MemberMember 1147254317-May-15 23:51 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Mahsa Hassankashi18-May-15 1:43
MemberMahsa Hassankashi18-May-15 1:43 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Member 1147254318-May-15 4:11
MemberMember 1147254318-May-15 4:11 
GeneralRe: only adds to database, gets pop up errors with everything else Pin
Member 1147254318-May-15 4:12
MemberMember 1147254318-May-15 4:12 
GeneralMy vote of 5 Pin
Dariush Tasdighi8-Apr-15 20:34
MemberDariush Tasdighi8-Apr-15 20:34 
GeneralRe: My vote of 5 Pin
Mahsa Hassankashi16-Apr-15 0:36
MemberMahsa Hassankashi16-Apr-15 0:36 
QuestionNice article Pin
Khiem Dev1-Apr-15 17:36
MemberKhiem Dev1-Apr-15 17:36 
AnswerRe: Nice article Pin
Mahsa Hassankashi3-Apr-15 20:48
MemberMahsa Hassankashi3-Apr-15 20:48 
AnswerRe: Nice article Pin
Mahsa Hassankashi16-Apr-15 0:16
MemberMahsa Hassankashi16-Apr-15 0:16 
GeneralRe: Nice article Pin
Khiem Dev21-Apr-15 16:13
MemberKhiem Dev21-Apr-15 16:13 
GeneralCongrats Pin
Gaurav Aroraa1-Apr-15 13:40
professionalGaurav Aroraa1-Apr-15 13:40 
GeneralRe: Congrats Pin
Mahsa Hassankashi3-Apr-15 20:47
MemberMahsa Hassankashi3-Apr-15 20:47 
GeneralRe: Congrats Pin
Gaurav Aroraa5-Apr-15 7:54
professionalGaurav Aroraa5-Apr-15 7:54 
QuestionArticle of the day April 1st 2015 . Congrats :) Pin
Sibeesh Passion31-Mar-15 19:15
professionalSibeesh Passion31-Mar-15 19:15 
AnswerRe: Article of the day April 1st 2015 . Congrats :) Pin
Mahsa Hassankashi1-Apr-15 2:57
MemberMahsa Hassankashi1-Apr-15 2:57 
GeneralRe: Article of the day April 1st 2015 . Congrats :) Pin
Sibeesh Passion1-Apr-15 3:42
professionalSibeesh Passion1-Apr-15 3:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.