title: stuck in Error: [$injector:unpr] Unknown provider
body: <p>Basically, I want to do a user authentication before login. Thus, i create a authentication factory and user login controller to achieve my goal. However, A Error is thrown when a factory is injected into a controller. I have no idea where cause this error in my program. Can anyone give me a hint?</p>
  
  <p><a href="https://i.stack.imgur.com/4eZ1Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4eZ1Z.png" alt="enter image description here"></a></p>
  
  <p>My facotry:</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .factory('AuthenticationService', AuthenticationService);
  
      AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService'];
      function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService) {
          var service = {};
  
          service.Login = Login;
          service.SetCredentials = SetCredentials;
          service.ClearCredentials = ClearCredentials;
  
          return service;
  
          function Login(username, password, callback) {
  
  
              $http.post('/api/authenticate', { username: username, password: password })
                 .success(function (response) {
  
                      // actually calling SetCredentials in logincontroller
                     callback(response);
                 });
  
          }
  
          function SetCredentials(username, password) {
              var authdata = Base64.encode(username + ':' + password);
  
              $rootScope.globals = {
                  currentUser: {
                      username: username,
                      authdata: authdata
                  }
              };
  
              $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line
              $cookieStore.put('globals', $rootScope.globals);
          }
  
          function ClearCredentials() {
              $rootScope.globals = {};
              $cookieStore.remove('globals');
              $http.defaults.headers.common.Authorization = 'Basic';
          }
      }
  
      // Base64 encoding service used by AuthenticationService
      var Base64 = {
              // encode and decode
              // ignore detail this time
         }
  
  })();
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .controller('LoginController', LoginController);
  
      LoginController.$inject = ['$location', 'AuthenticationService'];
      function LoginController($location, AuthenticationService) {
          var vm = this;
  
          vm.login = login;
  
          (function initController() {
              // reset login status
              AuthenticationService.ClearCredentials();
          })();
  
          function login() {
              vm.dataLoading = true;
  
              AuthenticationService.Login(vm.username, vm.password, function (response) {
                  if (response) {
                      AuthenticationService.SetCredentials(vm.username, vm.password);
                      $location.path('/');
                  } else {
                      console.log('Fail to log in');
                      vm.dataLoading = false;
                  }
              });
          };
      }
  
  })();
  </code></pre>