Angluar.js & Bootstrap - jQuery Dependency

Question

According to Bootstrap 3 docs (http://getbootstrap.com/javascript/), Bootstrap 3's js components depend on jQuery.

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

I am looking into using Angular.js, where everyone says "drop jQuery!" It seems like the Angular team took a swipe at Bootstrap v2.3.2 (http://angular-ui.github.io/bootstrap/). Is there anything similar or a work around for Bootstrap 3? Will I just have to live with jQuery for the time being?

Thanks

Answer 1

A few things:

If you haven't made a toy application in Angular, yet, I strongly suggest doing so. You will get a better idea of how much learning/porting you'll have to do and how well it will meet your needs.

(I don't think people agree completely on this point but here's my two cents:) As far as the drop jQuery thing goes, as long as you keep all of your DOM manipulation inside directives there's nothing wrong with wrapping jQuery widgets (when you get good enough to write your own directives) because then the jQuery will be isolated to only how you express your models. Then, when the Angular community starts catching up to jQuery in terms of plugins and extensions you can start refactoring your views to not use jQuery-dependent directives and then you'll just be able to drop the dependency altogether.

Also the world has survived with Bootstrap 2 and Angular plugins for it for a while - is there anything you need in 3 that you couldn't live without? I'm sure you know this by now - newer isn't always better; you shouldn't fix what's not broken; etc.

Answer 2

It's less about dropping jQuery and more about dropping the imperative mindset. The "Angular Way" is to first define components (directives, services etc) and then to declaratively combine these in your applications.

If you need a particular sparkly thing from jQuery, you can wrap it in a directive and use it declaratively.

So instead of:

$('.elements-of-interest').addSparklyThing();

You create a sparkly thing directive, perhaps as an attribute:

<div sparkly-thing>foo</div>

In the first case I am giving a series of instructions in an imperative fashion. In the second case I am simply declaring that this div is also a sparkly-thing.

For a fuller and more doctrinaire view, see: "Thinking in AngularJS" if I have a jQuery background?