title: AngularJS 0x800a139e - JavaScript runtime error: [$injector:modulerr]
body: <p>I am attempting to use routing to load a few views using Angular, but keep getting the error: 0x800a139e - JavaScript runtime error: [$injector:modulerr] from angular.minl.js. </p>
  
  <p>I am also using a bootstrap template to run testing. My directory structure is as follows:</p>
  
  <pre><code>assets
    images
    multimedia
  css
    bootstrap.min.css
    jumbotron.css
  js
    controllers
    directives
    libs
      angular-route.min.js
      angular.min.js
      bootstrap.min.js
      jquery-2.1.0.min.js
    services
  app.js
  views
    home.html
    categories.html
  index.html
  </code></pre>
  
  <p>Here is my test HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" data-ng-app="pfcModule"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;link rel="shortcut icon" href="../../assets/ico/favicon.ico"&gt;
  &lt;title&gt;Jumbotron Template for Bootstrap&lt;/title&gt;
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;!-- Custom styles for this template --&gt;
  &lt;link href="css/jumbotron.css" rel="stylesheet"&gt;
  &lt;!-- Just for debugging purposes. Don't actually copy this line! --&gt;
  &lt;!--[if lt IE 9]&gt;&lt;script src="../../assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]     --&gt;
  &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  &lt;!--[if lt IE 9]&gt;
    &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
    &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;form class="navbar-form navbar-right" role="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" placeholder="Email" class="form-control"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="password" placeholder="Password" class="form-control"&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-success"&gt;Sign in&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;&lt;!--/.navbar-collapse --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-ng-view&gt;&lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;hr&gt;
      &lt;footer&gt;
          &lt;p&gt;&amp;copy; Company 2014&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt; &lt;!-- /container --&gt;
  
  ================================================== --&gt;
  &lt;!-- Placed at the end of the document so the pages load faster --&gt;
  &lt;script src="js/libs/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/libs/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/libs/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/libs/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And here is my route provider in app.js. The partials are stored in a directory named "views". I don't have any controllers yet, as I want to test routing first:</p>
  
  <pre><code>var pfcModule = angular.module('pfcModule', []);
  
  pfcModule.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.
      when('/home', { templateUrl: './views/home.html'}).
      when('/categories', { templateUrl: './views/categories.html' }).
      otherwise({ redirectTo: '/home' });
  }]);
  </code></pre>