title: Angularjs modules
body: <p>I just started discovering Angular.js and did the <em>Shaping up with Angular</em> course from <a href="https://www.codeschool.com/" rel="nofollow">codeschool</a>. I though didn't understand fully one aspect: in the course you create multiple modules with <code>var app = angular.module('modulename',[...])</code>, you wrap them in a closure and you include all the <code>js</code> files in your <code>index.html</code>. </p>
  
  <p>I am confused because the guy was using the same <code>var app</code> expression in all the files, which were included in the <code>index.html</code> like this:</p>
  
  <pre><code> &lt;script src='file1.js'&gt;&lt;/script&gt;
   &lt;script src='file2.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and in <code>file1.js</code> you had:</p>
  
  <pre><code>  (function(){
        var app = angular.module('file1Module', []);
         ...
      })()
  </code></pre>
  
  <p>and in <code>file2.js</code> you had:</p>
  
  <pre><code>  (function(){
        var app = angular.module('file2Module', ['file1Module']);
         ...
      })()
  </code></pre>
  
  <p>So the <code>app</code> object's scope is inside the closure, right? So it doesn't pollute the global namespace and this is why you can name them as <code>app</code> without overwriting each other, even though they are included at the same level. But this <code>app</code> object is tied to <code>file X Module</code> through the <code>angular.module(...)</code> call? Or there is something else going on what I didn't notice?</p>