Saorikido
Saorikido

Reputation: 2290

Angular-ui bootstrap & bootstrap.js

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!

Upvotes: 0

Views: 715

Answers (2)

Aravinda
Aravinda

Reputation: 126

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

Upvotes: 1

Ricconnect
Ricconnect

Reputation: 1079

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
})

Upvotes: 0

Related Questions