Question

好的，我之前已经构建了服务但显然我实际上并不知道是什么让他们打勾，因为我似乎无法调试这个超简单的服务调用：

app.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，我正在工作。所以Angular正在加载。

我在控制台中看到了这一点：我是dataService，我已加载，因此实际上正在加载dataService。

但是console.log是：

未定义（第8行）

TypeError：dataService.getData不是函数（第9行）

我错过了什么？

Answer 1

您缺少函数中的第二个参数$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 2

我们错过了第二个参数'$ http'的功能。只需添加'$ http'参数，它应该可以正常工作

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 3

之前的答案是正确的，因为您的$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;
  };
}

Angular服务非常简单，只是一个对象类。它也是一个单例，这意味着它每次运行时只会实例化一次。当服务实例化时，它非常类似于在new＆＃34;类＆＃34;上调用dataService运算符：

var $dataService = new dataService();

因此，当您将dataService注入您的控制器时，您实际上正在获取$dataService＆＃34;类＆＃34;的实例dataService。

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

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

写一个简单的Angular服务

5 个答案: