angularjs ng-view can't load template

[raitucarp]

When I use angularjs, with templateUrl in routeprovider, it can't load the template into view, but I checked the logs, the xmlhttprequest to template is serves as well. Why this happens?

[szwacz]

I'm using Angular views with NW and never had any problem.
Could you provide some actual code?

[raitucarp]

I apologize for my slow response..

For the sake of example-rule, I will attach myApp example, that contains minimum angularjs code.

https://www.dropbox.com/s/wn4onu602w0kt9q/myApp.zip

My environment:

• windows xp (win32)
• angularjs 1.2.6
• jquery

After you extract it.. Try running it as default, in commandline: nw myApp

• when I go to index, which is use partials template from script tag, it is fine
• when I go to v1, and v2 it is done load the template views, but nothing happened
• when I go to v3, which is use partials template from script tag, it is fine

I think it's weird for me. And hard to manage views via script tag, rather than separate location as file.

[raitucarp]

@szwacz @rogerwang

I summon both of you. And I apologize for my slow response

[szwacz]

Indeed it doesn't work. I'm using file:// protocol, not app:// so haven't experienced this issue.

The problem actually affects $http directive:
(inject this to app.js file provided by @raitucarp)

app.controller('indexCtrl', function ($scope, $http) {
    $scope.hello = 'Hello world';

    $http.get("/app/views/v1.html").then(function (response) {
        // success event should fire....
        console.log('$http ok');
        console.log(response);
    }, function (err) {
        // ...but error will fire instead
        console.log('$http error');
        console.log(err);
    });

});

In angular $http directive is failing, because it is checking status code of HTTP response like so:

function isSuccess(status) {
  return 200 <= status && status < 300;
}

XMLHttpRequest is returning status code 0 (zero), when used with file:// protocol, and this behaviour was copied to app:// protocol, what leads to $http fail.

Solution is simple: XMLHttpRequest in node-webkit should return status code 200 instead of 0 when used with app:// protocol.

Please reopen this issue.

[raitucarp]

Hmm okay

Should we mention angular developer here? Or just create new issue there and link this issue?

[szwacz]

This issue should be resolved on node-webkit side. Angular is standards compliant, node-webkit is not (returns invalid status code).

[raitucarp]

Is angular supports app:// protocol or not? I just want use app protocol not file protocol, actually. What should I do?

[szwacz]

app:// protocol can be found only in node-webkit, and was born to easily port websites into desktop apps. Angular doesn't even know such thing as app:// exist.

You should wait for patch in NW.

[szwacz]

It turns out you can also easily patch your local angular.js file (use not-minified version).
Find line:

// fix status code for file protocol (it's always 0)
status = (protocol == 'file' && status === 0) ? (response ? 200 : 404) : status;

And change it to:

// fix status code for file protocol (it's always 0)
status = ((protocol == 'file' || protocol == 'app') && status === 0) ? (response ? 200 : 404) : status;

Although this is really simple to fix in angular I will repeat: app:// protocol is internal to NW, and nothing except NW should know about its existance.

[raitucarp]

Ok thanks. That is maybe the only solution. 👍

But, I think Angular.js team should know about this. Because for future use It's important, that html5+js technology is moving forward, never backward.

[raitucarp]

Oh okay, now, I know that this is not angular problem. I apologize my previous comment.

This issue happens because chrome not allowing xmlhttprequest from other protocol except http. @rogerwang should read this.

[rogerwang]

thanks for reporting. I'll fix it.

[tomasdev]

👍

So to fix this NW should return valid status code (200) when XMLHttpRequest was used with app:// protocol.

@rogerwang do we have an estimate on when this can be fixed?

Otherwise feel free to let us know where to modify the response status to do a PR if protocol is app://

[rogerwang]

I'll try to fix this in next version 0.9.2. Thanks.

[tomasdev]

❤️ ❤️ ❤️

[cmarrero01]

This actually happen on 0.11.0, How I fix it?

#2643

[cmarrero01]

I fix this with this code:

 $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|app):/);
 $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|app):|data:image\//);

For more information about this, read : https://docs.angularjs.org/api/ng/provider/$compileProvider

:)