title: Can you dynamically load modules in Angular?
body: <p>I have an angular app with two distinct sections to it. Each section belongs to a type of user. There are some commonalities but for the most part rather different. For example:</p>
  
  <pre><code>/receptionist
      - View Diary
      - Answer Phone
      - Make Tea 
  /ceo
      - View Diary
      - Announce Earnings
      - Strategize
  </code></pre>
  
  <p>Both the ceo and the receptionist need the functionality for viewing the diary. I was thinking wanting to change the modules loaded (and the routing) depending on who logged in.</p>
  
  <pre><code>if (user.type === 'receptionist') {
      app = angular.module('receptionistApp', ['diary', 'phone', 'tea']);
  else {
      app = angular.module('ceoApp', ['diary', 'earning', 'strategy']);
  }
  </code></pre>
  
  <p>I am wanting to do this because there is some overlap, but not a lot. And each app is actually quite big. </p>
  
  <p>I am not wanting to achieve anything security wise here. Each app will have different types of users and roles. Those will be secured through WebApi. I just wanting to avoid loading all of the modules when 45% of them will be of no interest to the other app.</p>