object doesn't support property or method getUserData

Question

LoginController.js

var MyApp = angular.module('MyApp', []);
    MyApp.controller("LoginController",
            ["$scope", "$rootScope",
            function ($scope , dataService) {

            $scope.user = "sample";

            $scope.checkUser = function () {
                dataService.getUserData($scope.user).then(
                        function (results) {
                            $scope.userLoginInfo = results.userInfo;
                        },
                        function (results) {
                            $rootScope.showAlert(results, "There is a problem when trying to get user details.");
                        });
            };

        }]);

My DataService.js

MyApp.factory("dataService",
    ["$http", "$rootScope", "$q",
    function ($http, $rootScope,$q) {

        var dataService = {};

        var getUserData = function (username) {

            var promise = $http.get(baseUrl()+"/Controllers/UserDetails/?username=" + username)
                .success(function (data, status, headers, config) {
                return data;
                })
                .error(function (data, status, headers, config) {
                    return data;
                });

            return promise;

        }

        return {
            getUserData: getUserData
        }

    }]);

i have included all .js files via bundleconfig .on calling dataService.getUserData in login controller , the described error occurs.

following is the stack trace

"TypeError: Object doesn't support property or method 'getUserData'\n   at $scope.checkUser (http://localhost:58949/app/Controllers/LoginController.js:41:9)
 at fn (Function code:2:195)\n   at expensiveCheckFn (http://localhost:58949/Scripts/angular.js:16123:11)\n   at callback (http://localhost:58949/Scripts/angular.js:26490:17)\n   at Scope.prototype.$eval (http://localhost:58949/Scripts/angular.js:17913:9)\n   at Scope.prototype.$apply (http://localhost:58949/Scripts/angular.js:18013:13)\n   at Anonymous function (http://localhost:58949/Scripts/angular.js:26495:17)\n   at n.event.dispatch (http://localhost:58949/Scripts/jquery-2.2.3.min.js:3:7481)\n   at r.handle (http://localhost:58949/Scripts/jquery-2.2.3.min.js:3:5547)"

any help is greatly appreciated

Answer 1

You have not injected dataService so in your scenario instead of accessing "dataService" it is accesing "$rootScope" try this :

// controller

var MyApp = angular.module('MyApp', []);
MyApp.controller("LoginController", ["$scope", "$rootScope", "dataService",
    function($scope, $rootScope, dataService) {
        $scope.user = "sample";

        $scope.checkUser = function() {
            dataService.getUserData($scope.user).then(
                function(results) {
                    $scope.userLoginInfo = results.userInfo;
                },
                function(results) {
                    $rootScope.showAlert(results, "There is a problem when trying to get user details.");
                });
        };

    }
]);

Also in your service

following line /Controllers/UserDetails/?username= seems to be incorrect, We pass query parameter in following way :

// "/Controllers/UserDetails?username="

// Service
MyApp.factory("dataService", ["$http", "$rootScope", "$q",
    function($http, $rootScope, $q) {

        var dataService = {};

        var getUserData = function(username) {

            var promise = $http.get(baseUrl() + "/Controllers/UserDetails?username=" + username)
                .success(function(data, status, headers, config) {
                    return data;
                })
                .error(function(data, status, headers, config) {
                    return data;
                });

            return promise;

        }

        return {
            getUserData: getUserData
        }

    }
]);