I keep getting angularjs service is not a function Error( LoginService.login is not a function)

Question

This is my LoginController, as you can see I have injected the LoginService, I can't seem to figure out why I am getting the error mentioned above (Note: I've made the project modular by breaking my project in separates folder, using gulp and browserify to bundle everything into one file)

'use strict';

function LoginController($scope, $ionicModal, $timeout, $location,
                         $ionicLoading, $ionicPopup, LoginService) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('js/modules/login/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  $scope.show = function() {
    $ionicLoading.show({
      template:'<p>Loading...</p><ion-spinner></ion-spinner>'
    });
  };
 $scope.hide = function(){
   $ionicLoading.hide();
 };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Start showing the progress
    $scope.show($ionicLoading);


    // Do the call to a service using $http or directly do the call here
    LoginService.login($scope.loginData).success(function(data) {
      // Do something on success for example if you are doing a login

        console.log('Login successful', data);

    }).error(function(data) {
      // Do something on error
      console.log('Login failed', data);


    }).finally(function($ionicLoading) {
      // On both cases hide the loading
      console.log('Hide');

      $scope.hide($ionicLoading);
    });
  };
}

module.exports = ['$scope', '$ionicModal', '$timeout','$location',
                  '$ionicLoading','LoginService','$ionicPopup',
                   LoginController];

This is my LoginService file, this is very weird to me because I've injected the appropriate file but yet I keep getting the error mentioned above. Any help or guidance would deeply be appreciated.

'use strict';

function LoginService($http, $q, API_ENDPOINT) {
  var BASE_URL = API_ENDPOINT.url;
  var LOCAL_TOKEN_KEY = 'yourTokenKey';
  var isAuthenticated = false;
  var authToken;


  function storeUserCredentials(token) {
    window.localStorage.setItem(LOCAL_TOKEN_KEY, token);
    useCredentials(token);
  }

  function useCredentials(token) {
    isAuthenticated = true;
    authToken = token;

    // Set the token as header for your requests!x-access-token'
    $http.defaults.headers.common.Authorization = authToken;
  }

  var login = function(user) {
    return $q(function(resolve, reject) {
      $http.post(BASE_URL + '/authenticate', user).then(function(result){
        if (result.data.success) {
          storeUserCredentials(result.data.token);
          resolve(result.data.msg);
        }else{
          reject(result.data.msg);
        }
      });
    });
  };

  return {
    login: login,
    isAuthenticated: function() {return isAuthenticated;},
  };


}

module.exports = ['$http', '$q', 'API_ENDPOINT', LoginService];

This is my login.js file in the same directory as the one posted above

'use strict';

module.exports = angular.module('login', [])
    .factory('LoginService', require('./login-service'))
    .controller('LoginController', require('./login-controller'));

Where do you declare your controller and service? ('moduleName.controller(...)' and moduleName.service(...)) — Yaniv Efraim, Apr 17 '16 at 04:02
I've made the project moduler by breaking my project in separates folder, using gulp and browserify to bundle everything into one file — user2551612, Apr 17 '16 at 04:30
I have another file in the same directory as the one mention above called login.js ------ 'use strict'; module.exports = angular.module('login', []) .factory('LoginService', require('./login-service')) .controller('LoginController', require('./login-controller')); — user2551612, Apr 17 '16 at 04:31
Factory should be initialized with 'new'. If you want to use it this way you should use a service instead. — Yaniv Efraim, Apr 17 '16 at 04:32
No, I tried changing it to a service, but I am still getting the same error. Also I still don't understand the difference between a factory and a service. They look the same in term of syntax — user2551612, Apr 17 '16 at 05:57
I understand that a factory returns the function return value, and a Service returns the actual function. I think I understand why you wanted me to use the service instead of factory.. — user2551612, Apr 17 '16 at 06:12
Solved the problem thanks to this and thanks a lot for the help. post http://stackoverflow.com/questions/31631698/error-occurs-on-submit-typeerror-dataservice-login-is-not-a-function — user2551612, Apr 17 '16 at 08:42

score 1 · Answer 1 · answered Apr 17 '16 at 05:09

You should first do require and then only define the service. Since you are directly passing require in the .factory('LoginServie, require()` the service name is getting registered but its body is empty.

I've not worked much with require but here is you can try:

require('./login-service');

module.exports = angular.module('login', [])
    // Make this code synchornous that this should only run when above require loaded the script
    .factory('LoginService', LoginService)
    .controller('LoginController', require('./login-controller'));

Or (probably)

require('./login-service', function() {
    module.exports = angular.module('login', [])
        .factory('LoginService', LoginService)
        .controller('LoginController', require('./login-controller'));
})

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

When using a factory you are getting the actual class, and you need to instantiate it. When using a service you get an instance of the service. Take a look at the following example: AngularJS : Factory and Service?

edited May 23 '17 at 12:07

Community

1
1

answered Apr 17 '16 at 06:46

Yaniv Efraim

6,633
7
53
96

I understand that, but I tried changing ".factory" to a ".service" instead but I keep getting the same error. – user2551612 Apr 17 '16 at 07:41
Solved the problem thanks to this and thanks a lot for the help. post http://stackoverflow.com/questions/31631698/error-occurs-on-submit-typeerror-dataservice-login-is-not-a-function – user2551612 Apr 17 '16 at 08:42

I keep getting angularjs service is not a function Error( LoginService.login is not a function)

2 Answers2