CODEWITHSUNDEEP
javascriptangularjs
Sakky
Sakky

Reputation: 84

Difficulty in calling function properly in angular js

i have a function attached to angular app module through "app.factory" which has certain http requests in it. That function is invoked in the controller and the returned data from function is assigned to a scope variable in controller.

Problem is controller is being executed first and then the http requests in the function are executed due to which the data coming from http request can't be captured into scope variable. How that can be corrected.

function resourceapp.factory('dataService', function($http){
  var data = {};
  data.EnterprisePrograms = [];
  data.Resources=[];
  data.Skills=[];
  data.Allocations=[];

  Execution = function($http) {
    $http.get('http://localhost:8080/api/enterpriseProgram')
      .then(function(resources) {
        data.EnterprisePrograms=resources.data;
      });

    $http.get('http://localhost:8080/api/resource')
      .then(function(resources) {
        data.Resources=resources.data;
      });

    $http.get('http://localhost:8080/api/skill')
      .then(function(resources) {
        data.Skills=resources.data;
      });

    $http.get('http://localhost:8080/api/allocation')
      .then(function(allocation) {
        data.Allocations = allocation.data;
      });
  }

  return data;
});

controller

resourceapp.controller('AllocationList', function($scope, dataService) {
  $scope.allocationList = dataService.Allocations;
});

Upvotes: 1

Views: 94

Answers (2)

anoop
anoop

Reputation: 3822

It should be like :

In factory : Create a method to return promise.

 resourceapp.factory('dataService', function($http){
    var data = {};

    data.getEnterprisePrograms = function($http){
        return $http.get('http://localhost:8080/api/enterpriseProgram');
      }

    data.getResourceData = function($http) {   
        return $http.get('http://localhost:8080/api/resource');
      }

    data.getSkillData = function($http) {
       return $http.get('http://localhost:8080/api/skill');
      }

    data.getAllocationData = function($http) {   
       return $http.get('http://localhost:8080/api/allocation');
    }

    return data;
});

In Controller, call the factory method to fetch promise and resolve them with $q.all()

 resourceapp.controller('AllocationList', function($scope, dataService, $q){
              var allocationPromise = dataService.getAllocationData();
              var skillPromise= dataService.getSkillData();
              // other promise

 $q.all([allocationPromise,skillPromise, ..other promise]).then(function (result) {
              $scope.allocationData = result[0].data;
             $scope.skillData = result[1].data;
              // other data
          })
 });

See this for $q.all()

Upvotes: 2

Fabio Campinho
Fabio Campinho

Reputation: 1022

You could also create a function for each $http.get using promises.

EnterprisePrograms = function(){
    return $http.get('http://localhost:8080/api/enterpriseProgram')
        .then(function(resources){
            return resources.data;
        });
}
Resources = function(){
    return $http.get('http://localhost:8080/api/resource')
    .then(function(resources){
        return resources.data;
    });
}
Skills = function(){
    return $http.get('http://localhost:8080/api/skill')
    .then(function(resources){
        return resources.data;
    });
}
Allocations = function(){
    return $http.get('http://localhost:8080/api/allocation')
    .then(function(allocation){
        return allocation.data;
    });
}

Upvotes: 1

Related Questions