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!

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?

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.

Answer 3

Try to do below things

• Create your application and assign it to module eg 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