0

다른 사이트에서 많은 기사를 읽었지만 해결되지 않은 문제가 있습니다. 간단한 AngularJS 애플리케이션을 작성하고 있습니다. 나는 Angular를 아주 좋아합니다. 웹 API에서 데이터를 가져 오는 $ http 서비스를 호출하는 팩토리 메서드를 작성했습니다. 웹 API가 정상적으로 실행 중이고 예상대로 JSON 객체가 반환됩니다.AngularJS - 공장을 사용하여 http serrvice를 호출 할 수 없습니다.

각도 코드는 작동하지 않는 이유는 잘 모릅니다 계속 이일을 보냈지 만 한

<body ng-controller="controller"> 

data: {{data}} 
<br/> 
error: {{error}} 
<br /> 

var app = angular.module("app", []) 
      .controller("controller", function ($scope, WebFactory) { 
       $scope.data = "data"; 
       $scope.error = "error"; 
       $scope.data=WebFactory.getData(); 

      }) 
      .factory("WebFactory", function ($http) { 
       var obj = {}; 

       obj.getData = function() 
       { 
        $http({ 
         method: "GET", 
         url: "http://localhost:37103/api/employee",      
        }).then(function success(response) { 
         return response.data; 
        }) 
        .then(function error(response) { 
         return response; 
        }); 
        return 'No data'; 
       } 
       return obj; 

      }); 

HTML 코드입니다. 대신이 같은

+0

당신이 콘솔에서 오류를보고있는 WebFactory에 $ q를 서비스를 제공 할 것입니다? – Sajeetharan

+0

안녕하세요 @Sajeetharan, 나는 어떤 오류라도 보지 못한다. "HTML1300 : Navigation occurred." 만. –

+0

getData 메소드가별로 의미가 없습니다. $ http()는 응답을받을 때 해결 될 약속을 반환합니다. 그것의 비동기 호출. 따라서 데이터를 가져 오면 어떤 경우에도 "데이터 없음"이 반환됩니다. 응답이 오면 콜백으로 처리하지만 그 이후에는 아무 것도 사용하지 않습니다. –

답변

1

시도 뭔가 : 모든

var app = angular.module("app", []) 
      .controller("controller", function ($scope, WebFactory) { 
       $scope.data = "data"; 
       $scope.error = "error"; 
       $scope.data = {} 
       WebFactory.getData().then(function success(response) { 
         $scope.data = response.data; 
        }); 
      }) 
      .factory("WebFactory", function ($http) { 
       var obj = {}; 

       obj.getData = function() 
       { 
        return $http({ 
         method: "GET", 
         url: "http://localhost:37103/api/employee",      
        }) 
       } 
       return obj; 
      }); 
+0

고마워요. 블라디미르. 나는 당신의 설명과 그 일을 지금 당장 받았다. :) –

0

먼저, 당신은 다음 콜백을 오용하는, 둘째 ng-app 선언

을 놓치고있어. 성공 콜백, 오류 콜백, 마침내 콜백의 세 가지 매개 변수를 허용합니다. 첫 번째로 성공을 실행하면 항상 응답을 반환하는 두 번째 콜백을 실행하지만 그 방법이 의도되지 않은 것으로 가정하고 사용하기 쉬운 get 함수를 사용할 수 있습니다. 이 있어야한다 : 마지막으로, 당신은 약속과 비동기 코드를 처리, 아직 결과에 약속 대신 응답 또는 문자열을 반환하는 약 promises

$http.get("http://localhost:37103/api/employee").then(function(response){ 
    //Do something with successfull response 
}, 
    function(error){ //do something with the error}); 

참조 설명서를 참조하십시오. 그래서 GetData의()는 다음과 같아야합니다

obj.getData = function(){ 
    return $http.get("http://localhost:37103/api/employee"); 
} 

을 그리고 컨트롤러에서 다음 (성공, 오류, 마지막으로) 콜백을 사용하거나 오류에 값을 제공하려는 경우/마지막으로 서비스 콜백, 당신 은 $ Q 서비스 물론

obj.getData(){ 
var deferred = $q.defer(); 
$http.get(...).then(function(response){ 
     deferred.resolve(response.data); 
    }, 
    function(error){ 
     deferred.reject("No Data"); 
    }); 
    return deferred.promise; 
} 

를 사용해야합니다 당신은

+0

답장을 보내 주셔서 감사합니다. 문제는 비동기 호출과 함께 있었고 블라디미르는 해상도와 그 일을 잘 마무리 해주었습니다. –

+0

그리고 내가 제공 한 HTML은 페이지의 일부분이었습니다. 감사 –