I have a project which should use both AngularJS and Bootstrap(http://getbootstrap.com/) to take Alert and Process Indicator there.
But when I include Bootstrap's css file it mixes Application so, that other css file's definings seems to be overridden.
How these two Frameworks should be used in same Application?
I have tried almost everything I know but haven't succeeded to combine these two in the same application.
Best regards,
DONT. Bootstrap is based on a jQuery powered mentality, that is fundamentally componentized as isolated state machines of DOM manipulation. Angular is based on a radically different thought process based around Angular $digestion, and HTML compilation.
If you must combine them, do CSS ONLY. Having two sets of state machines with an adapter introduces overhead and room for human error that does not need to exist. I recommend writing your own angular directives that take advantage of Bootstraps CSS, but NOT trying to integrate the two in one application on the JS level.
There are already a few projects out there trying to do this via directives, which is a good idea. I recommend going with a bootstrap directive project that does not depend on jQuery and is a native Angular implementation, rather than adapting Bootstrap's jQuery code into Angular.
NOT this one : https://github.com/mgcrea/angular-strap/blob/master/src/directives/button.js
BUT this one : http://angular-ui.github.io/bootstrap/
or write your
own!
UPDATE There is now a pure angular version of bootstrap. Find it here -> http://mgcrea.github.io/angular-strap/
There is a separate branch for bootstrap 3.0 which contains the updated templates. It seems to be working with Bootstrap 3.0 CSS: http://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2.
Quote from https://stackoverflow.com/users/1232563/calm on this question Bootstrap 3 compatible with current AngularJS bootstrap directives?
Related
There's this JSONEdit AngularJS directive: https://github.com/mb21/JSONedit which I want to use for my Angular (version 5) application. I haven't worked with AngularJS for ages since I've only used it when I was student in university and didn't really had an idea how everything works. Does anyone have tricks/hacks/tips how to easily convert that code so it would be easily used in Angular 5 application?
I am so sorry but it is not possible for simple reasons.
The structure of angular 2+ definetly different from angularjs (1.x.y)
Another reason is that, there are any other directives/dependencies (such as jquery ui, sortable and bootstrap 3) used by that directive therefore you must convert them and import in right order as described in github.
In short, find an alternative and make some simple changes to make similar.
For example you can use this simple alternative
https://www.npmjs.com/package/ang-jsoneditor
I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.
I am migrating an existing web application to AngularJS. As the application is already using Bootstrap 3 I am wondering if it is worth re-writing it with Boostrap Directives. My current understanding is that if I use the directives it will be more effective and I'll be able to scrap JQuery. On the other hand, implementing custom widgets should be more straightforward using native Bootstrap + JQuery. I am interested in Pros and Cons of the two approaches.
From the Angular-UI's github:
It is often better to rewrite an existing JavaScript code and create a
new, pure AngularJS directive. Most of the time the resulting
directive is smaller as compared to the original JavaScript code size
and better integrated into the AngularJS ecosystem.
Readability, code size, and Angular compatibility (since most directives allow promises) are enforced comparing to basic plain bootstrap.
That's why I rewrote myself all my bootstrap components using Angular-UI.
Always wonder: "Can I build this thing without importing JQuery?"
I am writing a module in angularjs which would mainly support IE 8 and 9.
Now the animation directives available in the lib uses mainly CSS transitions and it fails. So I am planning to write Javascript based animations by using angular js directives and develop basic animations like collapse, disappear etc.
What should be the approach for this?
Check great examples on Year Of Moo website. They were really helpful for me.
We're about to start a project using mentioned libraries. We have already used jQM in another project, but coupled with Backbone. Now we're thinking about using AngularJS with jQM. Do you think it's a good idea? And if not, why?
To elaborate, the question is whether it is advisable/recommended/easy/beneficial to use these libraries together, or maybe there is something that should prevent us from using them both in one project. We don't want to spend half of project's time on making them work together just on principle.
AngularJS and JQM do different things. AngularJS is MVC + Lot More. JQM on the other hand is for direct UI manipulation (lower level than Angular). The good news is AngularJS is flexible and will let you work with any other Javascript framework including JQM. The recommended way of using them together is use the adapter as mentioned above or create your own reusable directives that will add "JQM nature" to your views. For e.g. you can create a directive that will convert a standard UL to a fancier JQM list. The good thing about doing this in directives and not within your view is that your UI code is separated in separate modules and not intermingled with business logic.