我怎么能一个模块添加到我的应用程序已经启动，而无需使用require.js后？ [英] How can I add a module to my application after it has started up without using require.js?
问题描述
我的AngularJS应用程序有一个模块管理，我想提出只提供给那些在管理角色。在服务器上我已经把文件此模块在同一个目录下，我必须在同一个目录这个网络配置。这工作，除非用户是admin角色则总是不能下载的JavaScript文件：
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>
所以，我的服务器端解决方案似乎解决。不过我完全卡住什么在客户端上做，如何下载脚本，并添加一个模块到我的申请已自举后。下面是我有：
在我的网络配置看起来像这样保护的管理目录中的文件：
The files in the admin directory that I protected with the web-config look like this:
admin.js
angular.module('admin', [])
homeController.js
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.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
-
下载管理模块，脚本：/Content/app/admin/admin.js和/Content/app/admin/homeController.js从服务器。我已经将它设置了这样的$ HTTP调用：
$ http.defaults.headers.common.Authorization ='承载'+ user.data.bearerToken;这样的承载令牌需要得到脚本时发送：
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:
的管理模块添加到应用程序
能有人给我我该怎么做这两件事情的一些建议。阅读require.js后，我觉得我不会喜欢使用它作为一个解决方案。我想尽可能简单的东西。
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.
这是我的理解，直到AngularJS是什么使得它，然后我需要让这个我可以注入我的控制器。所以，我已经添加到了了AppConfig：
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;
但我怎么可以下载两个JavaScript文件，我怎么能添加这些到AngularJS，以便用户可以开始使用管理模块内部的控制器的特点是什么？我看到一些关于 $的script.js 正在使用的角度队。这是一个很好的解决方案，我我怎么可能实现这满足了我相当简单的需求。
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.
推荐答案
您可以下决心属性添加到您的管理路线。
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',
},
}
};
您可以链接这一点。
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>
[参考] - https://docs.angularjs.org/api/纳克/功能/ angular.bootstrap
而不是注入的变量或其他一些服务器端模板的方法，你可以使用jQuery的请求：
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
}
});
下面是一种IE8 +兼容示例替代上述（未jQuery的）：
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;
[参考] - http://youmightnotneedjquery.com/#json
这篇关于我怎么能一个模块添加到我的应用程序已经启动，而无需使用require.js后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
