Unknown Service Provider in AngularJS App

Question

In my angularJS app, I have configured my app like below. I have defined a module services to define all of my factory methods.

angular.module("services", []);
var app = angular
  .module('myApp', [
    'services'
  ]);

In another file, I have defined a factory in services module, but when I run the app I get following error:

Unknown provider: myServicesProvider <- myServices <- myCtrl

angular.module('services').factory('myServices', function ($http) {
  return {
    createPet(pet) {
      return $http.post('/pets', pet);
    }

  };
});

angular.module('myApp')
  .controller('myCtrl', myServices) {

  });

I checked lots of posts in stackoverflow and I think I have done the definitions in a right way. Anyone has a clue?

Answer 1

You have misplaced parenthesis in your factory,

Here is the working Code:

angular.module("services", []);
var app = angular
  .module('myApp', [
    'services'
  ]);

app.controller('mainController', function($scope, myServices){ 
    $scope.items = myServices.query();
    $scope.bill = {};
    $scope.totalBeforeDiscount = {};
    $scope.totalPrice = function(){
        var total = 0;
        for (var i = 0; i <= $scope.items.length - 1; i++) {
            total +=   $scope.items[i].price * $scope.items[i].quantity;
        }
        $scope.totalBeforeDiscount =total;
    }
})

angular.module('services').factory('myServices', function ($http) {
 var items = {};
   return {
     query: function() {
       return [{
         title: 'Paint pots',
         quantity: 8,
         price: 3.95
       }, {
         title: 'Polka dots',
         quantity: 17,
         price: 12.95
       }, {
         title: 'Pebbles',
         quantity: 5,
         price: 6.95
       }];
     }
   }    

});

Working Application