angularjs – 如何在不使用require.js的情况下启动应用程序后,将

我的AngularJS应用程序有一个模块管理员,我希望它只对管理员角色的人有用.在服务器上,我已将此模块的文件全部放在一个目录中,并且我将此web-config放在同一目录中.这是有效的,除非用户是管理员角色,否则他们无法下载 javascript文件：

<?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>

所以我的服务器端解决方案似乎已经解决了.但是我完全不知道在客户端上做什么,如何下载脚本并在引导后将模块添加到我的应用程序中.这就是我所拥有的：

我使用web-config保护的admin目录中的文件如下所示：

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) {
    ....
    ... 
}

我的应用程序级文件如下所示：

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','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','content': {
                templateUrl: function (stateParams) {
                    return '/Content/app/home/partials/' + stateParams.content + '.html';
                },}
        }
    }; 
    $stateProvider
        .state(admin)
        .state(adminContent)
        .state(home)
        .state(homeContent);  
}

当用户登录时,我知道它是否是Admin角色用户,因为我有一个安全令牌返回给我,显示：

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

如果是管理员角色用户,那么我想

>从服务器下载管理模块脚本：/Content/app/admin/admin.js和/Content/app/admin/homeController.js.我已经为$http调用设置了这个：$http.defaults.headers.common.Authorization =’Bearer’user.data.bearerToken;所以在获取脚本时需要发送Bearer令牌：
>将管理模块添加到应用程序

有人可以给我一些关于如何做这两件事的建议.在阅读了关于require.js之后,我觉得我不想用它作为解决方案.我希望尽可能简单.

根据我的理解,直到AngularJS允许它,然后我需要做它,以便我可以注入我的控制器.所以我已经将它添加到appConfig：

app.controllerProvider = $controllerProvider;

但是如何下载这两个javascript文件以及如何将这些文件添加到AngularJS中以便用户可以开始使用管理模块中的控制器功能？我看到Angular团队正在使用$script.js.这是一个很好的解决方案,我怎么能实现这个来满足我相当简单的需求.

var admin = {
    name: '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',}
};

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

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

<!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>

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

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;