Select Page

What is UI Bootstrap?

Posted on May 9, 2017
James Quick, Social Developer

Today at work, I came across a reference to UI Bootstrap in the web application I’ve been working on.  A teammate of mine had talked to me about it months ago, but I never took the time to understand when and why to use it.  In the afternoon, I spent about 30 minutes diving in to gain that understanding.  It wasn’t much, but I figured I would share what I learned here.

When I hear UI Bootstrap, I instinctively think about Bootstrap, “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”  That said, it’s no surprise that Bootstrap is also commonly found in all types of websites, including Angular projects, but… there’s a problem.

The Problem

To start, Angular already includes a “lighter” version of jQuery, called – you might have guessed it – jQuery Lite.  JQuery Lite wraps the majority of the core jQuery functionality into Angular itself, so we don’t miss out on much.  Secondly, the thought processes behind building with Angular and with jQuery are different.  With Angular, a big focus is adding functionality directly into your html, but with jQuery, the majority of added functionality comes in the javascript.  Angular directives in your html give us a good sense of the functionality behind the different DOM elements.  Here’s one example, let’s say we want to show and hide a certain element.  In JQuery we would go to our javascript, select the DOM element we want to show/hide and then show/hide it.  In Angular, however, we would data bind to some variable on our scope, use the ng-hide directive in HTML, and let Angular do the rest.

What does this have to do with UI-Bootstrap?  Well, Bootstrap Javascript has a dependency on jQuery, so to leverage its full capacity, you need to include jQuery as well.  So, if you’re looking to avoid including jQuery into your project, what option do you have?  In comes UI Bootstrap, which uses directives to map up with the Bootstrap JS Components.  In other words, with UI Bootstrap, you avoid the need to reference jQuery, but get the same functionality you want from Bootstrap.  So, in your project, you can reference the same Bootstrap css file that you’ve been using, but replace the Bootstrap JS file with the UI Bootstrap JS file instead.

Summary

As you go forward with your Angular and Bootstrap development, remember a couple of things.  First, Angular already includes jQuery Lite, so adding a reference to jQuery is probably overkill.  Second, if you need to use Bootstrap JS and want to avoid the dependency on jQuery, UI Bootstrap fills the gap.  So, all in all, UI Bootstrap is Angular’s effort to maintain consistency while keeping functionality that developers expect.

Additional Reading

Subscribe

Subscribe

Javascript. Node. Angular. Bootstrap. Wordpress. You name it.  If you are a current or aspiring web developer looking to learn more, then subscribe!  I will share the latest news and tutorials as well as exclusive assets.

Thank you for subscribing!

Pin It on Pinterest

Share This

Share this post with your friends!