Angular JS success callback

Question

I m reaching out to you to get assistance on the $promise issue with AngularJS.

Here is the documentation information on $resource and it will be applicable to $http as well

link

Having said that, I m trying to make an API call and on success want to perform callback action. Since the operation takes place asynchronously, callback action takes place even before the API call gets completed. This leads to incorrect data reflection. Here is the simple get example, using $resource and $http. In both the cases the actual expectation is that console log should show the actual data but it shows the promise data and resulting in the callback function getting called even before the API calls get completed

$http.get('../../../Employee/GetEmployees').success(function (data) {
        console.log(data);
    });


   return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
        });

I have provided the example just for giving the clear picture but my actual problem comes with “PUT”(Update). As per the logic, update has to take place first through API call and then the page needs to be redirected to the List page where the updated data will be queried and rendered. Any recommendation on this will be greatly appreciated.

 $scope.UpdateEmp = function () {
        var empl = $scope.Employee;
        empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
            $location.path('/EmpList'); //redirect to list
        });

P.S: For time being, please leave about the URL, please visualize it as an API which returns JSON object.

Here is the complete code

Here is the complete code.

Routing:

var myApp = angular.module('myApp', ['emp', 'ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider
        .when('/',
        {
            templateUrl: 'pages/EmpList.html',
            controller: 'empController'
        }
        )
    .when('/EmpDetail/:EmpID',
    {
        templateUrl: 'pages/EmpDetail.html',
        controller: 'empDetailController'
    }
)
     .when('/EmpList',
    {
        templateUrl: 'pages/EmpList.html',
        controller: 'empController'
    }
    )
     .when('/EmpCreate',
    {
        templateUrl: 'pages/EmpCreate.html',
        controller: 'empCreateController'
    });

});

Here is the controller method

    myApp.controller('empController', function ($scope, $routeParams, $location, empFactories, empFactory, $http, empHttpFactory) {

            $scope.Employees = empFactories.query();

            $scope.edit = function (EmpID) {
            $location.path('/EmpDetail/' + EmpID);
        };


        $scope.Delete = function (empID) {
            empFactory.empDelete.del({ EmpID: empID }, function () {
                $location.path('/EmpList');
            });
        }

        $scope.Createnew = function () {
            $location.path('/EmpCreate');
        }


    });

    myApp.controller('empDetailController', function ($scope, empFactory,empFactories, $routeParams, $location) {

        $scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID });

        console.log($scope.Employee);

        $scope.UpdateEmp = function () {
            var empl = $scope.Employee;
            empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
                $location.path('/EmpList'); //redirect to list
            }); 

        };

    });

Here is the service

var myservice = angular.module('emp', ['ngResource', 'ngRoute']);
myservice.factory('empFactories', function ($resource) {
    return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
            create: { method: 'POST' }
        });
});

myservice.factory('empFactory', function ($resource) {



    //return $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
    //      {
    //          show: { method: 'GET' }
    //      });


    var resource = {
        employee:
            $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
           {
               show: { method: 'GET' }

           }),
        empUpdate:
            $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
        empDelete:
            $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),

        empCreate:
            $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } })
    }

    return resource;
});

Answer 1

First i see a design problem, your factory shouldn't return resources, should return promises,

myservice.factory('empFactory', function ($resource) {

  var employeeResource  = $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID'}, {show: { method: 'GET' } }),
  updateResource = $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
  deleteResource = $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),
  createResource = $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } });

  return { 
    getEmployee: function(id){
      return employeeResource.get({EmpID: id}).$promise;
    },
    updateEmployee: function(){
      return updateResource.update(...).$promise;
    }
  };
});

I think that the problem is that you are calling

$scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID });

This returns a resource right now, so you are not technically obtaining the employee anywhere. Is not very clear where is the error, are you trying to execute several resource request in parallel? if that's it use $q.all([asyncCall1,asyncCall2,...]).spread(function(r1, r2, ...) {...});

Regards

Answer 2

factory does not need to return a promise.I mean that depends on how you manage your factory and controllers and how you are going to resolve it.

your factory does not return a promise but resource, so it should be resolved in your controller. your update method in controller should be like this :

    $scope.UpdateEmp = function () {
    var empl = $scope.Employee;
    empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }, function (successResponse) { // update method in my resource uses $resource
        $location.path('/EmpList'); //redirect to list
    },function (error) { 
     // do something on error callback
    });

read about angularjs resource angularjs docs about $resource

Answer 3

With $resource you define the API route and the parameters the API needs in order to process the request. Then, later you will need to supply the $resource with data and perform an action (get, save, query, remove, delete).

I personally prefer to work with $http as it's pretty cut and dry. The down-side is you can't pre-define the routes and parameters across your app.

Here's a pen that shows you both $resource and $http requests.

http://codepen.io/kenhowardpdx/pen/BNzXeE

angular.module('app', ['ngResource']);

MyService.$inject = ['$http', '$resource'];
function MyService ($http, $resource) {
    var _this = this;

    var Search = $resource('http://www.omdbapi.com/?tomatoes=true&plot=full&t=:searchTerm', {searchTerm:'@searchTerm'});

    _this.httpSearch = function (searchTerm) {
        return $http.get('http://www.omdbapi.com/?tomatoes=true&plot=full&t=' + searchTerm);
    };

    _this.resourceSearch = function (searchTerm) {
        return Search.get({searchTerm: searchTerm}).$promise;
    }
}

angular.module('app').service('MyService', MyService);

MyController.$inject = ['MyService'];
function MyController (MyService) {
    var _this = this;

    _this.type = 'http';

    _this.searchFilms = function () {
        if (_this.type === 'http') {
            MyService.httpSearch(_this.searchTerm).then(function(_response) {
               _this.results = _response.data; 
            });
        } else {
            MyService.resourceSearch(_this.searchTerm).then(function(_response) {
               _this.results = _response; 
            });
        }
    }
}

angular.module('app').controller('MyController', MyController);`