injecting service into controller not working

Question

Am new to angularjs. I am trying to use angular service to post data but its throwing below error

angular.js:12520 Error: [$injector:unpr] Unknown provider: frontendServiceddProvider <- frontendServicedd <- CustSignupCtrl

service.js

app.service('frontendService', function frontendService ($http, $q, $rootScope){

        var list = this;


        list.registerCust = function(data){
            var defer = $q.defer();

            $http({
                url: $rootScope.endPoint,
                method: "POST",
                data: data
            })
            .success(function(res){
                console.log("Successfull!");
                defer.resolve(res);
            })
            .error(function(err, status){
                console.log("Failed !");
            })

            return defer.promise;
        }

        return list;

    });

customer_signup.js

app.controller('CustSignupCtrl', ['$scope', '$filter','frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
  function('$scope', '$filter','frontendService', '$http','editableOptions', 'editableThemes','notify','notification','$appConstants'){


    $scope.pw1 = '';

    $scope.registerCustomer = function (data) {
      return frontendService.registerCust(data)
    }

    $scope.signupcustomer = function(){

      var payload= {
        first_name: $scope.custForm.fname,
        last_name: $scope.custForm.lname,
        phone: $scope.custForm.phone,
        email:$scope.custForm.email,
        username:$scope.custForm.username,
        password:$scope.custForm.pw1,
        usertype:3
      }
      console.log("inside function");
      $scope.registerCustomer(payload).then(function(data){
        notification.success(data.result);
      },function(err){
        notification.error("Error: contact system admin");
      });

    }
  }  
])

I have given reference of both js files in index.html.. not getting where am doing wrong.. can anyone help

Answer 1

This can be a dependency injection mismatch sort of problem

AngularJS injects object into the function as it sees them inside []

For example if you declare a function inside your js file, say like this

var app = angular.module('app',[]);
app.controller('maincntrl',function($scope){

});
var search = function($scope,searchtext,searchfilters,searchareas)
{
   return 'result'
}

console.log(angular.injector.annotate(search));

The result you shall get in your console will be

["$scope","searchtext","searchfilters","searchareas"]

AngularJS parses the function parameters as an array

It goes through each array elements and the moment it sees "$scope", it injects scope object into that position

Now the syntax which you have used is basically used for minification

So according to your declaration

app.controller('CustSignupCtrl', ['$scope','frontendService', '$filter','frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
  function('$scope', '$filter','frontendService', '$http','editableOptions', 'editableThemes','notify','notification','$appConstants'){

});

So

$scope--> shall be injected into $scope
frontendService-->shall be injected into $filter
$filter--> shall be injected into frontendService
.
.
.
so on

Also the errors(which you mentioned in comments) are occurring because you have declared function parameters as strings in which case the dependency injection is not happening. Fixing these things shall solve your problem

Answer 2

app.controller('CustSignupCtrl', ['$scope', '$filter', 'frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
  function($scope, $filter, frontendService, $http, editableOptions, editableThemes, notify, notification, $appConstants){

    $scope.pw1 = '';
});

Whatever you inject into controller, should be in the same order. Remove quotes accross the injectables inside function.