Angular-ui bootstrap & bootstrap.js

Question

I'm quite new to angularjs, and going to use angular + bootstrap in the project, so I was thinking the steps should be like this

1. import angular.js 2. import bootstrap.js 3. import bootstrap.css

However I found there is an angular-ui bootstrap module in angular, so I tested to create a dropdown menu in both way, they all work very well, I guess angular-ui should be the recommended way, but why shall I use angular-ui bootstrap rather than import bootstrap.js directly?

Thanks in advance!

Using directly bootstrap.js is NOT recommended. You will have to do all the data binding manually, by using custom directives plus the bloat to have to include bootstrap.js since the angular-ui.js library is even more compact than its original since it was rebuild from scratch. You can even stop including jquery.js if using angular-ui.js — Diosney
– Diosney, Commented Jan 26, 2015 at 14:10
bootstrap.js uses raw jQuery, which doesn't play well with Angular. Don't use them together. — cvrebert
– cvrebert, Commented Jan 26, 2015 at 19:33

Aravinda · Accepted Answer · 2015-01-26 13:59:09Z

1

If what you want to achieve can be done through the angular ui-bootstrap module, you should use that instead of the twitter-bootstrap-js library.

angular-ui bootstrap has all of the bootstrap-js components, but they have been written from scratch as angular directives. (But they do use Twitter-bootstrap CSS)

The alternative would be to use Twitter-bootstrap JS components, and then create your own angular directives that wrap them... which is a bit of unnecessary hassle.

So:

import bootstrap.css

import angular.js

import angular-ui-bootstrap

answered Jan 26, 2015 at 13:59

Aravinda

1261 silver badge5 bronze badges

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

Comments

Ricconnect · Accepted Answer · 2015-01-26 13:58:52Z

0

Angular-UI is a bridge between the bootstrap javascript components and AngularJS. This means that most of the bootstrap components are wrapped in AngularJS directives for convenience.

This means that you can use the binding of AngularJS when using bootstrap components, for example:

<div collapse="isCollapsed">      
    <div class="well well-lg">Some content</div>      
</div>

Instead of

$('#myCollapsible').collapse({
  toggle: false
})

answered Jan 26, 2015 at 13:58

Ricconnect

1,0795 silver badges25 bronze badges

2 Comments

Saorikido Over a year ago

Can I understand like this: angular-ui has defined boostrap into its directives, so that if I want achieve some effects, I just simply to invoke those directives functions?

Ricconnect Over a year ago

In AngularJS you don't invoke functions on directives directly. You can place directives in your html (like above the collapse directive) and you can pass information to that directive (like above when passing the isCollapsed boolean to set if the bootstrap component is collapsed or not). Angular-UI prevents that you have to use jQuery to manipulate the bootstrap components, what is essential in AngularJS.

Collectives™ on Stack Overflow

Angular-ui bootstrap & bootstrap.js

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related