Not working with jqLite properly

[gauravjhs]

I am facing a problem in using this with jqLite.
It throws an error message as "'ui.sortable: jQuery should be included before AngularJS!'".

For resolving this, I just followed these steps:

1. Wrapped element with jQuery, like -
   element = $(element);
2. Checked that element is jQuery instance or not :
   if ((!angular.element.fn || !angular.element.fn.jquery) && !(element instanceof jQuery)) {
   $log.error('ui.sortable: jQuery should be included before AngularJS!');
   return;
   }

[thgreasi]

Hi there.
What version of the lib are you using?
In the latest version, we already log a message when jQuery is not used by angular.

[gauravjhs]

Hi,

You are logging the message and returning. That's why the functionality will not work.
As jqLite is faster, we force Angular to use it. In case we require any directive to use jquery, we wrap element in a jquery object.

Suggestion to resolve this: Check if jquery is present and if element is not Jquery object then wrap it in Jquery.

Hope I am able to make sense on this.

[thgreasi]

Oh, needed a second read on this.
Allowing jQuery to be loaded after Angular is a big NO from my side and we intentionally do not use the workaround you mentioned.
We need to load jQuery before Angular so that Angular uses it for its DOM manipulations with angular.element. This way we ensure that any DOM removal will follow the jQuery DOM tear-down procedure, properly cleaning any .data() stored on the elements and any jQuery plugins instantiated on them and their descendants.

[thgreasi]

Moreover, as discussed in other issues I would discourage any approach where angular.element is patched with jQuery after the page loads (eg: angulat.element = $;), since:
1 jqlite has some extra methods that need to be patched on top of the jQuery (this is done automatically when jQuery is loaded before Angular)
2 we can't be sure that changing and patching angualr.element will work 100% as intended (and memory leaks are a big deal).

[gauravjhs]

We are loading Jquery before Angular but forcing it to use jqLite using ngJq tag.

[thgreasi]

Despite of that, we still need to have angular to use jquery so that
angular properly clears removed DOM elements and releases objects & plugins
associated with them.
A possible implementation would require doing the DOM clearing manually
when something like $destroy is called. This should need a lot of testing
to ensure that there are no memory leaks and the same approach should also
be implemented on every directive that an application uses.
Is ui-sortable the only plug-in wrapper directive that you use?

Note that the ngJq tag was initially created for those that use
jQuery.noConflict and have it aliased on a different variable name. The
preference of the Angular team on using jQuery whenever available (instead
of jQLite) is quite obvious (I think) by the fact that it's the default

Angular behavior.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[thgreasi]

Here is a proof of concept branch and a proof of concept codepen example that would need a lot of testing.

[sddsdei]

Same issue 👎

I am facing a problem in using this with jqLite.
It throws an error message as "'ui.sortable: jQuery should be included before AngularJS!'".

Checked that element is jQuery instance or not :
if ((!angular.element.fn || !angular.element.fn.jquery) && !(element instanceof jQuery)) {
$log.error('ui.sortable: jQuery should be included before AngularJS!');
return;
}

[thgreasi]

Have you tried loading jQuery before angularjs, as demonstrated in all the provided examples? Is that so big change for your app?

[sddsdei]

@thgreasi I have tried to load jQuery before angularjs but same problem
import jquery from 'jquery';
import angular from 'angular';

:(

[thgreasi]

What's the order of the actual <script> tags on the final HTML (if they actually get emitted)? I don't know what packager you are using in your app, but you might have to configure it to treat jQuery as a dependency of angular, to force loading it earlier. That's what I had to do in the requirejs example found in README.

[sddsdei]

I am using AngularJS Starter repo for Angular + ES6 + (Webpack or JSPM)

[sddsdei]

Any help

[thgreasi]

Please take a look at #478 and webpack's module shimming and keep in mind that jquery should be imported before angularjs in your entry point module. I would also prefer to move this discussion over to #478.

[sddsdei]

Not working, Why i have to use jquery if i am using angular. I thing this wrong library to use in angular project. I have to use another option or have to build own.