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

Question

I am making an app with NW and AngularJS to make a desktop app, what I want is to get the files from a server(html, css, js).

then I want to do something like the following code:

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

The problem is that when I run the app it is not getting the html of the template, then I am not sure if this idea is valid on AngularJs or if I need change the logic of that to get the content of the html.

I am getting the error

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

Thanks for any help.

Answer 1

You can't directly load content from a remote server due to Cross-Origin Resource Sharing rules.

One relatively straightforward workaround is to proxy the content using something like Nginx to make it look like it came from your own server.

If you have control over the remote server, you could simply add an Access-Control-Allow-Origin header.

Answer 2

I was doing some search on internet and I found a solution that works for me.

The idea is add a domain because by default angularJs only support the same domain, then we can add a white list with the "$sceDelegateProvider" like the folowing code

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

after that when we will set the templateURL, we can use the remote server.

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