title: AngularJS - Uncaught Error: [$injector:modulerr] Failed to instantiate module
body: <p>I am learning Angular and have am receiving the cryptic and mysterious "AngularJS - Uncaught Error: [$injector:modulerr]" in my console when viewing index.html, which I will post below (as well as the Angular JS files being referenced.)  </p>
  
  <p>Can someone please tell me what I'm doing wrong?  The error message is so vague...</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;meta char-set="UTF-8"&gt;
      &lt;!--FOR ANGULAR ROUTING--&gt;
      &lt;base href="/"&gt;
      &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-resource.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/controllers/mainCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="app/services/authService.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/app.routes.js"&gt;&lt;/script&gt;
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="userApp" ng-controller="mainController as main"&gt;
  
      &lt;header&gt;
          &lt;ul&gt;
              &lt;li ng-if="!main.loggedIn"&gt;
                  &lt;a href="/login"&gt;Login!&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li ng-if="main.loggedIn"&gt;
                  Hello, {{main.user.name}}
              &lt;/li&gt;
  
              &lt;li ng-if="main.loggedIn"&gt;
                  &lt;a href="#" ng-click="main.doLogout()"&gt;Logout&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;
  
      &lt;main&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/main&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('userApp', [
  'app.routes',
  'authService',
  'mainCtrl'
  ]);
  </code></pre>
  
  <p><strong>app.routes.js</strong></p>
  
  <pre><code>angular.module('app.routes', ['ngRoute'])
  
  .config(function($routeProvider, $locationProvider) {
  
      $routeProvider
      .when('/', {
          templateUrl: 'app/views/pages/home.html'
      })
  
      .when('/login', {
          templateUrl: 'app/views/pages/login.html',
          controller: 'mainController',
          controllerAs: 'login'
      });
  
      $locationProvider.html5mode(true);
  });
  </code></pre>
  
  <p><strong>authService.js</strong></p>
  
  <pre><code>angular.module('authService', ['ngStorage'])
  
  .factory('Auth', function($http, AuthToken) {
  
  var authFactory = {};
  
  //Login
  authFactory.login = function(username, password) {
      return $http.post('/login', {
          username: username,
          password: password
      })
      .success(function(data){
          AuthToken.setToken(data.token);
          return data;
      });
  };
  
  //Logout
  authFactory.logout = function() {
      AuthToken.setToken();
  };
  
  //Check if user is logged in.
  authFactory.isLoggedIn = function() {
      if (AuthToken.getToken())
          return true
      else
          return false
  };
  
  authFactory.getUser = function() {
  
      if (AuthToken.getToken())
          return $http.get('/api/users/me', { cache: true });
      else
          return $q.reject({ message: 'User has no token' });
  };
  
  return authFactory;
  
  })
  
  .factory('AuthToken', function($window) {
  
  var authTokenFactory = {};
  
  //Get auth token
  authTokenFactory.getToken = function() {
      return $window.localStorage.getItem('token');
  };
  
  //Set or clear auth token
  authTokenFactory.setToken = function(token) {
      if (token) {
          $window.localStorage.setItem('token', token);
      };
  };
  
  return authTokenFactory;
  
  })
  
  .factory('AuthInterceptor', function($q, $location, Auth) {
  
      //Add token to all requests.
  
      var authInterceptorFactory = {};
  
      authInterceptorFactory.request = function(config) {
  
          var token = Auth.getToken();
  
          if (token) {
              config.headers['x-access-token'] = token;
          };
  
          return config;
  
      };
  
      authInterceptorFactory.responseError = function(response) {
  
          if (response.status == 403) {
              AuthToken.setToken();
              $location.path('/login');
          };
  
          return $q.reject(response);
      };
  
      return authInterceptorFactory;
  
  });
  </code></pre>
  
  <p><strong>mainCtrl.js</strong></p>
  
  <pre><code>angular.module('mainCtrl', [])
  
   .controller('mainController', function($rootScope, $location, Auth) {
  
     var vm = this;
  
     // get info if a person is logged in
     vm.loggedIn = Auth.isLoggedIn();
  
     // check to see if a user is logged in on every request
     $rootScope.$on('$routeChangeStart', function() {
       vm.loggedIn = Auth.isLoggedIn();
  
       // get user information on route change
       Auth.getUser()
         .success(function(data) {
           vm.user = data;
         });
     });  
  
     // function to handle login form
     vm.doLogin = function() {
  
       // call the Auth.login() function
       Auth.login(vm.loginData.username, vm.loginData.password)
         .success(function(data) {
  
           // if a user successfully logs in, redirect to users page
           $location.path('/users');
         });
     };
  
     // function to handle logging out
     vm.doLogout = function() {
       Auth.logout();
       // reset all user info
       vm.user = {};
       $location.path('/login');
     };
  
   });
  </code></pre>