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?"
Related
I am using angularJS for my application development and I am using JQuery UI in few places of my code.
1. Whether it will end up in performance when I use JQuery in my code.
2. Why to use angular if I can use JQuery / JQLite directly to my application.
Angular is a framework and jQuery is a library. You can't really ask "why should I use AngularJs instead of Jquery?" since they are not the same.
Angular as a framework provides a lot of powerful tools that can help with building web applications. However if you are not building anything particularly over the top you could simply just use the few pieces of jQuery you need.
Overall it comes down to what you are trying to do. If you want to build a powerful SPA with a level of ease, Angular is great. If you're just adding some flair to a static web page jQuery is probably a better approach.
Well, this is a quite broad question!
To be short JQuery can be just considered as a set of tools while Angular is a framework so it (hopefully positively) impacts the design of application.
I typically use jQuery for UI purposes and on-page animations. In my experience, Angular is more powerful, capable and especially adaptable for cross platform use.
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 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?
I've just came with a SO answer mentioning that Foundation and AngularJS do not play well together.
That raises the question: When deciding between Bootstrap and Foundation, do any of them integrate better with MVC frameworks? Or is it just AngularJS case since it takes over so many things?
Foundation and Bootstrap provide their own widgets, and AngularJS might be take over more things beyond plain MVC (like Backbone). Is there any consideration regarding freedom to chose MVC frameworks?
As plain grid framework, I really like Foundation, but I am concerned if the popularity of Bootstrap can provide a road with less surprises when combining other projects.
AngularJS is a different beast when compared to other frontend MV* frameworks (Backbone at least) due to the way it manipulates the DOM, much of the javascript from projects like Foundation and Bootstrap becomes obsolete.
The angular-ui team have an angular-bootstrap project, one of the aims is to reimplement the Bootstrap widgets in a via Angular directives, the javascript has been rewritten. A side effect is that those directives can easily be applied to other frontend ui frameworks, such as Foundation, by merely providing a new html template. For example, tabs or an accordion have the same functionality regardless of framework, once you implement the functionality in AngularJS you can apply any template and it still works the same.
There a very interesting google groups post that explains the reasons in more detail.
If you want to use AngularJS, until the Foundation widgets have been integrated with angular-bootstrap, a potential middle way would be using Foundation css for layout with angular-bootstrap widgets.
If you are going to work with Angular, in my view go with BootStrap. There is even a openSource project called AngularStrap which combines bootstrap css classes in to directives. Have a look here. This in my opinion integrates better with Angular
It's still being developed, but I'm using angular with the angular-foundation project and it seems solid. Angular does stomp on foundation a bit so it's not ideal.
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.