title: Angular JS Error: $injector:nomod Module Unavailable during routing
body: <p>So, I am really new to angular JS and I'm working on a project for a company with a team from my school as an internship. I have to get the routing working first though, and it just will not work no matter what I have tried. I tried it with angular JS 1.0.7 and with that I could get it to work, but with the newest version (1.5.7) I just can't after many many hours of trying. This is the error the console currently gives me:</p>
  
  <p>Error: $injector:nomod
  Module Unavailable Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. The error originates from the  line in index.html as far as I know, since the error disappears if i remove it, but the routing doesn't work then either.</p>
  
  <p>I'd really appreciate any help with this. I know I probably missed something incredibly basic (and the code is probably pretty sloppy), but I just can't figure it out. Oh and by the way, I tried putting the content from app.js to index .html inside script tags and then it didn't give the error, but didn't display anything either, really weird. I have also tried many different ways to do routing as instructed by different tutorials or guides, but I still can't get it to work.</p>
  
  <p>Code:
  Index.html (modified so as to not give way the name of the company etc.)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
    &lt;link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet"&gt;
    &lt;link href="css/main.css" rel="stylesheet"&gt;
    &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-resource.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/ui-bootstrap-1.3.3.min.js"&gt;&lt;/script&gt; 
    &lt;script src="js/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-touch.min.js"&gt;&lt;/script&gt;
    &lt;script src="app/app.js"&gt;&lt;/script&gt;
    &lt;script src="app/ctrl.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/routing.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar navbar-default" id="navbar"&gt;
    &lt;div class="container" id="navbar-container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a href="" class="navbar-brand"&gt;
          &lt;small&gt;
            &lt;i class="glyphicon glyphicon-log-out"&gt;&lt;/i&gt;
            Products and Company Info
          &lt;/small&gt;
        &lt;/a&gt;&lt;!-- /.brand --&gt;
  
      &lt;/div&gt;&lt;!-- /.navbar-header --&gt;
      &lt;div class="navbar-header pull-right" role="navigation"&gt;
        &lt;a href="#howto" class="btn btn-sm btn-warning nav-button-margin"&gt; &lt;i class="glyphicon glyphicon-book"&gt;&lt;/i&gt;&amp;nbsp;Howto&lt;/a&gt;
        &lt;a href="#" class="btn btn-sm btn-warning nav-button-margin"&gt; &lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&amp;nbsp;Home&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
  &lt;/div&gt;&lt;!-- /.navbar --&gt;
  
  &lt;div&gt;
    &lt;div class="container"&gt;
     &lt;div ng-app="app"&gt;
      &lt;h2&gt;App name&lt;/h2&gt;
      &lt;br/&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.container --&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Code app.js: </p>
  
  <pre><code>var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
  app.run(function($rootScope) {
  
  });
  </code></pre>
  
  <p>Code ctrl.js</p>
  
  <pre><code>app.controller("mainCtrl", function($scope) {
      $scope.firstName = "first name";
      $scope.lastName = "last name";
  });
  
  app.controller('howtoCtrl', function($scope) {
      $scope.message = 'How To guide here';   
  });
  </code></pre>
  
  <p>Code routing.js:</p>
  
  <pre><code>// configure our routes
      app.config(function($routeProvider) {
          $routeProvider
  
          // route for the home page
          .when('/', {
              templateUrl : 'home.html',
              controller  : 'mainCtrl'
          })
  
          // route for the how to page
          .when('/howto', {
              templateUrl : 'howto.html',
              controller  : 'howtoCtrl'
          })
  
          // route for the test2 page
          .when('/testi2', {
              templateUrl : 'test2.html',
              controller  : 'test2Controller'
          });
      });
  </code></pre>
  
  <p>Edit: After changing ng-app="app" to ng-app="mainApp", I got the following errors</p>
  
  <p>angular.min.js:103 GET <a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html</a> 404 (Not Found)(anonymous function) @ angular.min.js:103n @ angular.min.js:98g @ angular.min.js:95(anonymous function) @ angular.min.js:130$eval @ angular.min.js:145$digest @ angular.min.js:142$apply @ angular.min.js:145(anonymous function) @ angular.min.js:20invoke @ angular.min.js:41c @ angular.min.js:20Bc @ angular.min.js:21ge @ angular.min.js:19(anonymous function) @ angular.min.js:315b @ angular.min.js:189Sf @ angular.min.js:37d @ angular.min.js:36
  angular.min.js:117 Error: [$compile:tpload] <a href="http://errors.angularjs.org/1.5.7/" rel="nofollow">http://errors.angularjs.org/1.5.7/</a>$compile/tpload?p0=home.html&amp;p1=404&amp;p2=Not%20Found
      at Error (native)
      at <a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:6:412" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:6:412</a>
      at <a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:156:281" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:156:281</a>
      at <a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:130:409" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:130:409</a>
      at m.$eval (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107</a>)
      at m.$digest (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173</a>)
      at m.$apply (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401</a>)
      at l (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250</a>)
      at K (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373</a>)
      at XMLHttpRequest.y.onload (<a href="http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397" rel="nofollow">http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397</a>)</p>
  
  <p>Final Edit:
  Thanks guys, it works now. The problem was first that ng-app="app" should have been ng-app"mainApp", and I forgot to include the folder to the address of the tempaltes in routing.js after I had originally moved the files to their own folder. </p>