Include an angular app in a div on an other domain, no iframe

Question

I have an angular application which has all kinds of dependencies like modules and styles.

On the other hand, I have multiple websites where I want to include this application with all dependencies (Like you have in an iFrame). I want to include the app in a div (as if it's an iframe) but I it must be a div, no iFrame, so those other sites can choose their own style for the inline application.

That way I can let every site include the app when I add it to my CORS. Like:

<div ng-include="app_from_other_domain"></div>

With all the routing inside that div.

I don't know where to start from here after reading much documentation. Any help would be appreciated!

Toein

Not sure how you could do it with ng-include but with ng-router you might be able to do it. You just need to know the exact URI of the HTML snipper you want to include. – Pitzer

Out of the topic, but still, you should use page (in vendors websites) where you will define you app and all dependencies declared, external css, blah, blah. That page will be used as IFrame over the entire website. Easy to fix problems (implemented in single page), Security issues CORS, same domain overcome, as well for responsiveness Iframes use: npr.github.io/responsiveiframe, this is pure laziness, and IFRAME is a cheap and a bit incorrect approach. – Foumart

Are you going to add this application to non-angular websites also? – Raquelraquela

@samyakbhalerao No only on websites with an angular app :) Maybe I could include a vendor.js and index.html file with only the needed HTML with PHP... – Toein

Answer 1

Why not to wrap the app in its own module and create a directive to use it? Then just require that module in your other angular apps. Isn't that cleaner?

Wolsey

The include has a menu with it's own routing /partial views. So the routing wil change all URL's on the other domain too.. – Toein

Answer 2

This is not possible, because when Angular JS executes a digest cycle, it is document-wide, always assuming there is only one application within your document.

The way to approach app-sharing with Angular is to design your app-s well-modulated, and then you can both load and include required modules from other angular app-s.

Galliwasp

Answer 3

Try to do below things

• Create your application and assign it to module e.g. angular.module('sub-application').controller().config();
• Define your routes/partials/controllers etc.
• You just need access to main module of application so that you can inject your module name in it
• You want to run your application for dive only so assign sub-application controller to that dive
• Other option is instead of using ngRoute or ui-route for states and partials use jquery to hide or switch between multiple views.Other functionality you can handle with angular controllers

Raquelraquela