AngularJS - 공장이 비어 있습니다.

Question

AngularJS의 새로운 기능 - $scope.clickMe 함수에서 오류 mainDataService.refreshStatus is not a function이 나타나는 이유를 알 수 없습니다. 나는 그 mainDataService 변수가 그것의 초기화 외에 빈 객체라는 것을 본다. 여기서 내가 뭘 잘못하고 있니?

var mainDataService = {}; 

    var firstModule = angular.module('myModule', ['ngRoute', 'ngAnimate']); 

    (function() { 
     var mainDataServiceInjectParams = ['$http', '$q']; 

     var mainFactory = function ($http, $q) { 
      mainDataService.refreshStatus = function (id) { 
       return $http.get('/api/values/' + id).then(function (results) { 
        return results.data; 
       }); 
      }; 

      return mainDataService; 
     }; 


     mainFactory.$inject = mainDataServiceInjectParams; 
     firstModule = firstModule.factory('mainService', mainFactory); 
    }()); 

    firstModule.controller('myCtrl', function ($scope, $http) { 
     $scope.TST = '1'; 

     $scope.clickMe = function (id) { 
      mainDataService.refreshStatus(id).then(function (results) { 
       $scope.TST = results; 
      }); 
     } 
    }); 

Answer 1

에서 사용할 수 있습니다.

는 로컬 범위에서 mainDataService 선언을 넣고 mainServicemyCtrl에 주입 : 코드는 여전히 같은 (minifcation 후 작동하도록,

var firstModule = angular.module('myModule', ['ngRoute', 'ngAnimate']); 

(function() { 
    var mainDataServiceInjectParams = ['$http', '$q']; 

    var mainFactory = function ($http, $q) { 
     var mainDataService = {}; 
     mainDataService.refreshStatus = function (id) { 
      return $http.get('/api/values/' + id).then(function (results) { 
       return results.data; 
      }); 
     }; 

     return mainDataService; 
    }; 


    mainFactory.$inject = mainDataServiceInjectParams; 
    firstModule = firstModule.factory('mainService', mainFactory); 
}()); 

firstModule.controller('myCtrl', function ($scope, $http, mainService) { 
    $scope.TST = '1'; 

    $scope.clickMe = function (id) { 
     mainService.refreshStatus(id).then(function (results) { 
      $scope.TST = results; 
     }); 
    } 
}); 

더 나은, 당신은 명시 적으로 컨트롤러에 종속성을 지정해야합니다 하면서 보시다시피 당신이 정상적인 기능 정의를 사용하는 경우

firstModule.controller('myCtrl', myCtrl); 

myCtrl.$inject = ['$scope', '$http', 'mainService']; 
function myCtrl($scope, $http, mainService) { 
    $scope.TST = '1'; 

    $scope.clickMe = function (id) { 
     mainService.refreshStatus(id).then(function (results) { 
      $scope.TST = results; 
     }); 
    } 
}); 

이, 당신이 사용하는 자바 스크립트의 기능을 리프팅하고 끝 부분에있는 기능을 쓸 수 있습니다 : 이미 서비스)에 대한 해냈어 상단의 관련 코드. 그것은 당신의 예에서와 같이 다른 방향입니다.

Answer 2

공급 mainService는

firstModule.controller('myCtrl', function ($scope, $http, mainService) { 

제어기하고 함수 당신은 당신의 자신의 서비스를로드 할 의존성 주입 메커니즘을 사용할 필요가

mainService.refreshStatus 

Answer 3

나는 즉시 mainDataService 여전히 참조 할 수 있도록 함수가 호출되지 호출 생각 당신이 첫 번째 줄

(function(){})() 

보다는

(function(){}())