title: How can I add a module to my application after it has started up without using require.js?
body: <p>My AngularJS application has a module <code>admin</code> that I want to be made available only to those in an Admin role. On the server I have placed the files for this module all in one directory and I have this web-config in the same directory. This works and unless the user is in the admin role then they cannot download the javascript files:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;configuration&gt;
  &lt;system.webServer&gt;
        &lt;security&gt;
            &lt;authorization&gt;
                &lt;remove users="*" roles="" verbs="" /&gt;
                &lt;add accessType="Allow" roles="Admin" /&gt;
            &lt;/authorization&gt;
        &lt;/security&gt;
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>So my server side solution appears to be solved. However I am completely stuck with what to do on the client, <strong>how to download scripts and add a module to my application after it has been bootstrapped</strong>. Here's what I have:</p>
  
  <p>The files in the admin directory that I protected with the web-config look like this:</p>
  
  <p>admin.js</p>
  
  <pre><code>angular.module('admin', [])
  </code></pre>
  
  <p>homeController.js</p>
  
  <pre><code>angular.module('admin')
          .controller('AdminHomeController', ['$http', '$q', '$resource', '$scope', '_o', adminHomeController]);
  
  function adminHomeController($http, $q, $resource, $scope, _o) {
      ....
      ... 
  }
  </code></pre>
  
  <p>My application level files look like this:</p>
  
  <p>app.js</p>
  
  <pre><code>var app = angular
      .module('app',
          ['ui.router', 'admin', 'home',])
      .run(['$rootScope', '$state', '$stateParams', '$http', '$angularCacheFactory', appRun])
  
  function appRun($rootScope, $state, $stateParams, $http, $angularCacheFactory) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
  }
  </code></pre>
  
  <p>app.config.js</p>
  
  <pre><code>app.config(['$controllerProvider', '$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider', appConfig]);
  
  function appConfig($httpProvider, $locationProvider, $sceProvider, $stateProvider) {
  
      // I added this to help with loading the module after
      // the application has already loaded
      app.controllerProvider = $controllerProvider;
      //
      $sceProvider.enabled(false);
      $locationProvider.html5Mode(true);
      var admin = {
          name: 'admin',
          url: '/admin',
          views: {
              'root': {
                  templateUrl: '/Content/app/admin/partials/home.html',
              },
              'content': {
                  templateUrl: '/Content/app/admin/partials/overview.html',
              },
          }
      };
      var adminContent = {
          name: 'admin.content',
          parent: 'admin',
          url: '/:content',
          views: {
              'root': {
                  templateUrl: '/Content/app/admin/partials/home.html',
              },
              'content': {
                  templateUrl: function (stateParams) {
                      return '/Content/app/admin/partials/' + stateParams.content + '.html';
                  },
              }
          }
      };
      var home = {
          name: 'home',
          url: '/home',
          views: {
              'root': {
                  templateUrl: '/Content/app/home/partials/home.html',
              },
              'content': {
                  templateUrl: '/Content/app/home/partials/overview.html',
              },
          }
      };
      var homeContent = {
          name: 'home.content',
          parent: 'home',
          url: '/:content',
          views: {
              'root': {
                  templateUrl: '/Content/app/home/partials/home.html',
              },
              'content': {
                  templateUrl: function (stateParams) {
                      return '/Content/app/home/partials/' + stateParams.content + '.html';
                  },
              }
          }
      }; 
      $stateProvider
          .state(admin)
          .state(adminContent)
          .state(home)
          .state(homeContent);  
  }
  </code></pre>
  
  <p>When a user logs on then I know if it is an <code>Admin</code> role user as I have a security token returned to me that shows:</p>
  
  <pre><code>{
  "access_token":"abcdefg",
  "token_type":"bearer",
  "expires_in":1209599,
  "userName":"xx",
  "roles":"Admin",
  ".issued":"Fri, 30 May 2014 12:23:53 GMT",
  ".expires":"Fri, 13 Jun 2014 12:23:53 GMT"
  }
  </code></pre>
  
  <p>If an <code>Admin</code> role user then I want to </p>
  
  <ul>
  <li><p>Download the Admin module scripts: /Content/app/admin/admin.js and /Content/app/admin/homeController.js from the server. I already have it set up like this for $http calls: <code>$http.defaults.headers.common.Authorization = 'Bearer ' + user.data.bearerToken;</code> so the Bearer token would need to be sent when getting the scripts:</p></li>
  <li><p>Add the <code>admin</code> module to the app</p></li>
  </ul>
  
  <p>Can someone give me some suggestions on how I can do these two things. After reading about require.js I feel that I would not like to use it as a solution. I would like something as simple as possible. </p>
  
  <p>From what I understand until AngularJS allows it then I need to make it so that I can inject my controller. So I already added this to the appConfig: </p>
  
  <pre><code>app.controllerProvider = $controllerProvider;
  </code></pre>
  
  <p>But how can I download the two javascript files and how can I add these to AngularJS so that the user can start using the features of the controller inside the admin module? I saw something about <strong>$script.js</strong> being used by the Angular team. Is this a good solution and how I could I implement this to meet my fairly simple need.</p>