Angular JS service dependency injection error

Question

I am new to angular I have been trying to do asynchronous validation for username availability and I am getting "Cannot read property 'userName' of undefined" Here is my service code

webAppServices.factory('services', ['$resource',
function ($resource){
    return{
        users: $resource('http://localhost:8080/api/users',{},{
            get:{method:'GET',isArray:true},
            add:{method:'POST',isArray:false},
            update:{method:'POST',isArray:false}
        }),

       userName:$resource('http://localhost:8080/api/users/check/:username',{},{
            check:{method:'GET',isArray:false}
        })
    };}]);

Here is my directive code which passes username for validation

webAppValidation.directive('checkUsername', ['services',
function ($q, services) {
    return {
        require: "ngModel",
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$asyncValidators.checkUsername = function(modelValue, viewValue){
               //check username
                return ctrl.$isEmpty(modelValue) || services.userName.check({username:modelValue}).
                        then(function resolved(){
                            //username exists, this means validation fails
                            return $q.reject('exists');
                        }, function rejected(){
                            //username does not exists, therefore this validation passes
                            return true;
                        });
            };
        }
    };
}]);

And this is what I am getting in Console

TypeError: Cannot read property 'userName' of undefined
at link.ctrl.$asyncValidators.checkUsername (validations.js:56)
at angular.js:24723
at forEach (angular.js:350)
at processAsyncValidators (angular.js:24722)
at NgModelController.$$runValidators (angular.js:24681)
at NgModelController.$$parseAndValidate (angular.js:24819)
at NgModelController.$commitViewValue (angular.js:24787)
at angular.js:24920
at Scope.$get.Scope.$eval (angular.js:15719)
at Scope.$get.Scope.$apply (angular.js:15818)

Answer 1

You are not injecting the $q service.

webAppValidation.directive('checkUsername', ['$q','services', ...

I would write it like this

webAppServices.factory('usersService', ['$q','$http',

  var endPoint = 'http://localhost:8080/api/user';

  function ($q, $http){
    var _getUsers = function(){
       var deffered = $q.defer();

       $http.get(endpoint)
            .then(
              function(data){ deffered.resolve(data);}),
              function(data){ deffered.reject(data);})
            ).catch(function(error){  $q.reject(error);});

       deffered.promise;

 }
 //...
 //the other methods
 //...
    return{
       getUsers: _getUsers
       //...
    }
;}]);

Although $http returns a promise, is better to return with $q a thenable object to follow the specifications of promises, so the users of your services didnt be confused seeing then ... undefined