AngularJS pass parameter from Controller to Service

Question

I don't know how to pass data from the controller to the service as method arguments... I need to set in the controller the headers variable which is later added to the service which adds this later on to the http call

controller

angular.module('userControllers', []).
    controller('userController', ['$scope', '$q', 'Users', '$location',
        function($scope, $q, Users, $location) {

            $scope.viewUser = function(userId) {
                $location.path('/users/'+userId);
            };

            $scope.createUser = function () {
                $location.path('/users/create');
            };

            headers = {service:'json',resource:'users'};
            $scope.users = Users.query(headers);
            $scope.users.$promise.then(function(result){
                $scope.users = result;
            });

        }]);

service

angular.module('userServices', ['ngResource']).
    factory('Users', ['$resource', '$q', function($resource, $q){
        var factory = {
            query: function (headerParams) {
                var data = $resource('http://localhost:8080/gateway', {}, {
                    query: {
                        method: 'GET',
                        isArray: true,
                        headers: headerParams
                    }
                });
                var deferred = $q.defer();
                deferred.resolve(data);
                return deferred.promise;
            }
        }
        return factory;
    }]);

In this setup I'm getting Error: [$injector:unpr] Unknown provider: UserProvider <- User ... not really sure how to fix this one out ...

Later edit : code cleanup... posted full code and new error

TypeError: Cannot read property 'then' of undefined
at new <anonymous> (http://localhost/frontend-pdi-angular-js/js/controllers/users.js:16:38)
at invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3918:17)
at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3929:23)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:7216:28
at link (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js:913:26)
at nodeLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6648:13)
at compositeLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6039:13)
at publicLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:5934:30)
at boundTranscludeFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6059:21)
at controllersBoundTransclude (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6669:18) <div ng-view="" class="ng-scope">

Later edit #2 : some working code, but using no ngResource whatsoever

angular.module('userControllers', ['userServices']).
    controller('userController',
        ['$scope', '$q', 'Users', '$location', '$http',
            function($scope, $q, Users, $location, $http) {
                headerParams = {service:'json',resource:'users'};
                $scope.users = $http({method: 'GET', url: 'http://localhost:8080/gateway', headers: headerParams, isArray:true}).
                    success(function(data, status, headers, config) {
                        $scope.users = data;
                        console.log(data);
                    }).
                    error(function(data, status, headers, config) {
                        console.log(status);
                    });
            }]);

What is User which you have defined in the controller definition? can you show that service code as well — V31
– V31, Commented Aug 31, 2014 at 12:29
oops... forgot to remove that from the controller ... i'll need to edit the question a bit because I'm getting another error TypeError: Cannot read property 'then' of undefined (when reaching the line with $scope.users.$promise.then(...) — cristi _b
– cristi _b, Commented Aug 31, 2014 at 12:33
checking if this is a possible solution stackoverflow.com/questions/24788171/… — cristi _b
– cristi _b, Commented Aug 31, 2014 at 12:37
Instead of $scope.users.$promise.then try to use $scope.users.then — V31
– V31, Commented Aug 31, 2014 at 12:40

sma · Accepted Answer · 2014-08-31 13:01:27Z

1

As others mentioned, you are using a non-existent reference to a provider ($promise) in your code. By simply setting the deferred to $scope.users and then acting on the 'then' of that deferred, you can solve this problem.

You can also simplify it a bit. You are setting the deferred on the $scope object and then you're overwriting that with the resolved value of the deferred. So you can do this instead:

Users.query(headers).then(function(result){
       $scope.users = result;
});

if you want to assign the deferred to a separate variable:

var deferred = Users.query(headers);
deferred.then(function(result){
       $scope.users = result;
});

answered Aug 31, 2014 at 13:01

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cristi _b Over a year ago

$scope.users is undefined... data from my backend is coming out and worked before I needed to change the code to accept extra arguments

cristi _b Over a year ago

the view isn't populated ... not sure why... before trying these changes I saw data in the view ... if I make the request via $http .... it works ... but at least using your code I got rid of the initial error but ... another issue appeared ... maybe it's the topic of a separate question ...

sma Over a year ago

Yeah, maybe ask another question and create a fiddle that illustrates the problem.

Kalhan · Accepted Answer · 2014-08-31 13:08:41Z

0

angular.module('userControllers', ['userServices']).
controller('userController',
    ['$scope', '$q', 'Users', '$location',
        function($scope, $q, Users, $location) {
            headers = {service:'json',resource:'users'};
            Users.query(headers).then(function(result){
                $scope.users = result;
            });

        }])

angular.module('userServices', ['ngResource']).
factory('Users', ['$resource', '$q', function($resource, $q){
    var factory = {
        query: function (headerParams) {
            var data = $resource('http://localhost:8080/gateway', {}, {
                query: {
                    method: 'GET',
                    isArray: true,
                    headers: headerParams
                }
            });
            var deferred = $q.defer();
            deferred.resolve(data);
            return deferred.promise;
        }
    }
    return factory;
}]);

Try this. Your not include the userServices module into the userControllers module and you can omit $scope.users = Users.query(headers); part because if you put this this will call the query method.

answered Aug 31, 2014 at 13:08

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

1 Comment

cristi _b Over a year ago

same issue as described in other comments... I'm trying now to figure out why $scope.users is undefined ...

Mukund Kumar · Accepted Answer · 2014-08-31 14:12:09Z

0

replace controller with this code:

angular.module('userControllers', []). controller('userController', ['$scope', '$q', 'Users', '$location', function($scope, $q, Users, $location) {

        $scope.viewUser = function(userId) {
            $location.path('/users/'+userId);
        };

        $scope.createUser = function () {
            $location.path('/users/create');
        };

        headers = {service:'json',resource:'users'};
        Users.query(headers).$promise.then(function(result){
            $scope.users = result;
        });

    }]);

and factory with this code :

angular.module('userServices', ['ngResource']).
    factory('Users', ['$resource', '$q', function($resource, $q){
        var factory = {
            query: function (headerParams) {

                      return $resource('http://localhost:8080/gateway', {}, {
                    query: {
                        method: 'GET',
                        isArray: true,
                        headers: headerParams
                    }
                })


            }
        }
        return {
         query: factory.query
        }
    }]);

i think this will help you.

edited Aug 31, 2014 at 14:12

answered Aug 31, 2014 at 12:45

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

7 Comments

cristi _b Over a year ago

the call works now... but no data is sent to the view ... $scope.users is undefined

Mukund Kumar Over a year ago

@ cristi _b use edited code. i think it will work now.

cristi _b Over a year ago

TypeError: Cannot read property 'then' of undefined ... i wrote a manual $http.get(...) call and data is coming ... but I need to figure out if something is wrong on the view side... so I'll also add the view code as well

cristi _b Over a year ago

nothing wrong on view side ... updating the question with some working code

Mukund Kumar Over a year ago

@ cristi _b, could you please use my code once more.

|

Collectives™ on Stack Overflow

AngularJS pass parameter from Controller to Service

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related