javascript - Include an angular app in a div on an other domain, no iframe - Stack Overflow

admin管理员组

文章数量:1423581

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!

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!

• javascript
• angularjs
• iframe
• angularjs-directive
• angularjs-ng-include

Share Improve this question Follow asked Jul 1, 2015 at 9:53 Jason van der ZeeuwJason van der Zeeuw 92311 gold badge1212 silver badges2929 bronze badges 4

• 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. – inimene Commented Jul 3, 2015 at 12:12
• 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 overe, as well for responsiveness Iframes use: npr.github.io/responsiveiframe, this is pure laziness, and IFRAME is a cheap and a bit incorrect approach. – SilentTremor Commented Jul 3, 2015 at 12:38
• Are you going to add this application to non-angular websites also? – samyak bhalerao Commented Jul 3, 2015 at 12:53
• @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... – Jason van der Zeeuw Commented Jul 6, 2015 at 9:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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?

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.

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

本文标签： javascriptInclude an angular app in a div on an other domainno iframeStack Overflow