UI Animations Jquery vs AngularJS - javascript

I am developing a web app and using AngularJS. But, until now, I have no UI animations. I'm wondering to use jQuery or AngularJS to make the animations.
I know that AngularJS has ngAnimate directive, as I can build my own directive, but there are a lot of good animations in jQuery and a lot of good examples. Why should I make UI Animations using AngularJS? Only to keep the AngularJS standard in my code? Or there are more than that?
Is common to always use AngularJS for all animations when we are talking about an AngularJS web app?

If you're using angular's MVVM methodology when binding your data to your UI, angular-animate would be much much simpler and more intuitive.
Depends on the animations you want to have.. Using angular-animate you could easily do things like: stagger animation for ng-repeat items on entry, leave and move (different for each). easy with angular-animate, but could be hard without, again - depends on your animations, how you access and modify data ,etc..

Angular-animate allows you to easily:
Use existing CSS classes that built-in angular directives use whenever they manipulate the DOM: .enter, .leave, .enter-active, .leave-active etc. You can easily add CSS 3 transitions to animate when items are added or removed from an ng-repeat, for example.
Use scripting libraries to do the animations (jquery, tweenmax, etc). This is also CSS class driven.

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.

Design Portal Container

I am under a scenario where I have to build a portal container in HTML5 and Javascript. This container will be provided with 'n' number of widget URLs and container is responsible to load them through Ajax in DIVs (not in iFrame).
Now the question is how to make the definitions of JavaScript functions of each widget, separate? For example, I have two DIVs on the container page, Widget1_DIV and Widget2_DIV. HTML, JS and CSS of Widget1 will be placed in Widget1_DIV and similarly for Widget2.
Now suppose both the widgets have a JS function with same name, 'foo', which will conflict once they are embedded in same DOM. I want to know that will RequireJS helps in avoiding the conflict or the right solution to make both widget's DIVs modular?
Thanks
Did you consider using any JS Framework? I recommend you AngularJS because of its functionality, MVC approach and flexibility. I know, that this requires a lot of work on the beginning of project life-cycle, but later certainly you observe advantages and robust page structure.
In addition, Angular JS allows you to preserve separated project structure:
- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js
See more: https://angularjs.org/
Of course you don't need to use this specific framework, there are a lot of other fantastic tools: Knockout, Backbone, ... .
How about using a dashboard framework for that. This should make things easier.
For ex.:
http://dashing.io/

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

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.

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.

iCheck plugin with Angular.js

There's an awesome plugin for checkboxes and radio buttons customization (seems to be a best one for that).
https://github.com/damirfoy/iCheck
How do I connect it with Angular.js?
I'm not too familiar with Angular. Is it even possible?
Yes you can use iCheck, or pretty much any jQuery plugin with Angular.
The easiest way would be to use the jQuery Passthrough feature of AngularUI or to write your own Angular directive to wrap a jQuery feature or plugin.
Ex. of wrapping jQuery plugin call in a directive:
AngularJS Quicksand
How do I force jQuery to "listen" for, and activate plugins on, future AngularJS ng-repeat elements?
Since you are new to Angular, I suggest you check out the videos over on http://egghead.io. They are an excellent leeway in the AngularJS world. Plus there's a hand-full of videos showcasing the ins and outs of directives .

Categories