How can I add a module to my application after it has started up without using require.js?

Question

My AngularJS application has a module admin 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:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
      <security>
          <authorization>
              <remove users="*" roles="" verbs="" />
              <add accessType="Allow" roles="Admin" />
          </authorization>
      </security>
  </system.webServer>
</configuration>

So my server side solution appears to be solved. However I am completely stuck with what to do on the client, how to download scripts and add a module to my application after it has been bootstrapped. Here's what I have:

The files in the admin directory that I protected with the web-config look like this:

admin.js

angular.module('admin', [])

homeController.js

angular.module('admin')
        .controller('AdminHomeController', ['$http', '$q', '$resource', '$scope', '_o', adminHomeController]);

function adminHomeController($http, $q, $resource, $scope, _o) {
    ....
    ... 
}

My application level files look like this:

app.js

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;
}

app.config.js

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);  
}

When a user logs on then I know if it is an Admin role user as I have a security token returned to me that shows:

{
"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"
}

If an Admin role user then I want to

• 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: $http.defaults.headers.common.Authorization = 'Bearer ' + user.data.bearerToken; so the Bearer token would need to be sent when getting the scripts:

• Add the admin module to the app

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.

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:

app.controllerProvider = $controllerProvider;

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 $script.js being used by the Angular team. Is this a good solution and how I could I implement this to meet my fairly simple need.

Answer 1

You can add a resolve property to your admin routes.

var admin = {
    name: 'admin',
    url: '/admin',
    resolve: {
        isAdminAuth: function($q, User) {
            var defer = $q.defer();

            if (User.isAdmin) {
                defer.resolve();
            } else {
                defer.reject();
            }

            return defer.promise;
        }
    },
    views: {
        'root': {
            templateUrl: '/Content/app/admin/partials/home.html',
        },
        'content': {
            templateUrl: '/Content/app/admin/partials/overview.html',
        },
    }
};

You can chain this as well.

    resolve: {
        adminPermissions: function($q, User) {
            var defer = $q.defer();

            if (User.permissions.isAdmin) {
                defer.resolve(User.permissions.admin);
            } else {
                defer.reject();
            }

            return defer.promise;
        },
        hasAccessToHome: function($q, adminPermissions) {
            var defer = $q.defer();

            if (adminPermissions.hasAccessToHome) {
                defer.resolve(true);
            } else {
                defer.reject();
            }

            return defer.promise;
        },
    },

The result of resolve properties will also be passed to the controller if resolved. If rejected, the route will not load. You can access it like this.

function adminHomeController($scope, adminPermissions, hasAccessToHome) {
    $scope.adminPermissions = adminPermissions;
}

You can also manually bootstrap an app:

<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
  {{greeting}}
</div>

<script src="angular.js"></script>
<script>


  var isAdmin = true; <!-- injected variable from server here -->


  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  angular.bootstrap(document, ['demo']);
</script>
</body>
</html>

[reference] - https://docs.angularjs.org/api/ng/function/angular.bootstrap

Instead of injecting a variable or some other server side templating method you can make a request using jQuery:

$.getJSON('/my/url', function(data) {
    if (data.isAdmin) {
        // bootstrap app with admin module
    } else {
        // bootstrap app without admin module
    }
});

Here is an IE8+ compatible example alternative to the above (not jQuery):

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      data = JSON.parse(this.responseText);

      if (data.isAdmin) {
        // bootstrap app with admin module
      } else {
        // bootstrap app without admin module
      }
    }
  }
};

request.send();
request = null;

[reference] - http://youmightnotneedjquery.com/#json