Inject Angular Service to Controller

In AngularJS Dependency Injection is achieved by injecting objects to the controller, in normal implementations we use the $scope object in the controller to set values and pass it to the view for display.

In the following example we shall create a service and inject the service to the controller, this way all the data used in the controller are fed from the service, the service can be changes or pass different service objects to test the controller and the view.

Dependency Injection in Angular?

In AngularJS dependency injection is achieved by injecting objects to the controller, in normal implementations we use the $scope object in the controller to set values and pass it to the view for display. The following is an example of normal controller implementation without using Dependency injection.

What is Dependency Injection?

Dependency Injection is a software design pattern which is used to improve testability of applications. Dependency Injection loosely couples the various components of the application thereby improve testability of the various components independently.

If the objects to be used in a class are initialized locally in the class, then it creates a dependency and makes the objects tightly bound to the class. The below class is an example without using Dependency Injection, notice that the objEmpRepository object is initialized within the class, hence it is tightly bound to the class.

AngularJS Ajax Overview

Ajax using AngularJS

AngularJS Ajax using $http

AngularJS Ajax using $http JSONP

How JSONP enables cross-site request

$http vs JSONP for cross-site request

AngularJS $http.get Ajax calls

AngularJS $http.post Ajax calls

AngularJS $http.delete Ajax calls

AngularJS $http.delete Ajax calls

In the post AngularJS Ajax using $http we saw that we can perform Ajax calls to the server in AngularJS using $http service, and we saw that $http supports Get, Post, Put and Delete operations. In this post we shall see on how to make a $http.delete Ajax call in AngularJS

The following example shows how to make a $http.delete call to an Asp.Net Web API Controller method.

WebAPI Post Method
    public class PackageController : ApiController

    {

        PkgEntities objDBContext = new PkgEntities();

        //

        [HttpDelete]

        public string Delete(int id)

        {

            try

            {

                Package currPackage = (from Packages in objDBContext.Packages

                                       where Packages.PackageId == id

                                       select Packages).First();

                //

                objDBContext.Packages.Remove(currPackage);

                objDBContext.SaveChanges();

                return "Package " + currPackage.Name + " deleted Succesfully";

            }

            catch (Exception ex)

            {

                return "Error: " + ex.Message.ToString();

            }

   }
}

AngularJS call to WebAPI Get method
        $http.delete(GetRootPath() + "Package/" + packageId)

           .then(function (results) {

               //Success;

               try {

                   //alert(results.data);

               }

               catch (err) {

                   alert(err.message);

               }

           }, function (results) {

               //error

               alert("Error: " + results.data + "; "

                                     + results.status);

           })

The $http.delete method calls the server side WebAPI Post() method with the id of the package to be deleted as the parameter. The WebAPI contoroller’s Delete method automatically receives this call and deletes the corresponding package from the Database Context and returns a success/failure message to AngularJS. The AngularJS client method receives the message and displays it to the end user.