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?

Callum Linington · Accepted Answer · 2014-11-20 08:47:59Z

 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!

@No1_Melman You don't only get more readable code, your code also works when minified with the syntax: controller('ReadOnlyController', ['$scope', 'rateRequestAPIservice', function ($scope, rateRequestAPIservice) { ... }])
@RaphaelMüller absolutely! It is also really important if you are bundling or minifying your angular code, with the likes of ASP.NET MVC which can destroy your app if you havent put in the correct dependency injection
@No1_Melman Nice additions, I think I would address my comment to Athul ;)

Collectives™ on Stack Overflow

Error in angularjs app

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related