title: Can't inject service in run method angularjs
body: <p>I'm just starting with AngularJS and as I was always used to work at server side I'm having some difficulties on getting things done, specially debugging code and finding out what the error might be.</p>
  
  <p>I've seen lots of people using the event $stateChangeStart to validate user authentication. I'm trying to do this, but when I try to inject my service into run method, I always get undefined service. Here is my call:</p>
  
  <pre><code>angular
      .module('module_name')
      .config(config)
      .run(function($rootScope, $state, authService) {
          $rootScope.$state = $state;
  
          $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
              if (toState.authenticate &amp;&amp; !authService.isLoggedIn()) {
                  $state.go("login");
                  event.preventDefault();
              }
          });
  
      });
  </code></pre>
  
  <p>Code:</p>
  
  <p>EDIT 1:</p>
  
  <p>Includes:</p>
  
  <pre><code>&lt;!-- Angular App Script --&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/services/authService.js"&gt;&lt;/script&gt;
  &lt;script src="js/config.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/MainCtrl.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/LoginCtrl.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>js/app.js:</p>
  
  <pre><code>(function () {
      angular.module('module_name', [
          'ui.router',
          'ui.bootstrap',
          'LocalStorageModule',
      ])
  })();
  </code></pre>
  
  <p>authService.js:</p>
  
  <pre><code>angular
      .module('module_name')
      .factory('authService', ['$http', '$q', '$rootScope','localStorageService', function ($http, $q, $rootScope, localStorageService) {
  
      var serviceBase = 'http://url';
      var authServiceFactory = {};
  
      var _authentication = {
          isAuth: false,
          userName : ""
      };
  
      var _saveRegistration = function (registration) {
  
          _logOut();
  
          return $http.post(serviceBase + 'account/register', registration).then(function (response) {
              return response;
          });
  
      };
  
      var _login = function (loginData) {
  
          var deferred = $q.defer();
  
          $http.get(serviceBase + 'account/token', { headers: { 'username': loginData.userName, 'password': loginData.password } }).success(function (response, status, headers, config) {
  
          localStorageService.set('authorizationData', { token: headers('token'), userName: loginData.userName });
  
          _authentication.isAuth = true;
          _authentication.userName = loginData.userName;
  
          deferred.resolve(response);
  
      }).error(function (err, status) {
          _logOut();
          deferred.reject(err);
      });
  
      return deferred.promise;
  
      };
  
  var _logOut = function () {
  
      localStorageService.remove('authorizationData');
  
      _authentication.isAuth = false;
      _authentication.userName = "";
  
  };
  
  var _isLoggedIn = function()
  {
      return _authentication.isAuth;
  }
  
  authServiceFactory.isLoggedIn = _isLoggedIn;
  
  return authServiceFactory;
  }]);
  </code></pre>
  
  <p>config.js:</p>
  
  <pre><code>function config($stateProvider, $urlRouterProvider, $locationProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
          .state('login', {
              url: "/",
              templateUrl: "login.html",
              controller: function($scope) {
                  $('body').addClass('gray-bg');
              },
              data: { pageTitle: 'Example view' },
              authenticate: false
          })
          .state('main', {
              url: "/main",
              templateUrl: "views/main.html",
              data: { pageTitle: 'Example view' },
              authenticate: true
          })
          .state('minor', {
              url: "/minor",
              templateUrl: "views/minor.html",
              data: { pageTitle: 'Example view' },
              authenticate: true
          });
      //$locationProvider.html5Mode(true);
  }
  angular
      .module('module_name')
      .config(config)
      .run(['$rootScope', '$state', 'authService', function ($rootScope, $state, authService) {
          $rootScope.$state = $state;
  
          $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
              if (toState.authenticate &amp;&amp; !authService.isLoggedIn()) {
                  $state.go("login");
                  event.preventDefault();
              }
      });
  
  }]);
  </code></pre>
  
  <p>I've read a little bit and saw that there is an order to inject services, providers and factories, but i can't get it to work.
  What am I doing wrong?</p>