I have encountered an issue where the data fetched by my HTTP service is not being sent to the controller. Despite correctly retrieving the data, it seems to be getting lost in transit.
After realizing that the query is executed asynchronously, I attempted to implement $q.defer to handle this. However, even after referencing a similar question on Stack Overflow (link provided: AngularJS $http call in a Service, return resolved data, not promises), the problem persists.
This is how my Service looks:
.service("builds", ['$http', '$q', function($http, $q) {
var deferred = $q.defer();
$http({
method:'GET',
url: '/builds',
cache : true
}).success(function(data) {
deferred.resolve(data);
}).error(function(msg){
deferred.reject(msg);
});
console.log(deferred.promise);
return deferred.promise;}]);
Furthermore, here is my routeProvider setup:
$routeProvider.
when('/builds', {
controller: ['$scope', 'buildsData', function ($scope, buildsData) {
console.log("In routeprovider:" + buildsData);
$scope.allBuilds = buildsData;
}],
template: '<build-list></build-list>',
resolve: {
buildsData: ['builds', function(builds){
return builds;
}]
}
})
Lastly, let's take a look at a snippet of my Controller:
var app = angular.
module('buildList').
component('buildList', {
templateUrl: 'build-list/build-list.template.html',
controller: function BuildListController($scope, $window,$location,$cookies, builds) {
console.log($scope.allBuilds);
$scope.league = $scope.allBuilds;