title: $injector:nomod and $injector:modulerr errors when registering external modules inside an AngularJS app
body: <p>I'm starting whith Angular and I made this page which (for learning purposes) has its nav bar wrapped in an attribute directive of the nav HTML5 tag. Everything worked fine while the directive was inside the main js module, but when I move the code into a second js file, making all the changes indicated, I get the next error in the console and the nav bar never shows up:</p>
  <blockquote>
  <p>angular.js:63 Uncaught Error: [$injector:modulerr] Failed to
  instantiate module app due to:</p>
  <p>Error: [$injector:modulerr] Failed to instantiate module adminMenu due
  to:</p>
  <p>Error: [$injector:nomod] Module 'adminMenu' 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.</p>
  </blockquote>
  <p>This is my index.html file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;es&quot; ng-app=&quot;app&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Taller - Administración&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class=&quot;topmnu&quot; admin-menu&gt;&lt;/nav&gt;
      &lt;/header&gt;
  
      
      &lt;script type=&quot;application/javascript&quot; src=&quot;js/angular/angular.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;application/javascript&quot; src=&quot;js/angular/angular-route.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;application/javascript&quot; src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;application/javascript&quot; src=&quot;js/adminMenu.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is my app.js file:</p>
  <pre><code>(function(){
      var app = angular.module(&quot;app&quot;, ['adminMenu']);
  })();
  </code></pre>
  <p>And here is where I saved the directive (adminMenu.js):</p>
  <pre><code>(function(){
      var app = angular.module('adminMenu', []);
  
      app.directive(&quot;adminMenu&quot;, function(){
          return {
              restrict: 'A ',
              templateUrl: 'admin-menu.html',
              controller: function(){
                  this.selected = 1;
                  this.setSelected = function(selected){
                      this.selected = selected;
                  };
                  this.isSelected = function(testValue){
                      return testValue == this.selected;
                  };
              },
              controllerAs: 'topMnuCtrl'
          }
      });
  });
  </code></pre>
  <p>The only thing I'm left to say is that I've changed the last file name and module name whith camelCase, iffens, low iffens, and lowercase and I always got the same result!</p>