AngularJS factory return undefined

Question

I started AngularJS programming couple weeks ago. I would like to create my first factory but I'm confused about what's happening.

factory:

var services =angular.module('services', ['ngResource']);

services.factory('UserSession',['$resource',function($resource) {
  var user = {};
  var loggedIn = false;
  var details={initstate:'for demo purpose'};

  user.authenticate = function(uname,pwd) {
    var apiauthentification = $resource('/api/authenticate');
    var tmp={
        username:uname,
        password:pwd
    };

    var auth = apiauthentification.save(tmp, function(){
        console.log(auth);
        if (auth.success){
            isLoggedIn=true;
        }
        details=auth;
    })
  };

  user.getDetails = function(){
    return details;
  };

  user.isLoggedIn = function() {
    return loggedIn;
  };


  return user;
}]);

controller:

app.controller('LoginCtrl',['$scope','$resource','$location','UserSession',function($scope,$resource,$location,UserSession){

  $scope.login = function (){
    var tmp = UserSession.authenticate($scope.username,$scope.password);
    console.log('UserSession.isLoggedIn():'+UserSession.isLoggedIn());
    console.log ('Result authenticate:'+tmp);
    console.log('UserSession.getDetails():');
    console.log(UserSession.getDetails());
  };
}]);

login.html

<h3>Login page</h3>
<form>
    <label>Username</label>
    <input class="form-control" name="username" ng-model="username" required></input>

    <label>Password</label>
    <input class="form-control" name="password" ng-model="password" required></input>

    <button ng-click="login()">
        Test login
    </button>



    <label>result</label>
    <input class="form-control" name="loginresult" ng-model="logresult"></input>

</form>

console:

UserSession.isLoggedIn():false

Result authenticate:undefined

UserSession.getDetails():

Object {initstate: "for demo purpose"}

g {success: false, msg: "Authentification failed. User not found", $promise: d, $resolved: true}

    $promise: d
    
    $resolved: true
    
    msg: "Authentification failed. User not found"
    
    success: false
    
    __proto__: g

Questions:

1- Why my tmp variable is undefined ?

2- I guess that I need to use callback function but how do I set it ?

Because there is not function like `UserSession.authenticate()`. You need to call `UserSession.user.authenticate()` — Jagrut, Dec 21 '15 at 18:01

score 0 · Accepted Answer · answered Dec 21 '15 at 18:02

1 - tmp variable is defined because you are not returning anything in your authenticate method.

2 - You can use a callback function in your authenticate method like this:

user.authenticate = function(uname, pwd, callback) {
    var apiauthentification = $resource('/api/authenticate');
    var tmp = {
        username:uname,
        password:pwd
    };

    apiauthentification.save(tmp, function (response) {
        if (response.success){
            isLoggedIn=true;
            details=auth;
            return callback({success: true});
        }
        return callback({success: false});
    });
};

Then call it this way:

UserSession.authenticate($scope.username,$scope.password, function (success) {
    // This code will be executed once authenticate method has finished
    if(success) {
        console.log('User authenticated');
    }
});

You might need to make a few adjustments to this code to fit your needs.

AngularJS factory return undefined

1 Answers1

Linked