Angular replacements for jQuery-based libraries

Angular replacements for jQuery-based libraries

Angular directives are not meant to be used for jQuery wrappers but for full featured reusable web components


Tymon Tobolski

January 27, 2014


  1. 4.

    Dark ages jQuery as polyfill for broken browsers ! tons

    of various features ! libraries “based on jQuery"
  2. 6.

    Native JS APIs are pretty good and supported jQuery(“meta[name=csrf]”).attr(“content") jQuery(“.someClass”)

    $.each, $.map document.querySelector(“meta[name=csrf]”).getAttribute(”content”) document.getElementsByClassName(‘someClass”) Array.forEach, vs
  3. 7.

    angular.element / jqLite addClass() after() append() attr() bind() children() clone()

    contents() css() data() empty() eq() find() hasClass() html() next() on() off() one() parent() prepend() prop() ready() remove() removeAttr() removeClass() removeData() replaceWith() text() toggleClass() triggerHandler() unbind() val() wrap() Most not really needed at all
  4. 18.

    angular-ujs <a href="..." data-method="delete" data-confim="Are you sure?"/> XHR DELETE +

    window.confirm() ! ! XHR form submission 40 LOC
  5. 20.

    date range picker impossible and crazy to write by yourself

    ! based on moment and moment-range! ! two way sync: UI ⁵ $scope
  6. 21.
  7. 23.

    <div ng-show="visible" ng-click="handlePickerClick($event)"> <div> <button ng-click="move(-1, $event)">&#9664;</button> <div ng-repeat="month in

    months"> <div>{{ }}</div> <table> <tr> <th ng-repeat="day in month.weeks[1]”> {{‘dd') }} </th> </tr> <tr ng-repeat="week in month.weeks"> <td ng-class=‘{ "selected": day.selected, "disabled": day.disabled, "start": day.start }' ng-repeat="day in week track by $index" ng-click="select(day, $event)"> {{ }} </td> </tr> </table> </div>
  8. 24.

    ! <button ng-click="move(+1, $event)">&#9654;</button> </div> <div> <div> Select range: <select

    ng-click="preventSelect($event)" ng-model="quick" ng-options="e.range as e.label for e in quickList"> </select> </div> <div> <button ng-click="ok($event)">Apply</button> <a ng-click="hide($event)">cancel</a> </div> </div> </div> <span> <span ng-show=“model"> {{ model.start.format("ll") }} - {{ model.end.format("ll") }} </span> <span ng-hide="model">Select date range</span> </span>
  9. 25.

    $scope.selecting = false; $scope.visible = false; $scope.start = null; !

    // ... !, function(date) { // ... scope.months[m].weeks[w][d] = { date: date, selected: ..., disabled: ..., start: ... }; }) ! // ... ! domEl = $compile(angular.element(pickerTemplate))(scope); element.append(domEl);
  10. 27.

    Best practices Base as much as possible on data manipulation,

    not DOM ! Use proper data structures, not strings ! Defer intensive calculations until really needed ! Walk around watcher performance -
  11. 28.

    Learn to write declarative directives ! Think of directives as

    reusable components, not wrappers ! Make the web better
  12. 29.

    Thank you! Follow more on Angular.js on our blog:

    Tymon Tobolski @iteamon