Remove jQuery Dependency

[ajoslin]

Pending Web Animations polyfill.

[ThomasBurleson]

Originally jQuery was used with Material Ink CSS-based effects.
Since the current ink is now Canvas-based, it is possible that the jQuery dependency can be removed immediately. I will review to insure that the Material Stretchbar is not affected by such a removal.

[rayshan]

👍

[ajoslin]

Removed.

[iasandcb]

It seems that JQuery dependency still remains, in particular,

function MaterialButtonDirective(ngHrefDirectives) {
var ngHrefDirective = ngHrefDirectives[0];
return {
restrict: 'E',
transclude: true,
template: '',
compile: function(element, attr) {

  // Add an inner anchor if the element has a `href` or `ngHref` attribute,
  // so this element can be clicked like a normal `<a>`.
  var href = attr.ngHref || attr.href;
  var innerElement;
  if (href) {
    innerElement = angular.element('<a>')
      .attr('ng-href', href)
      .attr('rel', attr.rel)
      .attr('target', attr.target);

  // Otherwise, just add an inner button element (for form submission etc)
  } else {
    innerElement = angular.element('<button>')
      .attr('type', attr.type)
      .attr('disabled', attr.ngDisabled || attr.disabled)
      .attr('form', attr.form);
  }

i.e. angular.element('') works on JQuery.

[optyler]

AngularJS embed jqlite (a lightweigth jquery) allowing simple DOM manipulations
https://docs.angularjs.org/api/ng/function/angular.element

So, I think it's ok, their is no hard dependency on jQuery library here.

[iasandcb]

For example,

https://material.angularjs.org/#/material.components.button/readme/overview

emits errors:

TypeError: Cannot read property 'attr' of undefined
at Object.MaterialButtonDirective.compile (http://localhost:8889/docs.js:1830:11)

when you remove

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

in index.html . It implies that angular.element("<button>") doesn't work on jqlite.

[ajoslin]

Fixed via 090e3c1

The problem was actually the attr function.

We were chaining calls to attr, but angular jqLite has an inconsistency with jQuery. In angular, if the second argument is null, it does not return the element from the attr() method, it returns the value of the attr you gave.

[iasandcb]

Thanks for your work on it. Meanwhile, is there any chance to make jqLite consistent with jQuery in terms of the chaining mechanism?

[rayshan]

@iasandcb jqlite is angular dependency, no?

[iasandcb]

@rayshan Yes, so in order to make such a change, angular should adopt it.