如何使用 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.

的内容

我遇到了错误

Error: $sce:insecurl Processing of a Resource from Untrusted Source Blocked

感谢您的帮助。

Answer 1

由于 Cross-Origin Resource Sharing 规则，您不能直接从远程服务器加载内容。

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

如果您可以控制远程服务器，您可以简单地添加 Access-Control-Allow-Origin header.

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/**'
    ]);
 });

之后我们设置模板URL，就可以使用远程服务器了。

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

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

How get a template from a remote URL with AngularJS

javascript

angularjs

node.js

nw.js