How to use angular services with controllers

Question

I'm new to angular and I've been told that it's better to make services do the heavy lifting for the controllers, but I'm finding it diffcult to make use of the services I've created. I've seen several questions on this but I can't find solutions.

Here's my service

(function () {
  'use strict';

var office = angular.module('Office', []);

office.factory('auth', ['$http', '$localForage', '$scope', function ($http, $localForage, $scope) {

    var auth = {}

    auth.login = function (credentials) {
        $http.post('/auth_api/login', credentials)
            .then(function (data) {
                    $localForage.setItem('user', data.data)
                },
                function () {
                    $scope.login_error = 'Invalid Username/password'
                })
    }

    $localForage.getItem('user').then(function (data) {
        auth.isAuthenticated = !!data.id
    })

    return auth
}])

And here's my controller

office.controller('LoginController', ['$scope', 'auth', function ($scope, auth) {

    $scope.login = auth.login($scope.user)
}])

Answer 1

I have created a simpler version from your code.. and its working here . check the link - fiddle

app.factory('auth', ['$http', function ($http) {
    var auth = {};
    auth.login = function (credentials) {
      return "success";
    }
    return auth;
}]);

replace login function with your implemenation

Answer 2

Your code is correct but as you are not returning anything from the "auth" factory, you are not getting any update in the controller. Change your code as shown below to return the data from factory or any message acknowledging the login.

Factory :

 (function () {
  'use strict';

   var office = angular.module('Office', []);

   office.factory('auth', ['$http', '$localForage', '$scope', function ($http, $localForage, $scope) {

   var auth = {}

   auth.login = function (credentials) {
    return $http.post('/auth_api/login', credentials)
        .then(function (data) {
                $localForage.setItem('user', data.data);
                setAuthentication(true);
                return data.data; 
            },
            function (err) {
                return err;
            });
   }

   auth.setAuthentication = function (isLoggedIn){
     this.isAuthenticated = isLoggedIn;
   }

   return auth;
 }]);

Controller :

office.controller('LoginController', ['$scope', 'auth', function ($scope, auth) {
      $scope.login = function (){
       auth.login($scope.user).then(function (data){
         $scope.userDetails = data;
       }, function (err){
         $scope.loginError = 'Invalid Username/password';
       });
      }
}]);