Using jQuery components (e.g. jQRangeSlider) in Angular.js?

[Victor Hooi]

Hi,

I'm new to Angular.js and I'm looking at learning it for a small side-project.

I'm wondering how you use it with existing jQuery components, or how you might port them over?

For example, I want to use jQRangeSlider in my app:

http://ghusse.github.com/jQRangeSlider/

What's the recommended way to use this to say, filter data by date in a table in Angular.js? Should I re-implement it? And if so, are there any good examples I can look for, to see how things are equivalent between the two? Or is there an easy way to use it as-is?

Cheers,

Victor

[Peter Bacon Darwin]

Have a look at github.com/angular-ui/angular-ui/.  There are a number of jQuery widgets wrapped as AngularJS directives in there.

It is also true that in many cases it is quicker and easier to completely reimplement in pure AngularJS.

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Björn Lindqvist]

That's the standard answer given when someone asks for using existing components in Angular. Is it really that hard to integrate Angular with existing mature widget libraries like jQuery UI, Ext JS, Kendo UI and many more? Angular UI doesn't seem to be production ready yet (at version 0.4.0) and as no equivalent to jQRangeSlider, for example. 

[Peter Bacon Darwin]

No it is not that hard. See angular ui for examples!
But it is sometimes easier not to wrap!!

Pete
...from my mobile.

[Pawel Kozlowski]

Hi!

It is a "standard" answer since there is no other, really (at least
I'm not aware of any other). In the angular-ui we were experimenting
with different approaches for over a year now and while some jQuery
plugins are really easy to wrap (and things can be even handled
"automatically" using jQuery Passthrough) some others are really pain
in a neck to wrap. The main issue is that the philosophy behing jQuery
and AngularJS widgets lifecycle is so much different.

Peter is right that often times it is not worth it to try to reuse and
wrap existing plugins but instead create a native AngularJS version.
This is something we've started to do in the
http://angular-ui.github.com/bootstrap/ repo and this approach works
amazingly well in practice. To me suprising revelation was that
AngularJS cuts massive amount of code from widgets when done in a
native way.

As an example - yesterday I've created a native implementation of
Twitter's buttons directive. The native version has 70 loc
(https://github.com/angular-ui/bootstrap/blob/buttons/src/buttons/buttons.js)
and took me 30 minutes to write.
The original bootstrap's implementation has 100 LOC and I know of
other AngularJS directives that wrapped it to add another 160 LOC.
So in the end you end up with 260 LOC for the wrapped implementation
vs. 70 of native directive (almost 4x difference!).

I'm not saying everything should be re-written as a native AngularJS
directive but just saying that sometimes wrapping existing code might
be tricky or simply not worth it.

Cheers,
Pawel

--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Björn Lindqvist]

Hi!

So what stuff is hard to wrap? I'd like to use composite widgets like
grid and calendar from Kendo UI. You can find lots of examples
following this link: http://demos.kendoui.com/web/grid/index.html. In
cases like that, I don't think Angular UI (yet) can replace existing
widgets. It would definitely be slightly disappointing to not be able
to use Kendo with Angular.

2013/2/18 Pawel Kozlowski <pkozlowski...@gmail.com>:

mvh/best regards Björn Lindqvist
http://www.bjornlindqvist.se/

[Tim Sweet]

Hi Björn,

The grid project has most of the same features (and some that kendoUI doesn't have) and is easier to set up and use than kendoUI and is written in angular native. what features is our grid you missing that you would need to use?

Cheers,

[Victor Hooi]

Hi Tim,

I'm assuming you mean the ng-grid project, right? =)

Yeah, it is pretty awesome - but one of the first things that struck me about it is that it doesn't seem to quite hit the visual polish of other toolkits?

I'm sure it's something that could be fixed easily - but compare it to the look of say:

ExtJS grid:

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/live-search-grid.html

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/row-editing.html

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/progress-bar-pager.html

Or FuelUX:

http://exacttarget.github.com/fuelux/#datagrid

Or Slickgrid:

http://mleibman.github.com/SlickGrid/examples/example4-model.html

So yes, working on the visual side of ng-grid would be awesome! =)

For features, it does have filtering, pagination etc, which is all cool..

One thing I was thinking of was per-column text filtering - as in, a text box above each column to do live filtering:

http://www.datatables.net/release-datatables/extras/ColReorder/col_filter.html

Is something like that possibly with ng-grid?

Cheers,

Victor

[Timothy Sweet]

The grid lacks polish by design, it is intended to be used with templates to improve the look and functionality as the user intends. Templates are extremely flexible because of angular.

As for per-column filtering with a text box above the column, under the header text, check out in the source workbench/index.html + main.js (I know it's a mess in that file.) The per column filtering is a plugin + header cell template.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
-Tim Sweet

[Björn Lindqvist]

Hi Tim,

The Kendo grid looks better and is more responsive than ng-grid. There
is a noticeable lag when you click on a column header to sort and grid
update in ng-grid, for example. The features I miss are customizeable
toolbar template, column aggregates, flexible column filtering and
built-in create/delete/edit-actions. Also server-side data connection
doesn't work. I'd expect it to fetch another page of data when you,
change sort order or go to another page. Instead it seems to fetch all
data on initial page load. Maybe that's a bug?

2013/2/21 Tim Sweet <timot...@gmail.com>:

[Timothy Sweet]

First off, aesthetics are completely subjective and our grid is much
easier to template for than kendo.

In version 2.0 (soon to be released) all of the performance issues are
taken care of. see here:
http://plnkr.co/edit/9acsFx9JN7npcvmNwYoj?p=preview

And we have native customize-able aggregate grouping support .

> You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/QBBX_oGx90w/unsubscribe?hl=en-US.
> To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--

-Tim Sweet

[Sean McLellan]

Here's what I came up with, I'm new at this so critique away

app.directive('rangeSlider', function () {
        return {
            scope: {
                values: '=rangeSlider',
            },
            link: function (scope, element, attrs) {

                //initialize the range slider and set some defaults -- should probably be passed in via attr/scope vars rather than set here.
                element.rangeSlider({
                    //arrows: false,
                    valueLabels: "hide",
                    range: {min: 4, max: 4},
                    defaultValues:{
                        min: -2,
                        max: 2
                    },
                    bounds: {
                        min: -12,
                        max: 12
                    }
                });

                //Bind to the valueschanging event.
                element.on("valuesChanging", function (e, data) {
                    scope.$apply(function () {
                        scope.values.min = data.values.min;
                        scope.values.max = data.values.max;
                    });
                });

                // update the range whenever the value on the scope changes
                scope.$watch('min', function(value) {
                    element.rangeSlider("min", value);
                });
                scope.$watch('max', function (value) {
                    element.rangeSlider("max", value);
                });
            }
        };
    });