Error in angularjs app

Question

My code is like this. 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'
]);

And in HTML

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

Everything looks okay to me. But I gets an error like

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

Can any one point out what I am doing wrong?

Answer 1

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

You needed to have the services loaded before the controllers in your app.js!

There is also a spelling error in your controller:

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

You may want a simpler name!

rateRequestApIservice.getDrivers()

The above function doesn't exist in your service!

Just a note on your code , I suggest organising your service like below to help you understand the service when you come back to it later on.

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

So bit by bit I will discuss why.

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

You can see the dependency injection working ['$http', ...] so you know exactly what your service needs from the first instance - i.e. when you first look at it.

var service = {
    getData: getData
};

return service;

This bit easily shows you what functions your service has. Its so quick and easy to decipher what your service can do, without seeing any code!

These two bits of code simplification makes it really easy for you to see from a quick glance, at the top of your file, what it is your service is trying to achieve!

Please also note the naming conventions I'm using, I use camel casing to format names as well. If you can pick up a consistent approach this will prevent the second error in your code!