title: Angular modular application best practices
body: <p>My folder structure : </p>
  
  <pre><code> /app 
     /components 
         /module1 
         /module2
         /core 
            /extensions
               -array.js
               -string.js
            /services
               -localdataservice.js 
            /directives 
               - .... .js
     index.html 
  </code></pre>
  
  <p>each file aside from it's essence is associated with an angular module 'app.core'
  for example : array.js </p>
  
  <pre><code>(function() {
      'use strict';
  
      var core = angular.module(app.core, []);
      core.config( function(){
  
      if (!Array.prototype.last){
          Array.prototype.last = function(){
              return this[this.length - 1];
          };
       }; 
     })
  }());
  </code></pre>
  
  <p>Composing all of these files and there contents under a usable module as some fallbacks. </p>
  
  <p>1) Only one file can create the module and the rest need to use the module and add on to it. </p>
  
  <pre><code>   meaning that all other files then the arbitrarly chosen array.js would use the module as :
  
     var core = angular.app('app.core');  
        and not 
     var core = angular.app('app.core',[]);       
  </code></pre>
  
  <p>2) I would have to reference each file from index.html in order for it to take part in the module's initiation.  </p>
  
  <p>index.html </p>
  
  <pre><code>  &lt;html&gt; 
      &lt;body&gt;
  
          &lt;script src="components/core/array.js"&gt;&lt;/script&gt;
          &lt;script src="components/core/string.js"&gt;&lt;/script&gt;
          &lt;script src="components/core/localdataserice.js"&gt;&lt;/script&gt;
          .... and many more 
      &lt;/body&gt; 
  &lt;/html&gt;   
  </code></pre>
  
  <p>There must be a better way for building a module across multiple files. 
  at first i thought about copying all of the contents of the files under a seperate file </p>
  
  <pre><code>/app 
    /components 
       /core
          /lib
            -core.js 
  </code></pre>
  
  <p>index.html </p>
  
  <pre><code>&lt;html&gt; 
      &lt;body&gt;
  
          &lt;script src="components/core/lib/core.js"&gt;&lt;/script&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>I thought of doing this with a grunt copy task. but that would require me to somehow manipulate the process of the copy task the fit content under the IFFE wrapper and the angular's module initiation. </p>
  
  <pre><code> (function() {
      'use strict';
  
       var core = angular.module(app.core, []);
       core.config( function(){
             ... ALL THE FILES CONTENTS GO HERE 
  
        })
     }());
  </code></pre>
  
  <p>And again there's gotta be a better way. 
  any suggestions ? </p>
  
  <p><strong>EDIT :</strong> </p>
  
  <p>I decided to try <strong>Browserify</strong> along with <strong>Grunt</strong> and <strong>grunt-browserify</strong></p>
  
  <p>Gruntfile.js </p>
  
  <pre><code> grunt.initConfig({
       browserify :{
          main: {
             src: 'app/components/core/{,*/}*.js',  
             dest: 'app/components/core/lib/core'
          }
        }
   });
  </code></pre>
  
  <p>For this example the build file only has the content of <strong>array.js</strong> </p>
  
  <pre><code> (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&amp;&amp;require;if(!u&amp;&amp;a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&amp;&amp;require;for(var o=0;o&lt;r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  
       if (!Array.prototype.last){
            Array.prototype.last = function(){
              return this[this.length - 1];
          };
      };
   },{}]},{},[1]);
  </code></pre>
  
  <p>1) What i don't understand is how can i incorporate an export function in it. 
  since i wan't to require it from other modules.  </p>
  
  <pre><code> module.exports = function() {
     // Your code 
   }
  </code></pre>
  
  <p>2) Iv'e seen no reference in any tutorials on that weird looking wrapper my code was placed in. not sure what it does maybe it as an export in there some where :/ </p>