Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Tymon Tobolski

Other Decks in Programming

Transcript

  1. Dark ages jQuery as polyfill for broken browsers ! tons

    of various features ! libraries “based on jQuery"
  2. 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, Array.map vs
  3. 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. angular-ujs <a href="..." data-method="delete" data-confim="Are you sure?"/> XHR DELETE +

    window.confirm() ! ! XHR form submission 40 LOC github.com/monterail/angular-ujs
  5. date range picker impossible and crazy to write by yourself

    ! based on moment and moment-range! ! two way sync: UI ⁵ $scope
  6. <div ng-show="visible" ng-click="handlePickerClick($event)"> <div> <button ng-click="move(-1, $event)">&#9664;</button> <div ng-repeat="month in

    months"> <div>{{ month.name }}</div> <table> <tr> <th ng-repeat="day in month.weeks[1]”> {{ day.date.format(‘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)"> {{ day.date.date() }} </td> </tr> </table> </div>
  7. ! <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>
  8. $scope.selecting = false; $scope.visible = false; $scope.start = null; !

    // ... ! scope.range.by(oneDayRange, function(date) { // ... scope.months[m].weeks[w][d] = { date: date, selected: ..., disabled: ..., start: ... }; }) ! // ... ! domEl = $compile(angular.element(pickerTemplate))(scope); element.append(domEl);
  9. 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 - github.com/Pasvaz/bindonce
  10. Learn to write declarative directives ! Think of directives as

    reusable components, not wrappers ! Make the web better
  11. Thank you! Follow more on Angular.js on our blog: Codetunes.com

    Tymon Tobolski @iteamon Monterail.com Rangeapp.com