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.

[ajoslin]

Feel free to open a pull request on the angular.js repository fixing this.

[dziamid]

I'm getting element.height() is not a function in growTextarea function when using without jquery.

[thynctank]

@dziamid That's right. JqLite does not include this method. See https://docs.angularjs.org/api/ng/function/angular.element for the list of methods it does include.

[dziamid]

@thynctank why is in the source code then?

[ThomasBurleson]

@dziamid - where do you see a height() call in the Angular Material source? Are you using the latest version from master?