AngularJs 컨트롤러, 서비스 대기 http $ 결과

Question

컨트롤러가 나머지 작업을 수행하기 전에 서비스 $ http 결과를 기다리고 싶습니다. myData에 대한 일부 하드 코딩 된 JSON을 테스트했지만 컨트롤러에 표시되어 있지만 $ http 요청으로 myData를 채우 자마자 컨트롤러가 기다리지 않고 나머지 코드를 통해 걷습니다. Chrome webdevelopper의 네트워크 탭에 요청에 대한 예상 결과가 표시됩니다. 여기에 내가 일반적으로 당신이 적절하게 모든 약속을 반환 할 필요는 routeProvider 내 해결 객체에서 할 무엇

var ListerApp = angular.module('ListerApp',[ 
    'ListerAppFilters', 
    'sharedFactoryApp', 
    'sharedServiceApp', 
    'ListerAppController', 
    'infinite-scroll', 
    'angular-inview', 
    'ngRoute' 
]); 

ListerApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/list', 
      { 
       templateUrl: '/assets/services/partials/list.html', 
       controller: 'ListerCtrl', 
       resolve : { 
        'sharedServiceAppData': function($sharedServices){ 
         // sharedFactoryAppData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service 
         return $sharedServices.promise(); 
        } 
       } 
      } 
     ); 
}]); 

angular.module('sharedServiceApp', []).service('$sharedServices', ['$http', '$rootScope', '$q', function($http, $rootScope, $q) { 
    var myData = null; 

    return { 
     promise : function() { 
      if (!myData) { 
       $http({method : 'GET', url : '/shop/api/json', params : { 
         end   : $rootScope.endmarkerSyncDataset, 
         page  : 1, 
         per_page : $rootScope.itemsPerPage 
        } 
       }).success(function (data) { 
        myData = data.data_set; 
        //deferred.resolve(data.data_set); 
       }); 

       // I allready tested this and this is OK: myData = {foo : 'bar'}; 
      } 
     }, 
     getShopData: function() { 
      return myData; 
     } 
    }; 
}]); 

(function(){ 
    var appController = angular.module('ListerAppController', []); 

    appController.controller('ListerCtrl', ['$scope', '$rootScope', '$http', '$filter', '$timeout', '$sharedFactories', '$sharedServices', 
     function($scope, $rootScope, $http, $filter, $timeout, $sharedFactories, $sharedServices) { 
      $scope.items = $sharedServices.getShopData(); 
      console.log($scope.items); // return myData -> null 
     } 
})(); 

Answer 1

나는이 배의 무리했던 :

는 이미 다음이 경로 변경이 특성 해결시 대기하도록

$routeProvider 
    .when('/path', 
     { 
      templateUrl: 'some/path/to/template.html', 
      controller: 'myCtrl', 
      resolve : { 
       'myData': ['mySrvc',function(mySrvc){ 
        return mySrvc.someMethod().then(function(response){ 
         return response.data; 
        },function(){ 
         return {}; 
        }); 
       }] 
      } 
     } 
    ); 

그런 다음 서비스 :

angular.module('myApp.services').factory('mySrvc',['$http',function($http){ 
    var _url = 'https://someurl.com/path/to/api'; 

    return { 
     someMethod : function(vars){ 
      if(angular.isDefined(vars)){ 
       return $http.post(_url,$.param(vars),{headers:{'Content-Type':'application/x-www.form-urlencoded'}}); 
      }else{ 
       return $http.get(_url); 
      } 
     } 
    }; 
}]); 

그런 다음 컨트롤러에서 당신이 컨트롤러에 대한 매개 변수 목록의 마지막에 해결 매개 변수를 삽입해야합니다. 코드에서

angular.module('myApp.controllers').controller('myCtrl',['$scope','myData',function($scope,myData){ 

}); 

, 당신은 아무 것도 반환하지 않는 함수로부터 반환을 routeProvider의 해결 객체에서 $http의 약속을 다음의 성공 함수에서 data.data_set 값을 반환 시도 너의 봉사.

Answer 2

$ q.defer와 같은 것을 발견했습니다. 해결하고 약속드립니다. "promise"상태에 도달 할 때까지 모든 것을 유지합니다.

여기 a link

angular.module('sharedServiceApp', []).service('$sharedServices', ['$http', '$rootScope', '$q', function($http, $rootScope, $q) { 
    var myData = null; 

    return { 
     promise : function() { 
      if (!myData) { 
       var deferred = $q.defer(); 
       $http({method : 'GET', url : '/shop/api/json', params : { 
        end   : $rootScope.endmarkerSyncDataset, 
        page  : 1, 
        per_page : $rootScope.itemsPerPage 
       } 
      }).success(function (data) { 
       myData = data.data_set; 
       deferred.resolve(data.data_set); 
      }).error(function(data, status, headers, config) { 
       deferred.reject("Error: request returned status " + status); 
      }); 
      return deferred.promise; 
     } else { 
      return myData; 
     } 
    }, 
    getShopData: function() { 
     return myData; 
    }, 
    setShopData: function (data) { 
     myData= data; 
    } 
}; 

이다

}]);