Reasonable approaches to use bootstrap and angularjs together without depending on jquery - javascript

Right now, I am taking a look at Angularjs after spending sometime playing with twitter's bootstrap. I really like bootstrap because it's easy, sleek and very mobile-friendly. Now for angularjs, I see people recommending it instead of Jquery and going as far as in saying that, DO NOT USE JQUERY AT ALL and do everything on angularjs.
This question and answers helped to shape some of my beliefs and why I should move to angularjs than jquery.
How do I “think in AngularJS” if I have a jQuery background?
Accepted answer to this question ( which is very well-detailed!) goes like this on its overall summary:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Even the FAQs from angularjs website says not to use it Angularjs FAQs.
DOM Manipulation
Stop trying to use jQuery to modify the DOM in
controllers. Really. That includes adding elements, removing elements,
retrieving their contents, showing and hiding them. Use built-in
directives, or write your own where necessary, to do your DOM
manipulation. See below about duplicating functionality.
If you're struggling to break the habit, consider removing jQuery from
your app. Really. Angular has the $http service and powerful
directives that make it almost always unnecessary. Angular's bundled
jQLite has a handful of the features most commonly used in writing
Angular directives, especially binding to events.
The concept of angularjs seems tempting. In fact, who would not like abstracting away DOM manipulation logic? However, bootstrap makes it so much easy when you are designing web-pages but since bootstrap uses jquery, bootstrap and angularjs together means that the code and overall web-page is still dependent on jquery. Is this mixer completely undesirable? If so then, what is the best way to keep hanging to bootstrap while using angularjs? Simply saying, I don't care so much about jquery but I like bootstrap.
I might be talking in circles here so I will try to reword what I am saying in a single sentence.
What is the best way to use angularjs and bootstrap together without creating spaghetti code where one place is so jquery-based and next angularjs-based?Or is the idea of using bootstrap and angularjs together is conceptually against what angularjs was meant for?

When trying to integrate jQuery things in to Angular, the best approach is to wrap it in a directive. This is what Angular-Strap originally did, but the recent version upgrade to 2.0 completely removed those dependencies and does it all in Angular (and it is a much better product for having done so.) This is the same method that Angular-UI took from day 1 and that continues today.
When you do something like this, the biggest hurdle is trying to keep things "Angular-ized" when working with the DOM. The examples that both Angular-Strap and Angular-UI can provide if you look at the underlying code are very good and should give you the right direction.

Related

Is AngularJS a "front-end" language that can be used for animations instead of JQuery? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working with a design team to redesign my website, and my lead developer told me to tell them I wanted to use AngularJS instead of JQuery for my HTML pages since it is clean code and has the most modern libs; which they agreed to use.
I guess since AngularJS is newer than JQuery they don't have as much experience with it. In the project scope, we agreed that they would do just the "front-end" work (e.g. templated bootstrap, css/html and animations of the site) for the redesign, but they told me that someone from their team said that AngularJS is also "back-end" programming work too...is this accurate?
If they are creating my HTML pages will they have to do "back-end" programming work if they use AngularJS or will this be only "front-end" work? They say they have to use JQuery because this is all "front-end" work.
Also, they are telling me for specific animation effects such as fading in and out of elements etc. that they want to use jQuery and Bootstrap. They tell me that AngularJS is not the best solution for animations, but it's better for manipulating dynamic and real time information for the website...is this accurate?
It seems to me they are just trying to find ways to not use AngularJS and use JQuery instead which they are more comfortable with.
Animations in AngularJS are possible using one of it's modules called ngAnimate it works by adding CSS classes to your HTML elements, but you need to write the classes yourself and you'll be using CSS3 animations which are much better performance wise than JQuery animations, and only require pure CSS. This is what I used at first and it seemed to be working pretty well for me. However, what I found was that as I started doing more complex animations my CSS rules grew huge especially because you have to prefix most CSS with -webkit -moz -o and the like.
At this point I was ready to try alternatives, but I didn't want to go back to jQuery. What I found was GSAP. It's a stupidly powerful and convenient javascript library for animations, and I could integrate it perfectly into Angular using directives. For example I have this in one of my projects:
.directive('highlight', function() {
return {
scope: {},
restrict: 'A',
link: function(scope, element) {
element.on('mouseenter', function() {
TweenMax.to(element, 0.5, {
color: '#000',
borderColor: '#000',
backgroundColor: '#F2F2F2'
});
});
element.on('mouseleave', function() {
TweenMax.to(element, 0.5, {
color: '#BDBDBD',
borderColor: '#BDBDBD',
backgroundColor: '#FFF'
});
});
}
};
})
If I have a link in my HTML shaped like a button it was as simple as writing
<button highlight></button>
And I'd have a button with an animated border, text color, and background color. Moreover, it's reuseable. I don't have to write the highlight rules for every single button in my DOM. I just have to add the attribute highlight.
jQuery works, but it's animations suck. Angular is better, but it's verbose and I personally didn't enjoy implementing it. I lean towards GSAP because of how powerful and flexible it can be while also giving you the best performance in your animation.
As LoganRx said AngularJS is a client side javascript library. It does have a superb animation module that can be added for CSS animations. However if CSS animations don't cut it you are probably going to want to look at Javascript animations as well. This is where Jquery animations would come into play. There are many Javascript animation libraries out there however. Furthermore AngularJS and Jquery have two different purposes. From the example in your comment fade in and fade out animations are basic css animations that are included with the AngularJS animation module. So you could use it for that purpose.
AngularJS obviously has no dependency on JQuery and vice versa. AngularJS is great for model and view binding making ajax requests, routing, CSS animations and a whole lot more! In fact you can build an entire application with just AngularJS. Jquery however is a very general purpose javascript library that gives you utilities that are not available in AngularJS. In many cases you are going to use both libraries.
Yearofmoo who has contributed greatly to AngularJS has a great blog which includes a lot of animation examples for AngularJS. You can find his blog here: http://www.yearofmoo.com/
To address the issue of whether server side work will need to be done is actually quite tricky. It depends on how the application is rendering dynamic content right now. If the whole HTML document is just being generated by the server based on some dynamic information and there are no real restful data end points then yes you are probably going to have to do some server side work to create end points where you can retrieve the dynamic data to be consumed with AngularJS. However if the current application relies heavily on Ajax calls that return Json or XML objects (or if it was really well designed, and it uses serialization frameworks) then you probably won't have to do much server side changes if any at all.
First off AngularJS is a front-end JS framework and technically does not require any back-end programming. It can interact with a back-end very easily and efficiently but AngularJS by itself is not back-end programming.
In terms of the animations there are just as many ways to animate things in Angular as in jQuery. CSS Transitions, Transforms, and Animations will all work with Angular without jQuery it is just a different way of thinking. There is also an Angular Module called NgAnimate which allows for more directed animations for different interactions on the page.
So in conclusion, as an Angular Developer, I would be aware that everything that you are looking for is possible to accomplish with Angular and is not difficult unless they are unfamiliar with Angular. But the aspects of the application that they are claiming would be made easier with jQuery are extremely similar in syntax and execution in Angular. Also, Angular has jqLite built into it which allows for some basic jQuery functionality already.
Angular is not for animations. Angular is framework for developing applications for the web. So things like advanced user interfaces for example.
Doing animations in angular is just bad idea. You can, but they will be bad, although doing them in jQuery can be also bad if you don't use it properly(and by the way jQuery is also not for animations, but have few useful functions). jQuery is still update and it's industry standard. It was published few years ago for the first time, but new versions are coming regularly.
Don't get me wrong here Angular animations might be quite well done, however whole angular it's tones of tones of code, which only some bits have anything to do with animations
Angular is not back end framework. You can connect it easily with backend using for example mean.io but angular itself mostly still stays on front.
By the way, in my opinion angular is slow and don't embrace good practices. Also next version of angular will be not compatible with previous one so no update to most recent version in the future.

angularjs and jquery performance on mobile

I'm creating a single page view website with AngularJs and jQuery intended for iPads and other tablets. I used AngularJs because it was requested by our client, but not knowing the AngularJs philosophy I decided to control click events with jQuery (big mistake, I know).
The thing is, mixing the two libraries together this way seems like it causes a lot of performance issues on mobile devices. I need to load and manipulate with animations hundreds of divs simultaneously (it's a POS app), and I was wondering if implementing directives instead of using jQuery events would give me a performance boost. If not, I really don't see the reason why I should develop directives.
Thanks in advance!
So I improved the problem thanks to a few things. First, reducing the number of angular elements greatly increases performance. Second, I used jquery-animate-enhanced for my movement animations, which also improves translations a lot! Third I used animate.css for my fade animations, which is great.
I'm still trying to improve performance with view recycling kind of like in iOS or Android, but I'm finding that ng-repeat isn't very happy with that. So, I'm probably going to have to implement directives.
Thank you!
Improve performance :
I have been through this situation and the best thing I did to improve the performance of my SPA web-app is to use native Javascript wherever possible instead of jQuery.
For example, I replaced my
$(element).html("This is some text") to element.innerHTML="This is some text"
and
$(document).on('scroll',element,callbackFuntions)
to element.addEventListener('scroll',callbackFunction,{passive:true})
Notice the {passive:true} parameter in my scroll even listener, Passing this, incredibly increased my scrolling experience and helped me get rid of the scroll-lags.
Reason to use Directive:
There might be times when you want to run a script when the particular element is created in the dom and not before it. That's when directives help a lot.

jQuery, jQueryUI (and plugins) and AngularJS - how do they all fit together?

I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.

AJAX and Javascript: suggestions about an interface

I am looking for a correct method to create something very similar to this (just click Next on that page). I would love to receive any suggestions on how this has been made.
I believe that it's all about a DIV wrapping many ul's. When next is clicked, probably a jQuery code is showing an hidden DIV on the right, but wouldn't know how to position it. Everything clearly must be taken from a database.
Can anyone out there give me an advice? I hope this is not the kind of a thumbs-down question, as I tought this community would have been the best place to share this. Thanks a lot.
Take a look at some existing JavaScript MVC frameworks like Backbone.js, AngularJS, or Knockout, to understand some of the design patterns and philosophies behind these kinds of dynamic UIs.
They can be powerful for tools for a modern web app, especially when you have a lot of moving parts in your UI. They'll play well with your backend and datastore via AJAX, and you get nice features like "routing" which can help you do cool things with page flow, all the while keeping your JavaScript clean and concise.

ExtJS and jQuery in ASP.NET

I've seen some posts where jQuery has been favored vs ExtJS. I haven't looked at jQuery in detail, but from what I read so far, jQuery doesn't provide the kind of UI which comes with ExtJS. Am I correct? Why would some of you prefer jQuery in ASP.NET?
Thanks
Why not use both? ExtJS does allow you to use jQuery as well. In fact, you can easily configure ExtJS to use jQuery for its core functionality. I've done this before and it works quite well.
This way you can happily use the best of both worlds.
http://extjs.com/forum/showthread.php?t=29702&highlight=jquery
There are two schools of javascript frameworks, ones that focus on widgets (Yui, ext, etc) , and ones that focus on behavior (jquery, prototype, moo, etc)
JQuery just makes life easier to build dynamic, sexy sites. If you are just doing system.draggy.droppy asp development, you can ignore both, since you probably aren't really touching javascript at all. But if you do use javascript, it is worth your time to learn one of the frameworks that are out there, and jquery is currently the most popular.
In fact Ext provides a one-stop-shop.
It has a solid foundation which provides behaviour. Event pub/sub, effects, DOM manipulation etc. And it can provide these through its own standalone foundation, OR by wrapping a foundation library of your choice (like jQuery)
And then on TOP of that cross-library foundation layer, it provides a unified set of Components all stemming from one Component base class. It provides managed screen layout which responds to browser geometry changes, and managed lifecycle management of the Components.
There's nothing out there like it.
jQuery does have a widgets library - it's fairly new, but pretty cool. It can only get better!
jQuery UI
iam experienced on extjs and fresher for jquery.jquery is very light weight than extjs.
About JQUERY:
easy to use, fast, great DOM manipulation, good effects. Great window.onLoad handler.
About EXTJS:
Ivery very extensive, great DOM manipulation, solid effects. The fastest to get things done when puzzling out on the commandline.

Categories