AngularJs call service function from controller undefined

Question

I'm trying to call a function from my dataservice factory but it throws an error Cannot read property 'login' of undefined

Here is my dataservice factory

(function(){
  'use strict';
  // dataservice factory
 angular
.module('app')
.factory('dataservice', dataservice);

 dataservice.$inject = ['$http'];

 function dataservice($http) {

  return {
    login  : login
  }


function login(username, password, callback) {
    $http.post('/data', { username: username, password: password })
        .success(function (response) {
          console.log(response);
       });
    }  
 }
})();

Here is my controller

(function(){

'use strict';

angular
  .module('app')
  .controller('TestController', TestController);

TestController.$inject = ['dataservice'];

function TestController(dataservice) { 

  var vm = this;

  vm.login = login;



function login() {
console.log('is this called?');
    vm.loading = true;
    dataservice.login(vm.username, vm.password, function (result) {
        console.log(result);
    });
 }

 }
})();

login function it is called when i press login from view , since i get: is this called? in my console.

missing a } after function data service

Fky
– Fky

2016-09-12 12:26:38 +00:00
Commented Sep 12, 2016 at 12:26 — Fky
– Fky, Commented Sep 12, 2016 at 12:26
I checked syntax and it is ok.

trying to learn
– trying to learn

2016-09-12 12:37:39 +00:00
Commented Sep 12, 2016 at 12:37 — trying to learn
– trying to learn, Commented Sep 12, 2016 at 12:37

Rakesh Chand · Accepted Answer · 2016-09-12 12:30:25Z

3

You need to right the callback in a then block

function login() {
    console.log('is this called?');
    vm.loading = true;
    dataservice.login(vm.username, vm.password).then(function (result) {
        console.log(result);
    }, function(error){
    });
 }

This is the correct syntax.

Also you can use this service syntax

   function login(){
        var d = $q.defer();
        $http({
            method: 'POST',
            url: '/data',
            data:{
                username : username,
                password : password
            }
        }).success(function(response){
            d.resolve(response);
        }).error(function(response){
            d.reject(response);
        });
        return d.promise;
    }

edited Sep 12, 2016 at 12:30

answered Sep 12, 2016 at 12:23

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

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

5 Comments

trying to learn Over a year ago

I tried using this code but i got the same error Cannot read property 'login' of undefined , I copied your service and controller function . Unfortunately it doesn't work

Rakesh Chand Over a year ago

can you create a fiddle or plunkr, because i don't see any reason to get a error like undefined method..

Rakesh Chand Over a year ago

you are getting your service as undefined, see if it is added in index.html and defined properly?

trying to learn Over a year ago

I minify my code in a single file , and from index.html file is called login function that points to login() in controller. Until here , it is okay since i it prints my console.log line . When it should call dataservice function it throws an error. I have also tried using a simple function from dataservice , but I still get the same error Cannot read property '(function name)' of undefined

Gatsbill Over a year ago

don't use $q when $http already return a promise, just return the $http.

EternalLight · Accepted Answer · 2016-09-12 12:48:35Z

I corrected your example to more common and readable syntax. Check this fiddle to see it in action.

(function () {
    'use strict';
    // dataservice factory
    var app = angular.module('app', []);
    app.factory('dataservice', ['$http', function ($http) {

        function login(username, password, callback) {
            console.log('Login in dataservice...');
            $http.post('/data', {username: username, password: password})
                .then(function (response) {
                    console.log(response);
                }, function (error) {
                    console.warn(error);
                });
        }

        return {
            login: login
        };

    }]);

    app.controller('TestController', ['dataservice', function (dataservice) {
        var vm = this;
        vm.login = login;
        function login() {
            console.log('is this called?');
            vm.loading = true;
            dataservice.login(vm.username, vm.password, function (result) {
                console.log(result);
            });
        }
    }]);
})
();

You should pass second argument to app.module as an empty array (if you have no dependencies on other modules)
Use $http.then because .success is depricated.
Pass second argument to app.factory or app.controller as an array with a list of dependencies and the function at last. In your example, you didn't inject any dependencies because TestController.$inject = ['dataservice']; was running too late.

I do not know what was my problem , but It worked now without changes. Anyway thank you for your help!

Collectives™ on Stack Overflow

AngularJs call service function from controller undefined

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related