Creating a Angular js plugin

Question

Currently we have a Jquery plugin which when the user includes a .js and css file to their page can attach to a div and transforms the div into a jquery control.

Lately I have started doing a lot of angular JS, and built a nice site with it. I am wondering if angular JS can also be built to create a plugin which can be dropped into any frontend regardless of the technology similarly to the way a jquery plugin can.

I.e the idea is something like ask the use to include angular.js, mycontrol.js and then ask them to include a 1 line directive to wherever on the page they want to display the plugin i.e

I.e but also allow them to control the default settings for the control and access certain callback functions.

I am just wondering if this is right use of angular, or is best to stick with jquery for this functionality.

Being a full fledged framework, i don't think this is a good use of AngularJS. It may not even work. Reactjs may be better suited for this scenario. — Chandermani
– Chandermani, Commented Apr 6, 2015 at 10:31

AlexHv · Accepted Answer · 2015-04-06 10:56:00Z

2

Yes you can definitely build an angular module to be integrated anywhere. Think of it as an angular app doing just your stuff.

I do it this way :

write my angular app, for example "myModule"
'compile' it with gulp/grunt to obtain one unique script, ideally including angularjs, my .js code and my html templates in $templateCache
include the ng-app="myModule" directive somewhere on my html

use it

<script src="myApp.js"></script>
<div ng-app="myModule">
    <my-cool-directive></my-cool-directive>
</div>

You can access the angular world from the 'outside world' by something like that :

var elem = angular.element(document.querySelector('[ng-app]'));
var injector = elem.injector();
var myService = injector.get('myService');
var usefulData = myService.getData();

edited Apr 6, 2015 at 10:56

answered Apr 6, 2015 at 10:50

AlexHv

1,73415 silver badges24 bronze badges

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

1 Comment

StevieB Over a year ago

Could you also set callback functions this way ?

Collectives™ on Stack Overflow

Creating a Angular js plugin

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related