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.

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
– Denison Luz, Commented Sep 11, 2013 at 20:05

Community · Accepted Answer · 2017-05-23 12:33:57Z

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

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Dec 10, 2013 at 10:45

Alexander Mazyarik

5965 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jarnal · Accepted Answer · 2013-09-14 03:30:02Z

1

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.

answered Sep 14, 2013 at 3:30

Jarnal

2,1582 gold badges26 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related