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.

AngularJS $http.post 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.post Ajax call in AngularJS

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

WebAPI Post Method
    public class PackageController : ApiController

    {

        PkgEntities objDBContext = new PkgEntities();

        //

        [HttpPost]

        public string Post(Package objPackage)

        {

            try

            {

                objDBContext.Packages.Add(objPackage);

                objDBContext.SaveChanges();

                return "Package " + objPackage.Name + " added Succesfully";

            }

            catch (Exception ex)

            {

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

            }

 }
}

AngularJS call to WebAPI Get method
    this.AddPackage = function (scope) {

        var dataObj = {

            Name: scope.Name,

            Description: scope.Description,

            PackageSQL: scope.PackageSQL,

            Status: scope.Status

        };

        //

        $http.post(GetRootPath() + "Package", dataObj)

           .then(function (results) {

               //Success;

               try {

                   alert(results.data);

               }

               catch (err) {

                   alert(err.message);

               }

           }, function (results) {

               //error

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

                                     + results.status);

           })

    }

The $http.post method creates a JSON object objData calls the server side WebAPI Post() method and passes the object as parameter to the WebAPI method. The WebAPI contoroller method receives the package object from the $http.post call and inserts a new package to 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.

AngularJS $http.get 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.get Ajax call in AngularJS

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

WebAPI Get Method
    public class PackageController : ApiController

    {

        PkgEntities objDBContext = new PkgEntities();

        //

[HttpGet]

public dynamic Get()

{

var lstPackages = (from Packages in objDBContext.Packages

orderby Packages.PackageId

select new { Packages.PackageId, Packages.Name, Packages.Description, Packages.PackageSQL, Packages.Status });

//

return lstPackages;

}
}

AngularJS call to WebAPI Get method
        $http.get(“http://localhost:7630/api/Package")
            .then(function (results) {
                //Success;
                try {
                    scope.packageList = results.data;
                }
                catch (err) {
                    alert(err.message);
                }
            }, function (results) {
                //error
                alert("Error: " + results.data + "; "
                                      + results.status);
            })

The $http.get method calls the server side WebAPI Get() method, collects the response and stores it in the  packageList property of the $scope object.

$http vs JSONP for cross-site request

In the previous posts we saw on how to make Ajax requests using $http and JSONP, we also saw that $http does not support cross-site server requests, and JSONP supports it. In this post we shall see an example of making cross-site service requests using $http and JSONP and observer the responses in both the cases.

The following example makes the same Ajax calls using JSONP and $http, let us observe the response from both the requests.