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.

Improve this question
3
  • 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. Commented Jul 18, 2014 at 7:15
  • But I mentioned that I want to avoid using jQuery. Commented Jul 18, 2014 at 7:19
  • Sorry, replace 'jquery' with 'javascript widget' in my previous comment Commented Jul 18, 2014 at 7:20

2 Answers 2

Reset to default
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.

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

6 Comments

You completely missed the point. I indicated that I want to avoid jQuery. My question was about using pure javascript libraries.
So what's the difference?
So are you saying that it's perfectly acceptable to use jQuery plugins, provided that they are used only within directives?
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
"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".
|
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.

Improve this answer

5 Comments

AngularJs ships with a jQuery lite version and integrates well with jQuery
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.
Which is why I stated that I want to avoid using jQuery.
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: github.com/angular-ui/ui-utils/blob/master/modules/keypress/…
Like I said, there are already a ton of pure javascript libraries out there. My question is whether it's ok to use those.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.