Question

我在Heroku上部署了一个Angular Web应用程序，它从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。任何帮助将不胜感激！

Answer 1

我能够让Angular从S3而不是当前主机加载模板！首先，我正在使用的一些技术：

RequireJS使我的应用程序模块化
Angular
用于应用程序中状态路由的Angular UI路由器
Angular AMD帮助调整Angular与RequireJS

解决方案需要创建一个名为config.js的RequireJS模块，它直接从RequireJS中获取配置的baseURL，如下所示：

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添加到给Angular 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;

}）;

我们还没有完成。我们还必须在$ sceProvider中将S3域列入白名单，如下所示：

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路由器仍将负责加载模板。

如何配置Angular $ http以向不同的主机发送请求？

1 个答案: