AngularJS - завод пустой объект

Question

Я новый в AngularJS - я не могу понять, почему я получаю ошибку mainDataService.refreshStatus is not a function в функции $scope.clickMe. Я вижу, что переменная 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 декларацию в локальной области и ввести mainService в myCtrl:

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; 
     }); 
    } 
}); 

Даже лучше, вы должны явно назначить зависимости в контроллер, так что ваш код все еще работает после minifcation (как вы уже сделали это за услугу):

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; 
     }); 
    } 
}); 

Как вы видите, если вы используете обычные определения функций, вы можете использовать функцию водружение Javascript и писать функции в конце, имея соответствующий код наверху. Это наоборот, как в вашем примере сервиса.

Answer 2

Поставка mainService к контроллеру

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

, а затем использовать его в функции

mainService.refreshStatus 

Answer 3

Я думаю, что вы сразу же вызывается функция не вызывается, так mainDataService ссылаться на объект, установить на первой линии

(function(){})() 

вместо

(function(){}())