服務未定義時，注入控制器

Question

我有一個控制器，我已經注入了一個工廠，但它返回時未定義，當我調用該工廠的方法。不知道我在這裏做錯了什麼。任何幫助，將不勝感激。

廠：

(function(){ 
    'use strict'; 

    // Declare factory and add it 'HomeAutomation' namespace. 
    angular.module('HomeAutomation').factory('AuthenticationService', ['$http','$localStorage', '$window', function($http, $localStorage, $window){ 
    var service = {}; 


    service.login = Login; 
    service.logout = Logout; 
    service.parseJWT = parseJWT; 
    service.loginStatus = loginStatus; 

    return service; 


    function Login(email, password, callback){ 
     $http.post('api/user/login', {email: email, password: password}) 
      .success(function(res){ 
       // Login successful if there is a token in the response. 
       if(res.token){ 
        // store username and token in local storage to keep user logged in between page refreshes 
        $localStorage.currentUser = { email: email, token: res.token }; 

        // add jwt token to auth header for all requests made by the $http service 
        $http.defaults.headers.common.Authorization = 'Bearer ' + res.token; 

        callback(true); 
       }else{ 
        callback(res); 
       } 
      }).error(function(err){ 
      console.log(err); 
     }); 
    } 

    function Logout(){ 
     $localStorage.currrntUser 
    } 

    function parseJWT(token){ 
     var base64URL, base64; 

     base64URL = token.split('.')[1]; 
     base64 = base64URL.replace('-', '+').replace('_', '/'); 

     console.log(JSON.parse($window.atob(base64))); 
    } 

    function loginStatus(){ 
     if($localStorage.currentUser){ 
      return true; 
     }else{ 
      return false; 
     } 
    } 
}]);}()); 

控制器：

(function(){ 
angular.module('HomeAutomation') 
    .controller('loginController', ['$scope', '$location', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){ 
     $scope.isLoggedIn = AuthenticationService.logout(); 

     $scope.logUserIn = function(){ 
      AuthenticationService.login($scope.login.email, $scope.login.password, function(result){ 
       if(result === true){ 
        $location.path('/'); 
       }else{ 
        console.log(result); 
       } 
      }); 
     }; 

     $scope.logUserOut = function(){ 
      AuthenticationService.logOut(); 
     } 
    }]);}()); 

這是導致犯錯行：

$scope.isLoggedIn = AuthenticationService.logout(); 

顯然 「的AuthenticationService」 是不確定的。不知道爲什麼。

在此先感謝。

Answer 1

你搞砸了依賴順序，你需要從控制器工廠功能中刪除$localStorage，因爲$localStorage沒有用在控制器的任何地方&沒有注入到DI數組中。

.controller('loginController', ['$scope', '$location', 'AuthenticationService', 
    function($scope, $location, AuthenticationService){ 
       //^^^^^^^^^^removed $localStorage dependency from here 

注：始終確保當你注入在DI陣列中的任何依賴，他們應該在同一個序列中使用的控制器功能

Answer 2

注射不好：

.controller('loginController', ['$scope', '$location', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){ 

試試這個：

.controller('loginController', ['$scope', '$location', '$localStorage', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){ 

我不知道你使用的建設者，但例如與Gulp，您可以使用gulp-ng-annotate，將做的工作給你，讓你可以只寫：

.controller('loginController', function($scope, $location, $localStorage, AuthenticationService){ 

沒有數組。 ng-annotate將照顧其餘。