写一个简单的角度服务

Question

OK，我已经建立了服务之前，但很明显，我真的不知道是什么使他们打勾，因为我似乎无法调试这个超简单的服务电话：

应用。 JS：

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope, dataService) { 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

dataService.js：

(function() { 
'use strict'; 

angular 
    .module('gridApp') 
    .service('dataService', dataService) 

dataService.$inject = []; 

function dataService() { 

    console.log("I am the dataService and I am loaded"); 

    var foo = 1; 

    function getData() { 
     return 2; 
    } 

} 
})();   

我看到这个屏幕：我是角和我的工作。所以Angular正在加载。

我在控制台中看到这个：我是dataService，我加载了，所以dataService实际上正在加载。

但随后的console.log是：

未定义（8号线）

类型错误：dataService.getData不是一个函数（9号线）

我在想什么？

Answer 1

以前的答案是，你的$http注射错了是正确的，但你也不能连接您的服务功能的服务：

function dataService() { 
    var dataService = this; //get a reference to the service 

    //attach your functions and variables to the service reference 
    dataService.foo = 1; 
    dataService.getData = function() { 
    return 2; 
    }; 
} 

一个角度服务是一个非常简单的对象类。这也是一个单例，意味着它在每次运行应用程序时仅实例化一次。当服务被实例化是非常类似于调用new操作上的dataService“类”：

var $dataService = new dataService(); 

所以，当你注入dataService到控制器中，你实际上得到一个实例，$dataService，你dataService“class”。

见进一步阅读此博客条目：https://tylermcginnis.com/angularjs-factory-vs-service-vs-provider-5f426cfe6b8c#.sneoo52nk

Answer 2

您在函数中缺少第二个参数$http。命名参数和函数中的实际参数需要是相同的，相同的顺序和相同的编号。之前发生的事情是，dataService被分配了$http实例，并且实际的dataService根本没有被注入，因为没有第三个参数注入它。

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope, $http, dataService) { 
// ----was missing-----^ 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

Answer 3

我们错过了第二个参数'$ http'的函数。只需添加“$ HTTP” PARAM，它应该工作的罚款

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope,$http, dataService) { 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

Answer 4

这是我怎么被教导要建立服务：

function dataService() { 
    var dataService = {}; 
    var _foo = 1; 
    var _getData = function() { return 2; } 

    dataService.foo = _foo; 
    dataService.getData = _getData; 

    return dataService; 
} 

我相信这有利于公共/私有方法/瓦尔。

Answer 5

以供参考，这是完整的代码访问我的服务：

app.js：

var gridApp = angular.module('gridApp', []); 

// create the controller and inject Angular's $scope 
gridApp.controller('mainController', ['$scope', 'dataService', function($scope, dataService) { 

    // create a message to display in our view 
    $scope.message = 'Angular is working'; 

    var init = function(){ 
     getPackageData(); 
    }; 

    var getPackageData = function(){ 
     return dataService.getData().then(
      function successCallback(response) { 
       console.log(response); 
      }, 
      function errorCallback(response) { 
       console.log(response); 
      } 
     ); 
    }; 

    init(); 

}]); 

dataService.js：

(function() { 
'use strict'; 

angular 
    .module('gridApp') 
    .service('dataService', dataService) 

dataService.$inject = ['$http']; 

function dataService($http) { 

    var dataService = {}; 

    var _getData = function() { 
     return $http({ 
      method: 'GET', 
      url: 'data/packages.json' 
     }) 
     .then(function successCallback(response) { 
      return response; 
     }, 
      function errorCallback(response) { 
      return response; 
     }); 
    } 

    dataService.getData = _getData; 

    return dataService; 
} 
})();