AngularJS and Bootstrap

Concerns about Bootstrap in AngularJS seem to come up a lot lately (especially on Google+) that I feel are causing problems.

We have 2 projects: the AngularUI Bootstrap project which is recreating everything in pure AngularJS code, and removes the Bootstrap.js dependency. Then we have the new Angular-Strap which simply wraps the existing Bootstrap.js creating additional dependencies and imposing a fairly opinionated templating scheme.

If you go with AngularUI's version, then you are using a project that won't break if Bootstrap's API changes, that doesn't have additional JS dependencies, and is tightly integrated into AngularJS (meaning triggering events from controllers, etc is more seamless). On the flip side, if you end up including the bootstrap.js regardless, you don't see any real benefits. All of the components may not work as perfectly / smoothly and you will have to wait (or contribute) until the project gets up to speed.

If you go with Angular-Strap, you are essentially getting a few directives that are not necessarily specific to bootstrap, and some bootstrap plugins wrapped in a AngularUI-Passthrough pattern with very specific configurations. This means you MUST have bootstrap.js, and if their API changes, the lib may break. In addition, any option that hasn't specifically been coded for is completely inaccessible. But this starts to run parallel to the AngularUI's version of waiting for the features to be developed. Overall, since the existing plugins are simply being wrapped, it becomes easy to push out new versions or components when he decides to add wrappers.

Personally, I have reservations about either approach. I believe it's better to provide the basic building blocks and have developers create their own DSL and internal directives/templates (instead of creating a template around a template around a template).

To prove how simple this is, I've put together this gist and plunker which demonstrates how easy it is to implement just about every bootstrap JS component without creating any new JS or custom directives. Unlike Angular-Strap, the code is 100% transparent and you have complete access to all options, 0 API breakage, and 0 template opinion. It's true that you lose the ability to call methods programmatically, but if we focusing on enhancing the pass-thru (or if you don't want to wait and decide to roll a proprietary directive) then this becomes irrelevant.

You should bookmark the original GIST as I will try to continue it as I flesh out more Bootstrap functionality and features over time.

Conclusions

If you want an Angular-Bootstrap project to streamline a few things for you, go with AngularUI's Bootstrap.

If you don't mind a tiny bit of elbow grease, just use Bootstrap.js natively and AngularUI's Passthrough to grease the wheels when you get stuck.

Comments

  • Arturo Hernandez: Fluid CSS

    Hello Dean, I was trying to find out what the difference was. And this is great info. For my particular project, fluid design is particularly important. And I just noticed that the home page for UI Bootstrap is not fluid while AngularStrap is. Is there a simple fix I could apply to make UI Bootstrap fluid or do I need to use AngularStrap to get a fluid design on my app.
  • Dean Sofer: Fluid CSS

    You might be confused as to how fluid CSS works, they have absolutely nothing to do with the Javascript involved. All the CSS used on AngularUI-Bootstrap is the bootstrap CSS. So as far as 'Fluid' goes, both projects are identical. The only difference you are noticing is that we did not make our project's demo page fluid, which is a fairly negligable decision as it's a matter of choosing one bootstrap class over another.
  • Arturo Hernandez: Fluid CSS

    Dean, I get it. I thought there maybe could have been a IE compatibility dependencies/quirks. And, I don't know enough about bootstrap to know the details. But I take your word for it.
  • James Cook: Minor Problems

    The gist and plunkr do not include app.js which is in the index.html. Doesn't seem to cause any harm. Also noticed that when clicking on some of the elements that are implemented as html links (popover, tabs), the browser scrolls to the top (the href="#" is followed). Is there any way to suppress this behavior?
  • Josh: Plunker Is Broken

    The Plunker doesn't seem to execute correctly anymore. I didn't have time to look into why, but a brief explanation of your method would be useful.
  • paper writing service reviews: Well said

    Unfortunately, not many students will be able to provide a quality university process in the traditional short period of time frame required by their teachers and teachers. Luckily, we are here to turn to for university process writing services.We have an comprehensive range of independent article authors who are devoted to all possible educational areas so that your university process task is printed with a professional in that particular field.
  • vitamincserum.co: vitamincserum

    Web templates can be used by some individual or organization to set up their website. Already a template is purchased or downloaded, the user will change total common information included in the web template along their hold personal, organizational or product information.
  • vitamincserum.pw: Well said

    The common goal among experienced web developers is to develop besides deploy applications that are flexible besides easily maintainable. An important notice in reaching this goal is the separation of business sense from presentation logic.

Add New Comment