CODEWITHSUNDEEP
jqueryangularjs
StevieB
StevieB

Reputation: 6523

Creating a Angular js plugin

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.

Upvotes: 0

Views: 77

Answers (1)

AlexHv
AlexHv

Reputation: 1734

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 :

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

  4. 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();

Upvotes: 2

Related Questions