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.
Related
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.
As far as I have seen, there are no support for animations in the current (v0.9.0) Angular Material Design library. It's neither documented at official docs. Although it is explained breafly at Google Material Design apecification.
So, how should we go ahead implementing animations, and in particular state trantitions, with Angular? I believe that there are different alternatives such as use of CSS, JQuery, ++ but what direction should we aim for?
Angular Material doesn't aim to provide any animations. It provides css classes that you can use to "link" your own animations to (enter/leave classes).
Also the official angular page to animation states:
Animations in AngularJS are completely based on CSS classes.
So probably this should be the way to go. Also because regarding animations nowadays you can do almost everything with pure CSS (no js needed).
As far as I read, many use animate.css in combination with Angular Material.
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'm following angular docs about animations and the approach is like that:
html
<div ngview class="animate">
css
.animate.ng-enter{
...
}
.animate.ng-leave{
...
}
But following this page, the aproach for the same case is something like that:
html
<div ngview ng-animate="'animate'">
css
.animate-enter{
...
}
.animate-leave{
...
}
I would to know the difference about these two approaches, about "best practice", performance and everything...
From what I understand the second page you have listed is just a wrapper for ngAnimation into a directive. I am not even sure if this is official and if is kept up to date with latest angular releases (especially 1.2).
Update: ngAnimate reading through the page on yearofmoo I found this that I think answers your question:
> One of the major reasons why the ngAnimate directive was removed was
because it was difficult to integrate 3rd-party CSS animation
libraries into your code. A good example is with the animate.css
library, which, to make it work with ngAnimate, you would have to
hardcode the combination of CSS classes into the ngAnimate attribute
for each event that takes place. This would be much easier with a
driver or module that you load into your application and boom things
are working.
I think you should be more concerned on where you would like to write your animations (eg CSS3 vs JS) and go with the mainstream way.
You can find a good up to date guide on yearofmoo explaining the different approaches.
You can also watch egghead.io lessons 48-50
Using the directive ng-animate is deprecated: the best practice is that all animations are done by adding classes to elements, as in your first example and link to the Angular docs. A fairly comprehensive guide is available at Year of Moo.
One point to make is that you can still use this to use custom animations defined in javascript. See the Year of Moo article for more information, but they start off as:
myApp.animation('.animate',....
This would be used in cases where you need to support older IE (that doesn't support various CSS transitions/animations), you might want to use a transition from an existing Javascript library, or you might have something very simple Javascript behaviour that still should be treated like an animation (say, adding a class for a few seconds, and then removing it). It's actually a fairly powerful method that allows you to (ab)use Javascript for visual niceties, but keeps it extremely separate from any other logic.
There are three approaches to create animation, css transition, keyframe and JS animation. each has their own pros and cons. You can read this nice article for a comprehensive understandings.
Remastered Animation in AngularJS 1.2 - yearofmoo.com : http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
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?