Внедрение службы в контроллер, имеющий отдельные файлы с AngularJS

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

TypeError: myService.getData не является функцией в новом (controllers.js:18) в Object.e [как вызов] (angular.min.js:39) в M.instance (angular.min.js:80) в D (angular.min.js:61) в g (angular.min.js:55) в g (angular.min.js:55) в angular.min.js:54 в angular.min.js:20 в r. $eval (angular.min.js:133) в r.$apply (angular.min.js:134)

index.html

загрузить все js-файлы на этой html-странице

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>title</title>
  <link rel="stylesheet" href="styles/all.css">
  <script src="libs/angular.min.js"></script>
  <script src="libs/jquery.js"></script>
  <script src="js/service.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/myApp.js"></script>
  <script src="libs/bootstrap/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

Это основной файл, куда мы загружаем сразу контроллеры и сервисы

myApp.js

var app = angular.module('app', ['app.service', 'app.controllers']);

сервис.js

здесь я попытался получить данные с сервера и хочу использовать их в контроллере

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

app.service('myService', function($http) {
  function getData (callbackFunc) {
    $http({
        method: 'GET',
        url: "url"
      }).success(function(data){
        callbackFunc(data);
    }).error(function(){
        alert("error");
    });
  }
});

контроллеры.js

Этот файл включает всю логику и внедряет myService из файла service.js. я использую myService из service.js и пытался получить данные, но все время получаю ошибку

angular.module('app.controllers', ['app.service'])

  .controller('myCtrl', ['$scope', '$http', '$timeout', 'myService',

    function ($scope, $http, $timeout, myService) {

   myService.getData(function(dataResponse) {

          $scope.surveys = dataResponse;

});

}]);

person tushar balar    schedule 14.01.2016    source источник


Ответы (1)


В объявлении вашего сервисного модуля есть проблема.

Вы получаете имя модуля, не объявляя его.

Попробуйте так

var appSvc=angular.module("app.service",[]);

appSvc.service('myService', function($http){}); 

свяжите свой метод с этим

Как это

this.getData =function (callbackFunc) {}
person Anik Islam Abhi    schedule 14.01.2016
comment
Когда я использую этот код, я получаю сообщение об ошибке: TypeError: myService.getData не является функцией - person tushar balar; 14.01.2016
comment
TypeError: myService.getData не является функцией в новом ‹anonymous› (controllers.js:18) в Object.e [как вызов] (angular.min.js:39) в M.instance (angular.min.js:80) ) в D (angular.min.js:61) в g (angular.min.js:55) в g (angular.min.js:55) в angular.min.js:54 в angular.min.js:20 в r.$eval (angular.min.js:133) в r.$apply (angular.min.js:134) - person tushar balar; 14.01.2016
comment
@tusharbalar это потому, что getData должен быть объявлен как this.getData = function(callbackFunc) { ... }. Я также предлагаю вам прочитать blog.ninja-squad.com/2015/ 28.05/angularjs-promises, потому что здесь вы используете анти-шаблон обещания. - person JB Nizet; 14.01.2016
comment
да, @JBNizet прав. если вы используете сервис, вы должны использовать this , если вы используете factory, вам нужно вернуть свой объект. - person Anik Islam Abhi; 14.01.2016