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!
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
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
})
Related
i am beginner in react js, using jsx bootstrap in react js, i have watched many videos in youtube some using jsx react and some using simple bootstrap with minimal classname change,that's why i got confused
what have to use react bootstrap or simple bootstrap
As it is documented in Bootstrap official website, "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
It is moreover stated that React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. Hence, the dependencies on Jquery and Bootstrap.js are eliminated.
Methods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, React uses updates to the state to update the virtual DOM. In this way, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM.
If you are using React, React-Bootstrap would be a better option, as you will not need to add scripts such as jquery.js or bootstrap.js to your code. The React component model gives more control over form and function of each component.
I am using AngularJS 1.5.0 and Bootstrap 3.3.6.
I am trying to display the Bootstrap Modal Plugin using AngularJS.
It is easy to display using Bootstrap JS Modal
$("#myModal").modal() works with JQuery, but I need to get this working with AngularJS.
I suggest to install the UI Bootstrap which is a Bootstrap components written in pure AngularJS. Then you can use the Modal as seen in the Demo here
I have an angular 1 app that's being bootstrapped onto a Java web page (legacy app) using ng-app tags. I'm trying to create a hybrid app using Angular 2's downgrade capabilities.
In order to do this I need to remove ng-app tags and use the UpgradeModule from #angular/upgrade/static and bootstrap using the upgrade.bootstrap(document.body, ['myapp']). However, most of the components of the app, including the entry point of the app, are just plain old angular 1.2 directives.
From the examples I've seen, they are using the controller="MenuCtrl" syntax to add components to the page. Is it possible to use directives as the entry point to the app? e.g.
<div my-menu-directive></div>
Currently, nothing is showing up in the app since I've removed the ng-app tags, but the app is definitely being bootstrapped. I'm just not seeing any of the directives.
Fixed this by wrapping the bootstrap statement in angular.element() like so:
angular.element(function() {
upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
});
How to get Bootstrap default datepicker look and feel using Angular UI Bootstrap
Angular UI Bootstrap calendar view :
http://plnkr.co/edit/?p=previewenter code here
What I want :
https://eonasdan.github.io/bootstrap-datetimepicker/
The Angular UI Bootstrap project has no CSS, rather we defer directly to Bootstrap's CSS. You can override Bootstrap's default themes or download one of the literally thousands of other BS themes out there.
You are trying to use the CSS of one project as a replacement for CSS in another. This usually requires quite a bit of manual work. As you can see here, the project you want to imulate uses its own CSS.
Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap?
I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap.
No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap.
From the linked docs:
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
If you are going all in on Angular then stick with either AngularStrap or Angular UI Bootstrap, do not mix it with Twitter Bootstrap JS library. Both of the Angular projects mentioned utilize the Bootstrap CSS, but they completely replace the Bootstrap JS library, with pretty much all functionality included.
Apart from the unnecessary bloat to load both libraries, you'll end up with issues integrating the Bootstrap JS library with Angular for stuff like model binding.