如何使用AngularJS从远程URL获取模板

Question

我正在使用NW和AngularJS制作一个应用程序以制作一个桌面应用程序，我想要的是从服务器（html，css，js）获取文件。

然后我想做类似下面的代码：

aux.config(function ($routeProvider) {
    $routeProvider
        .when('/testInformation/', {
        templateUrl: 'https://serverName/test.html',
        controller: 'shipmentInformationController'
    }).otherwise({
        redirectTo: '/'
    });
});

问题是，当我运行应用程序时，它没有获取模板的html，那么我不确定这个想法在AngularJs上是否有效，或者我是否需要更改其逻辑以获取html的内容。

我收到错误

错误：$ sce：insecurl来自不受信任源的资源的处理被阻止

谢谢你的帮助。

Answer 1

由于跨域资源共享规则，您不能直接从远程服务器加载内容。

一种相对简单的解决方法是使用Nginx之类的内容来代理内容，以使其看起来像来自您自己的服务器。

如果您可以控制远程服务器，则只需添加Access-Control-Allow-Origin标头。

Answer 2

我在互联网上进行搜索，发现了一个适合我的解决方案。

这个想法是添加一个域，因为默认情况下angularJs仅支持相同的域，然后我们可以使用“ $ sceDelegateProvider”添加白名单，如下所示

.config(function ($sceDelegateProvider) {

    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from our assets domain.  Notice the difference between * and **.
        'https://serverName.com/**'
    ]);
 });

之后，当我们设置templateURL时，就可以使用远程服务器了。

.when('/test1/', {
        templateUrl: 'https://serverName.com/html/test1.html',
        controller: 'test1'