title: Error: [ng:areq] Argument 'AuthCtrl' is not a function, got undefined
body: <p>This issue has been posted a few times but I cannot seem to find the error within my code. Can somebody help spot the issue in my code?</p>
  
  <p>Below is my app.js file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  /**
   *jslint node:true
   * @ngdoc overview
   * @name impApp
   * @description
   * # impApp
   *
   * Main module of the application.
   */
  /*global Firebase, angular*/
  
  angular
      .module('impApp', [
          'ngMessages',
          'ngResource',
          'ngRoute',
          'ngSanitize',
          'ngTouch',
          'firebase'
      ])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/main', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl',
          controllerAs: 'main'
        })
        .when('/', {
          templateUrl: 'views/login.html',
          controller: 'AuthCtrl',
          controllerAs: 'auth'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl',
          controllerAs: 'about'
        })
        .otherwise({
          redirectTo: '/'
        });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Secondly, this is my controller contents on "auth.js":</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  /*global Firebase, angular, console*/
  
  angular.module('impApp')
      // Re-usable factory that generates the $firebaseAuth instance
      .factory("Auth", function ($firebaseAuth) {
          var ref = new Firebase("https://impl.firebaseio.com");
          return $firebaseAuth(ref);
      })
      .controller('AuthCtrl', function ($scope, $http, Auth) {
      // Listens for changes in authentication state
          Auth.$onAuth(function (authData) {
              $scope.authData = authData;
          });
  
          // Logs in a user with email &amp; password
          $scope.login = function () {
              Auth.authWithPassword({
                  email    : $scope.email,
                  password : $scope.password
              }, function (error, authData) {
                  if (error) {
                      console.log("Login Failed!", error);
                  } else {
                      console.log("Authenticated successfully with payload:", authData);
                  }
              });
          };
      
  // Logs out the logged-in user
          $scope.logout = function () {
              Auth.$unauth();
          };
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Finally, I have outlined the "login.html" contents:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;div&gt;
      &lt;form class="form-signin"&gt;       
        &lt;h2 class="form-signin-heading"&gt;Please Sign In&lt;/h2&gt;
        &lt;input type="text" class="form-control" name="username" ng-model = "username" placeholder="Email Address" required="" autofocus="" /&gt;
        &lt;input type="password" class="form-control" name="password" ng-model = "password" placeholder="Password" required=""/&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="login()"&gt;Login&lt;/button&gt;   
      &lt;/form&gt;
    &lt;/div&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>