Use angularjs withe other libraries js in the same application ??

[biloki]

Hello everyone,

I'm passionated by Angularjs. 

But sometime I have to integrate the other libraries with angularjs. For example: the javascript canvas library fabricjs, svg library raphaeljs, d3js ..... 

Normally there are the methods, properties of these liraries. If I don't use Angularjs, I call these methods or properties directly. 

But in the application that use Angularjs, I want to have clean application structure . So what is the good way to integrate with the application that uses angularjs ?

For example: I use fabricjs in app, there is the method in fabrics that can add a rectangle to canvas: canvas.add(rectangle); .... 

Should I write a function in a controller for ex addRectangle, and this function calls the function of fabricjs or I should create the directive for that ?

If you already use angularjs with the other library in the same application, pls advice me your some experiences, thank you very much

[Luke Kende]

Yes.  I have used several other libraries with AngularJs.  Mostly I try to use angular only whenever possible, but when I use other libraries, it's typically in services/factories.  Technically they should probably converted to angular directives, but who has time to rewrite a complex library.

For example, I use a growl/notifications from pnotify.  I have a service called notify and it defines methods that I can call from controllers or directives to fire notifications.  This is an oversimplified version to give you the idea:

angular.module('app', [])

  .service('notify', function(){

       //set any initialization or defaults.

       jQuery.pnotify.defaults  = { ... my defauls ... }

      

      //return service as object methods to call

      return {

         growl: function(type, message){

           jQuery.pnotify({ type: type, message: message, sticky: true, delay: 800 })

         }

     }

    

  });

[biloki]

Yep, that's a good idea. Thank you