服务注入到具有 AngularJS 单独文件的控制器中

Question

当我尝试将服务注入我在下面代码中提到的单独文件中的控制器时，出现错误：

TypeError: myService.getData is not a function at new (controllers.js:18) at Object.e [as invoke] (angular.min.js:39) at M.instance (angular.min.js:80) at D (angular.min.js:61) at g (angular.min.js:55) at g (angular.min.js:55) at angular.min.js:54 at angular.min.js:20 at r.$eval (angular.min.js:133) at r.$apply (angular.min.js:134)

index.html

加载此 html 页面中的所有 js 文件

<!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']);

service.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");
    });
  }
});

controllers.js

此文件包含所有逻辑并从 service.js 文件注入 myService。我使用来自 service.js 的 myService 并尝试获取数据，但我一直遇到错误

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

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

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

   myService.getData(function(dataResponse) {

          $scope.surveys = dataResponse;

});

}]);

Answer 1

你的服务模块声明有问题。

您在未声明的情况下获取模块名称。

这样试试

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

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

用这个绑定你的方法

像这样

this.getData =function (callbackFunc) {}

服务注入到具有 AngularJS 单独文件的控制器中

Service injection into controller having in seperate files with AngularJS

angularjs

angular-services

angular-controller

index.html

myApp.js

service.js

controllers.js