javascript - AngularJS应用程序中的错误

Question

我的代码是这样的。服务.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 之前加载服务!

您的 Controller 中也存在拼写错误:

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

您可以看到依赖项注入(inject)正在工作['$http', ...]，因此您从第一个实例(即当您第一次查看它时)就可以准确地知道您的服务需要什么。

var service = {
    getData: getData
};

return service;

这一点可以轻松地向您展示您的服务具有哪些功能。无需查看任何代码即可快速轻松地了解您的服务可以做什么!

这两项代码简化使您可以轻松地在文件顶部快速浏览一下您的服务正在尝试实现的目标!

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