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

时间:2016-01-14 07:26:03

标签: angularjs angular-services angular-controller

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

  

TypeError:myService.getData不是函数       at new(controllers.js:18)       at Object.e [as invoke](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       at r。$ eval(angular.min.js:133)       在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;

});

}]);

1 个答案:

答案 0 :(得分:1)

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

您正在获取模块名称而未声明它。

试试这个

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

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

使用此

绑定您的方法

喜欢这个

this.getData =function (callbackFunc) {}