Retrieve HTML from API endpoint and render it as explained here:
https://ericbidelman.tumblr.com/post/31140607367/mashups-using-cors-and-responsetype-document http://jsbin.com/bovetayuwu/1/edit?html,css,js,output
ISSUES:
* How to include CSS
* CSS encapsulation
HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes HTML, CSS, JavaScript or anything else an .html file can contain.
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
This looks very promising but unfortunatley Firefox has abandoned implementation of HTML Imports:
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Status_in_Firefox
and polifill lib: webcomponents.js is throwing errors in firefox.
Exmaple implementation:
In index.html:
<link rel="import" href="/src/client/app/dashboard/test.html">
In controller:
var link = angular.element(document.querySelector('link[rel="import"]'));
var content = link[0].import;
var el = content.querySelector('html');
var website = angular.element(document.querySelector('#external-website'))[0];
website.appendChild(el.cloneNode(true));
http://plnkr.co/edit/naO0iL?p=preview
https://coryrylan.com/blog/css-encapsulation-with-angular-2-components
ISSUES:
* CSS encapsulation, css leaks in firefox and other browsers
An iframe in the most basic encapsulation method and since it's so old it works everywhere.
ISSUES:
* App will need to be separated into two libs (more expensive maitanance)
* Possible issues with comunication between controllers
TODO.
<object data="http://www.web-source.net" width="600" height="400">
<embed src="http://www.web-source.net" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>
This can be done with css attribute all: initial
http://stackoverflow.com/questions/10064172/how-to-isolate-a-div-from-public-css-styles
This can be done with css preprocessor like LESS