AngularJS (맞춤 서비스가있는 JSON로드 중)

Question

json 파일을로드하기위한 서비스를 작성하려고합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

본 서비스

app.service("jsonService", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    $http.get('./assets/json/home.json').then(function (data) 
    { 
     deferred.resolve(data); 
    }); 

    this.getHomeItems = function() 
    { 
     return deferred.promise; 
    } 
}) 

내 컨트롤러

app.controller('homeController', function ($scope, jsonService) { 

    var promise = jsonService.getHomeItems(); 
    promise.then(function (data) 
    { 
     $scope.home_items = data; 
     console.log($scope.home_items); 
    }); 

}); 

콘솔 오류 : 당신은 dependency injection 누락

Answer 1

$의 범위가 정의되어 있지 않습니다.

서비스는 다음과 같아야합니다

app.service("jsonService", ["$http", "$q", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    $http.get("./assets/json/home.json").then(function (data) 
    { 
     deferred.resolve(data); 
    }); 

    this.getHomeItems = function() 
    { 
     return deferred.promise; 
    } 
}]); 

그리고 당신의 컨트롤러 :

app.controller("homeController", ["$scope", "jsonService", function ($scope, jsonService) 
{ 
    var promise = jsonService.getHomeItems(); 
    promise.then(function (data) 
    { 
     $scope.home_items = data; 
     console.log($scope.home_items); 
    }); 
}]); 

당신은 당신이 $ HTTP에 의해 반환 약속을 풀기하는 일반적인 안티 패턴을 가지고 있습니다

Answer 2

재 포장 약속의 데이터. 이것은 불필요하며 $ http가 반환하는 약속을 반환합니다.

이론적으로

app.controller('homeController', ['$scope', function ($scope, jsonService) { 
    ... 
}]); 

는 AngularJS와는 추론 할 수 있어야한다 : 당신이 제공하지 않은 HTML, 보지 않고

this.getHomeItems = function() { 
    return $http.get("./assets/json/home.json"); 
} 

Answer 3

, 난 당신이 컨트롤러 생성자에 $ 범위를 주입하지 않았을 수 있습니다 생각한다 변수 명으로부터의 의존성. 그러나 공식적인 문서에 따르면 이것이 작동하지 않는 상황이 있고 의존성을 명시 적으로 주입하지 않는 관행은 권장되지 않는다. 따라서 위의 그림과 같이 명시 적 주입을 시도 할 수 있습니다.

여기에 공식 문서의 예를 참조 : 여기

https://docs.angularjs.org/guide/controller

과 :

https://docs.angularjs.org/guide/di