AngularJS, 서비스를 사용하여 HTTP 데이터를 캡처하고 컨트롤러에 바인딩하는 방법은 무엇입니까?

Question

API 호출이 훌륭하게 작동하지만 여러 컨트롤러에서이 API를 사용하여 자체 서비스로 이동했습니다. 저는 고전적인 Scope 문제 나 Angular의 다이제스트주기에 대한 오해처럼 보입니다.

'use strict'; 
myApp.factory('Stuff',['$http', function ($http) { 
    var Stuff = {}; 
    Stuff.data = {}; 
    Stuff.api = 'http://localhost:8080/api/'; 
    Stuff.getStuff = function() { 
    var http_stuff_config = { 
     method: 'GET', 
     url: Stuff.api + 'stuff/' 
    }; 
    $http(http_stuff_config).then(function successCallback(response) { 
     Stuff.data = (response.data); 
     console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) { 
     console.log(response.statusText); 
    }); 
    }; 
    Stuff.getStuff(); 
    console.log(Stuff.data); // Returns empty object. 
    return Stuff; 
}]); 

myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) { 
    $scope.stuff = Stuff; 
    console.log($scope.stuff.data); // Returns empty object. 
    $scope.stuff.getJobs(); 
    console.log($scope.stuff.data); // Returns empty object. 
}]); 

큰 단서가 있습니다. 위해서는 전술의 필수 출력은 메소드를 호출 한 후에 컨트롤러

빈 오브젝트 ((메소드 호출하기 전에 컨트롤러)

빈 객체 (메소드 호출 한 후 서비스) ...

1. 빈 목적) 컨트롤러 메소드 실행) 그래서

에

채워진 오브젝트 서비스로부터 (방법에서 실행)

채워 오브젝트 (getStuff() 메서드의 범위와 Angular의 작업 순서 사이의 어딘가에서, 나는 현저하게 어리석은 일을하고있다. 미리 감사드립니다.

Answer 1

서비스에 반품을 추가해야합니다. 그렇지 않으면 약속이 컨트롤러로 반송되지 않습니다. 서비스에 반환 값을 저장하고 결과를 컨트롤러에 반환하지 않는 것이 좋습니다.

이것은 서비스의 데이터를 업데이트 할 때마다 업데이트를 찾기 위해 서비스에 $scope.$watch을 적용해야하기 때문에 좋지 않은 것으로 간주됩니다. 대규모 앱에서는 매우 비쌉니다.

가장 좋은 아이디어는 약속 service.getthing().then(function(result){});

myApp.factory('Stuff',['$http', function ($http) { 
    var Stuff = {}; 
    Stuff.data = {}; 
    Stuff.api = 'http://localhost:8080/api/'; 
    Stuff.getStuff = function() { 
    var http_stuff_config = { 
     method: 'GET', 
     url: Stuff.api + 'stuff/' 
    }; 
    return $http(http_stuff_config).then(function successCallback(response) { 
     return response.data; 
     console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) { 
     console.log(response.statusText); 
    }); 
    }; 
    Stuff.getStuff(); 
    console.log(Stuff.data); // Returns empty object. 
    return Stuff; 
}]); 




myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) { 
    $scope.stuff = Stuff; 
    console.log($scope.stuff.data); // Returns empty object. 
    $scope.stuff.getJobs().then(function(result) {$scope.stuff = result; console.log(result);}); 
    console.log($scope.stuff.data); // Returns empty object. 
}]); 

Answer 2

는 <span ng-bind="stuff.data.property"> 같은 것을, 당신이보기가 있다면 지금

을 (실제로 다음 줄에 console.log($scope.stuff.data)를 호출하고 데이터를 얻을 수 없음을 의미)

당신이 그것을 볼 수 있었다 비동기 $scope.stuff.getJobs()가 있다는 사실을 비동기 함수가 완료되면 뷰 자체가 업데이트되므로 잘 작동합니다. (이것은 각도의 일부 임)

Answer 3

결과를 서비스 자체 (Stuff.data)에 저장하지 않는 것이 좋습니다. getStuff 함수에서 데이터를 반환하고 appController의 범위에 데이터를 저장하게하십시오.

Answer 4

통해 컨트롤러 액세스를 호출 컨트롤러로 데이터를 반환 (당신이 그것을 캐시 할 필요가없는 경우, 이것은 우리가 나중에 이야기 할 수 있습니다) 및하자입니다 $ http를 실행하면 AJAX 요청을한다는 것을 이해해야합니다. 따라서 즉시 결과를 반환하지 않습니다.

따라서 $ scope.stuff.getJobs()에서 오는 데이터를 사용하려고 시도하면; 이 함수를 호출 한 직후에 아무 것도 얻지 못할 수도 있습니다.

Stuff.getJobs()가 약속을 반환하고 promise.then (자신의 성공 핸들러)를 사용하여 반환 된 응답을 올바르게 처리해야합니다.

코드를 약간 정리했습니다. 다음은 Yahoo Weather API에서 데이터를 검색하는 코드의 실행 샘플입니다.

CODEPEN에서 재생할 수 있습니다.

HTML :

<div ng-app="myApp" ng-controller="appController"> 
    <p>{{data}}</p> 
</div> 

JS는 :

var myApp = angular.module("myApp", []); 

myApp.factory('Stuff',['$http', function ($http) { 
    var Stuff = {}; 
    Stuff.data = {}; 
    //sample yahoo weather api 
    Stuff.api = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys'; 

    Stuff.getData = function() { 
    var http_stuff_config = { 
     method: 'GET', 
     url: Stuff.api + 'stuff/' 
    }; 
    return $http(http_stuff_config); 
    }; 

    return Stuff; 
}]); 

myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) { 
    $scope.data = "$http service not ran"; 

    var uncompletedAjaxCall = Stuff.getData(); 
    uncompletedAjaxCall.then(
    function(responseData){ 
     $scope.data = responseData; 
    }, 
    function(errorMsg){} 
); 

}]);