angularjs ng-view not working with External templateUrl

Question

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

The app uses partials with the ng_view directive so that the only thing i need to do to 'inject' my app into one of my pages is...

<div ng-app="myapp" ng-view></div>

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 app into another site, In addition to externalizing the script references, I changed the app to look like 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 errors, no nothing, it just doesn't render my app.

Any ideas? are external partial references allowed?... is the browser being over-protective? Should I take a completely different approach??

My guess would be that your running into issues with the same origin policy but this should be producing errors in your Javascript console (at least in Webkit). — Noah Freitas
– Noah Freitas, Commented Jul 23, 2012 at 15:53
Michael, did you discover a solution to this problem? I'm running into a similar issue. — JStark
– JStark, Commented May 9, 2013 at 20:51
You have two '' before url, is that a typo or you have that in your code? — jcubic
– jcubic, Commented Jul 4, 2014 at 18:24
I think you need to leverage ngInclude to solve this problem, checkout the docs here docs.angularjs.org/api/ng/directive/ngInclude — Luke Baughan
– Luke Baughan, Commented Jul 15, 2014 at 10:02

Alex Such · Accepted Answer · 2014-07-23 15:33:45Z

1

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

answered Jul 23, 2014 at 15:33

Alex Such

4714 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Dausmann Over a year ago

This sounds right to me although in the end I think I ended up using grunt and html2js to package all my templates into a big js file. More practical

Collectives™ on Stack Overflow

angularjs ng-view not working with External templateUrl

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related