javascript - How to build a widget to embed in third-party websites using AngularJs? - Stack Overflow

admin管理员组

文章数量:1345011

I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as

<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>

or similar.

I found some resources such as this article for developing a widget using jquery /.

How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.

I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as

<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>

or similar.

I found some resources such as this article for developing a widget using jquery http://alexmarandon./articles/web_widget_jquery/.

How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.

• javascript
• jquery
• angularjs
• widget
• angularjs-directive

Share Improve this question Follow asked Sep 11, 2013 at 19:42 JarnalJarnal 2,15822 gold badges2626 silver badges4343 bronze badges 1

• I believe you can achieve this using directives in AngularJS. That's pretty much what Angular-UI (angular-ui.github.io) does. They did in a clever way with the templates bundled with directives. Take a look at their open source code. As your widgets will be based in AngularJS you will still need to include AngularJS main file (like you would need to add jQuery for a jQuery plugin). – Denison Luz Commented Sep 11, 2013 at 20:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You should also keep in mind the possibility that the 3rd party website also uses angular, and potentially a different version. Check Multiple versions of AngularJS in one page

This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.

本文标签： javascriptHow to build a widget to embed in thirdparty websites using AngularJsStack Overflow