0

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.

Johann
  • 27,536
  • 39
  • 165
  • 279
  • I would prefer angular's style of avoiding jquery. That being said, why re-invent the wheel, especially if the wheel is really hard to make. Pros and Cons - but even though you're using jQuery, there is typically an angular way to integrate the plugin. – Michael Kang Jul 18 '14 at 07:15
  • But I mentioned that I want to avoid using jQuery. – Johann Jul 18 '14 at 07:19
  • Sorry, replace 'jquery' with 'javascript widget' in my previous comment – Michael Kang Jul 18 '14 at 07:20

2 Answers2

1

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.

Community
  • 1
  • 1
jantimon
  • 36,840
  • 23
  • 122
  • 185
  • You completely missed the point. I indicated that I want to avoid jQuery. My question was about using pure javascript libraries. – Johann Jul 18 '14 at 07:21
  • So what's the difference? – jantimon Jul 18 '14 at 07:22
  • So are you saying that it's perfectly acceptable to use jQuery plugins, provided that they are used only within directives? – Johann Jul 18 '14 at 07:32
  • It really depends on your existing plugins but as said in the answer you should really try to avoid dom manipulations in your code and many plugins could be written with way less code using angularjs – jantimon Jul 18 '14 at 07:49
  • "Avoid DOM manipulation"?? Even with Angular, you are still required to manipulate the DOM to create UI widgets, only you are suppose to do it in a directive. So I don't think it makes sense to say "avoid manipulating the DOM". – Johann Jul 18 '14 at 08:47
  • You are right you will need them at some point but you can achieve a lot with `ng-if` and directive templates. If you could provide an example it would be easier to explain – jantimon Jul 18 '14 at 09:49
0

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.

Cash
  • 81
  • 3
  • AngularJs ships with a [jQuery lite version](https://docs.angularjs.org/api/ng/function/angular.element) and integrates well with jQuery – jantimon Jul 18 '14 at 07:16
  • Yes. But it's a far cry from the entire library. I wouldn't really say that Angular integrates well with any libraries. Usually they have to be wrapped up in Angular to work, which requires a lot of tedious work. – Cash Jul 18 '14 at 07:17
  • Which is why I stated that I want to avoid using jQuery. – Johann Jul 18 '14 at 07:20
  • It has a build in integration for jQuery - from the docs: "If jQuery is available, angular.element is an alias for the jQuery function." The angular-ui-project uses jQuery (lite) to bind events: https://github.com/angular-ui/ui-utils/blob/master/modules/keypress/keypress.js – jantimon Jul 18 '14 at 07:22
  • Like I said, there are already a ton of pure javascript libraries out there. My question is whether it's ok to use those. – Johann Jul 18 '14 at 07:24