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 .
Related
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.
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.
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.
What are the main differences between a Jquery Widget and a Jquery Plugin.
Mainly:
What purposes do they serve
Is one better than another or do they both have their place in the jquery world
What is an example where I would want to use one over another
What is an example if any where either would be a fine solution
What is an example of a widely used widget and a widely used plugin
I've never heard of a jQuery widget. I imagine some people might use the term to describe a... widget... that has been made with jQuery. Certainly there are widgets in jQuery UI, for example. It's an odd question.
A widget is a widget (always includes a visual element, sometimes includes reusable functionality), and can be a subset of a plugin or a plugin in and of itself.
A plugin extends jQuery directly and may or may not have a visual component.
Difference between jQuery Widget and plugin is state.
please see details on it here
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.