title: How to share code between multiple projects with angularJS
body: <p>I was wondering what would be the best practice to share common libraries and own modules between multiple angularJS projects.</p>
  
  <p>Let's assume that I'm working on two different projects. Both rely on libraries like angularJS, bootstrap etc.</p>
  
  <p>I have a file structure like below:</p>
  
  <blockquote>
    <ul>
    <li>Project 1
    <ul>
    <li>index.html</li>
    <li>css</li>
    <li>js
    <ul>
    <li>module A</li>
    <li>module B</li>
    </ul></li>
    <li>lib
    <ul>
    <li>angular</li>
    <li>bootstrap</li>
    </ul></li>
    </ul></li>
    <li>Project 2
    <ul>
    <li>index.html</li>
    <li>css</li>
    <li>js
    <ul>
    <li>module B</li>
    <li>module X</li>
    </ul></li>
    <li>lib
    <ul>
    <li>angular</li>
    <li>bootstrap</li>
    </ul></li>
    </ul></li>
    </ul>
  </blockquote>
  
  <p>So I was thinking about just creating another directory with all the shared components so that I get sth. like:</p>
  
  <blockquote>
    <ul>
    <li>Shared
    <ul>
    <li>angular</li>
    <li>bootstrap</li>
    <li>module B</li>
    </ul></li>
    <li>Project 1
    <ul>
    <li>index.html</li>
    <li>css</li>
    <li>js
    <ul>
    <li>module A</li>
    </ul></li>
    </ul></li>
    <li>Project 2
    <ul>
    <li>index.html</li>
    <li>css</li>
    <li>js
    <ul>
    <li>module X</li>
    </ul></li>
    </ul></li>
    </ul>
  </blockquote>
  
  <p>I have module B written like:</p>
  
  <pre><code>angular.module("moduleB", [])
      .service("SB", [function () {/*functionality here*/}]);
      .factory("FB", [function () {/*functionality here*/}]);
  </code></pre>
  
  <p>and would then include it in my Project 1/2 as dependency like:</p>
  
  <pre><code>angular.module("project1", ["moduleB"]);
  </code></pre>
  
  <p>to achieve this approach.</p>
  
  <p>Would that be the best way? What could be an alternative?</p>