current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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!

share|improve this question
1  
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 Jan 26 '15 at 14:10
1  
bootstrap.js uses raw jQuery, which doesn't play well with Angular. Don't use them together. – cvrebert Jan 26 '15 at 19:33
up vote 1 down vote

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:

  1. import bootstrap.css
  2. import angular.js
  3. import angular-ui-bootstrap
share|improve this answer
up vote 0 down vote

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
})
share|improve this answer
    
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? – Neeson.Z Jan 26 '15 at 14:06
    
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. – Ricconnect Jan 26 '15 at 14:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.