Crossiler – AngularJS NG-View does not use external TemplateURL

I want to take an angular application that works fine on my own domain and “embed” it in several other sites.

The application uses part with the ng_view directive, so that the only thing I need to do is to “inject” my application into one of my pages…

My app looks like this…

angular.module('myapp', [ 'myapp.filters','myapp.services','myapp.directives','ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise ({templateUrl:'partials/mainTemplate.html', controller: myController});
}]);

This works fine, but when I try to “inject” the application into another On the site, in addition to externalizing the script references, I changed the application to this…

angular.module('myapp', ['myapp.filters' ,'myapp.services','myapp.directives','ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl: ' 'http://mydomain.com/partials/mainTemplate.html', controller: myController});
}]);

But it doesn’t work…no error, nothing, It just doesn’t render my application.

Any ideas? Allow external part references? …Is the browser over-protected? Should I take a completely different approach?

I think you should enable CORS on mydomain.com to get the view. And, as bUKaneer said Say, you have to add mydomain.com in $sceDelegateProvider.resourceUrlWhitelist

I want to adopt an angular application that works fine on my own domain and “embed” it in other Several sites.

The application uses part with the ng_view directive, so that the only thing I need to do is to “inject” my application into one of my pages…

My app looks like this…

angular.module('myapp', ['myapp.filters','myapp.services','myapp.directives','ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl:'partials/mainTemplate.html', controller: myController});
}]);

This works fine , But when I tried to “inject” the application into another site, in addition to externalizing the script reference, I changed the application to this…

 angular.module('myapp', ['myapp.filters','myapp.services','myapp.directives','ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl:''http://mydomain.com/partials/mainTemplate.html', controller: myContro ller});
}]);

But it doesn’t work…no error, nothing, it just doesn’t render my app.

There is any Ideas? Allow external part references? …Is the browser over-protected? Should I take a completely different approach?

I think you should enable CORS on mydomain.com to get the view. And, as bUKaneer said, you must add mydomain in $sceDelegateProvider.resourceUrlWhitelist .com

Leave a Comment

Your email address will not be published.