如何配置Angular $ http向其他主机发送请求?
我有一个Angular web应用程序部署到Heroku,从S3中抽取静态文件。我有RequireJS启用允许角度懒惰地加载控制器和模板。问题是,当应用程序加载时,window.location变量设置为myapp.heroku.com
,所以所有加载模板的角度请求都会尝试执行类似myapp.heroku.com/path/to/my/template.html
的操作,当我要它们执行此操作时mybucket.s3.amazon.com/path/to/my/template.html
。我不得不做一些小技巧来让RequireJS从S3而不是Heroku加载文件,但我似乎无法弄清楚如何修改Angular的$ http服务,以便所有请求都转到S3。任何帮助将不胜感激!
我能够让Angular从S3加载模板而不是当前的主机!首先,一些在这里的科技我使用:
- RequireJS让我的应用程序的模块化
- 角
- 角UI路由器状态在应用
- 角AMD路由,以帮助调和角与RequireJS
的解决方案需要一个创造称之为config.js
一个RequireJS模块抓住配置直基本URL从像这样RequireJS:
define([], function(){
var baseUrl = require.s.contexts._.config.baseUrl;
var host = baseUrl.substring(0, baseUrl.indexOf('/', baseUrl.indexOf('://') + 3)) + "/";
return {
baseUrl : baseUrl,
hostUrl : host
}
});
由于我访问的并不是非常公开的RequireJS API,所以这有点冒失。 RequireJS的更高版本可能会改变您访问配置的方式。我导出baseURL和hostURL,因为它们都可能有用。现在
,我的模块中,实际上定义了所有的状态和模板的路线,我只是导入这个模块,并在前面加上hostUrl来给角UI路由器像这样的templateUrl:
define(['angularAMD', 'config'], function(angularAMD, config){
'use strict';
var host = config.hostUrl;
var routes = {};
routes.authenticated = {};
routes.unauthenticated = {};
routes.unauthenticated.splash = angularAMD.route({
name: 'splash',
url: '/splash',
templateUrl : host +'static/webpages/views/splash.html',
controller: 'splashController',
controllerUrl : 'controllers/splash'
});
return routes;
});
我们还没有完成。我们也有一个白名单的S3域在$ sceProvider像这样:
var app = angular.module('webapp', ['ui.router', 'LocalStorageModule']);
app.config(function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
'https://mybucket.s3.amazonaws.com/**',
'https://mybucket.s3.amazonaws.com/**'
]);
});
我的错误的根源就来自RequireJS和AngularAMD可以串联使用加载JavaScript文件的事实,但他们不会为你加载HTML文件。 Angular和Angular UI路由器仍将负责加载模板。