CODEWITHSUNDEEP
angularjs
Johann
Johann

Reputation: 29867

Building widgets for AngularJS using existing javascript libraries

When building widgets (reusable components) for AngularJS apps, is it totally acceptable to use existing javascript libraries within directives to manipulate the DOM? There are a lot of pure javascript widgets available that are only used to manipulate the DOM, such as resizers, etc.. Of course, I prefer to avoid using jQuery plugins if possible and just use pure javascript widgets. By reusing existing javascript libraries, I would save a lot of time coding. Just not sure of what other implications I should be aware of.

EDIT:

Some of you are misunderstanding my question. I won't be using jQuery. My question is about using pure javascript libraries.

Upvotes: 0

Views: 266

Answers (2)

jantimon
jantimon

Reputation: 38140

From this answer to "How do I “think in AngularJS” if I have a jQuery background?":

1. Don't design your page, and then change it with DOM manipulations

In jQuery, you design a page, and then you make it dynamic. This is because jQuery was designed for augmentation and has grown incredibly from that simple premise.

But in AngularJS, you must start from the ground up with your architecture in mind. Instead of starting by thinking "I have this piece of the DOM and I want to make it do X", you have to start with what you want to accomplish, then go about designing your application, and then finally go about designing your view.

2. Don't augment jQuery with AngularJS

Similarly, don't start with the idea that jQuery does X, Y, and Z, so I'll just add AngularJS on top of that for models and controllers. This is really tempting when you're just starting out, which is why I always recommend that new AngularJS developers don't use jQuery at all, at least until they get used to doing things the "Angular Way".

I've seen many developers here and on the mailing list create these elaborate solutions with jQuery plugins of 150 or 200 lines of code that they then glue into AngularJS with a collection of callbacks and $applys that are confusing and convoluted; but they eventually get it working! The problem is that in most cases that jQuery plugin could be rewritten in AngularJS in a fraction of the code, where suddenly everything becomes comprehensible and straightforward.

The bottom line is this: when solutioning, first "think in AngularJS"; if you can't think of a solution, ask the community; if after all of that there is no easy solution, then feel free to reach for the jQuery. But don't let jQuery become a crutch or you'll never master AngularJS.

Which is also true for similar vanilla js plugins.
It doesn't matter whether you write your DOM manipulation / event binding with or without jQuery.

If you have all this code you should probably start with your pure javascript libraries but in some cases you will see that it will be way harder to maintain and extend your widgets.

Upvotes: 1

Cash
Cash

Reputation: 81

Calling jQuery plugins is really lazy way to make a directive. It's the equivalent of putting duct tape over something that's broken.

Angular doesn't always do a good job of picking up on events that happen outside of the "Angular world". Because of this you'll see a lot code wrapped in a $timeout service.

Take a look at the angular-ui project. It's a bootstrap based module that has no dependencies on jQuery, even though twitter bootstrap was written with jQuery.

Upvotes: 0

Related Questions