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

Question

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.com/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.

Answer 1

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

Answer 2

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.