Question

我的代码是这样的。 Services.js

    angular.module('RateRequestApp.services', []).
  factory('rateRequestAPIservice', function($http) {

      var rateRequestApi = {};

      rateRequestApi.getData = function () {
      return $http({
        method: 'Get', 
        url: '../services/getratesws.aspx?fn=parcellookupData'
      });
    }

      return rateRequestApi;
  });

Controller.js

  angular.module('RateRequestApp.controllers', []).
  controller('ReadOnlyController', function ($scope, rateRequestApIservice) {

      $scope.rateData = [];

      rateRequestApIservice.getDrivers().success(function (response) {
          //Dig into the responde to get the relevant data
          $scope.rateData = response;
      });
  });

App.js

    angular.module('RateRequestApp', [
  'RateRequestApp.controllers',
  'RateRequestApp.services'
]);

以HTML格式

    <script src="scripts/Angular/App.js"></script>
<script src="scripts/Angular/Services.js"></script>
<script src="scripts/Angular/Controllers.js"></script>

一切看起来都不错。但是我收到了像

这样的错误

Error: [$injector:unpr] Unknown provider: rateRequestApIserviceProvider <- rateRequestApIservice

任何人都可以指出我做错了吗？

Answer 1

 angular.module('RateRequestApp', [
    'RateRequestApp.services',
    'RateRequestApp.controllers'   
]);

您需要在app.js中的控制器之前加载服务！

您的控制器中还存在拼写错误：

controller('ReadOnlyController', function ($scope, rateRequestApIservice) {
rateRequestApIservice <-- wrong

您可能想要一个更简单的名字！

rateRequestApIservice.getDrivers()

上述功能在您的服务中不存在！

只需记下您的代码，我建议您安排以下服务，以便在您稍后再回来时帮助您了解该服务。

angular.module('rateRequestApp.services', []).
    factory('rateRequestService', ['$http', rateRequestService]);

function rateRequestService($http) {
    var service = {
        getData: getData
    };

    return service;

    function getData() {
        return $http({
            method: 'Get', 
            url: '../services/getratesws.aspx?fn=parcellookupData'
        });
    }
}

所以我会一点一点地讨论原因。

angular.module('rateRequestApp.services', []).
    factory('rateRequestService', ['$http', rateRequestService]);

您可以看到依赖注入工作['$http', ...]，因此您可以确切地知道您的服务需要从第一个实例开始 - 例如，当您第一次看到它时。

var service = {
    getData: getData
};

return service;

这一点很容易向您显示您的服务具有哪些功能。它可以快速，轻松地解读您的服务可以做什么，而无需查看任何代码！

这两段代码简化使您可以通过快速浏览，在文件顶部快速查看您的服务正在尝试实现的目标！

请注意我使用的命名约定，我也使用驼峰套管格式化名称。如果您可以采用一致的方法，这将防止代码中出现第二个错误！

angularjs应用程序出错

1 个答案: