Pro Yearly is on sale from $80 to $50! »

Angular Directives For The Rest Of Us

Angular Directives For The Rest Of Us

A very basic introduction to directives. Talk at the Angular Meetup Berlin, April 9th 2014

Fdc75e4cf5aa4bf67af27f5ebe19d261?s=128

Rin Raeuber

April 09, 2014
Tweet

Transcript

  1. Angular Directives for the rest of us

  2. Rin Räuber @rinpaku ! developer at bitcrowd

  3. Content what is a directive? ! how to roll your

    own. ! testing.
  4. Angular is what HTML would have been, had it been

    designed for building web-apps
  5. lets you build a new vocabulary for HTML – a

    DSL for your app Angular
  6. Directives

  7. What the fuck is a Directive?

  8. teach your browser new tricks ! add behavior to an

    element and/or transform the DOM Directives
  9. <datapicker></datapicker> THIS

  10. <input type=‘text’ id=‘datepicker’>! ! <script>! $(function() {! $("#datepicker").datepicker();! });! </script>

    instead of this
  11. THIS

  12. instead of this

  13. include angular.js <script src=“angular.js” type=“text/javascript"></script> the setup

  14. include angular.js <script src=“angular.js” type=“text/javascript"></script> create your Angular app angular.module(“myAwesomeAngularApp”,

    []); the setup
  15. include angular.js <script src=“angular.js” type=“text/javascript"></script> create your Angular app angular.module(“myAwesomeAngularApp”,

    []); have Angular bootstrap it <div ng-app=”myAwesomeAngularApp”></div> the setup
  16. the setup $ yo angular bitch shortcut!

  17. Our first Directive

  18. <kitten></kitten>

  19. myApp.directive('kitten', function(){ return { // directive definition object }; }

    ); Registering a directive
  20. restrictions myApp.directive('myDirective', function(){ return { restrict: ‘ACE’ }; } );

  21. restrictions A is for attributes <div kitten></div>

  22. restrictions C is for CSS classes <div class=“kitten”> </div>

  23. restrictions E is for elements <kitten></kitten>

  24. restrictions E is for elements <kitten></kitten> no kittens for IE

    =< 8
  25. myApp.directive('myDirective', function(){ return { template: ‘I am a template’ };

    } ); template
  26. myApp.directive('myDirective', function(){ return { templateUrl: ‘me_too.html’ }; } ); templateUrl

  27. let’s look at an example.

  28. kittens come in different sizes, so …

  29. let’s add an attribute <kitten width=’200’ height=‘50’> </kitten>

  30. myApp.directive('myDirective', function(){ return { link: function(scope, element, attrs){ // do

    something } }; }); the linkin’ function
  31. modifying the DOM function(scope, element, attrs){ // change the height

    of the element element.css(‘height’, ‘42px’); }
  32. let’s look at an example. again.

  33. … but what about behavior?

  34. adding an event listener function(scope, element, attrs){ element.on(‘mouseover’, function(){ alert(‘meooow’);

    }) }
  35. let’s look at an example. one last time.

  36. I wish I had known™

  37. scope.$apply

  38. scope

  39. code. again.

  40. when to use scope.$apply

  41. changes to the scope that Angular doesn’t know about

  42. changes to the scope that Angular doesn’t know about browser

    DOM events
  43. changes to the scope that Angular doesn’t know about browser

    DOM events setTimeout
  44. changes to the scope that Angular doesn’t know about browser

    DOM events setTimeout asynchronous requests …
  45. changes to the scope that Angular doesn’t know about browser

    DOM events setTimeout asynchronous requests … ng-click $timeout $http
  46. … but how do I test this stuff?

  47. you DO test, don’t you?

  48. Unit Testing w/ Karma and Jasmine

  49. install and configure Karma $ npm install -g karma $

    karma init run Karma karma start rejoice \o/ the setup
  50. describe(‘my thing', function(){ // some setup stuff ! it(“does something",

    function() { expect(result).toEqual(expectedResult); }); Jasmine specs
  51. example!

  52. Built-in Directives

  53. ng-click <p ng-click=‘alert(“meow!”)’> Kitten </p>

  54. <p ng-click=‘hidden=true’ ng-hide=‘hidden’> Hide me! </p> ng-hide

  55. <p ng-click=‘shown=false’ ng-show=‘shown’> Hide me! </p> ng-show

  56. <p ng-if=‘think==true’> I think, therefore I am. </p> ng-if

  57. Moar Directives

  58. even more awesome angular directives

  59. some words of advice.

  60. Don’t try to use “self-closing” or void tags for your

    directives. <kitten/>
  61. Know where to use scope.$apply. ! (And why.)

  62. Read the fucking manual.

  63. Don’t reimplement existing directives.

  64. Test.

  65. Recap

  66. … that directives are awesome ! … how to build

    one ! … how to manipulate the DOM and add event listeners in its link function ! … how to test a directive you hopefully learnt
  67. kthxbai @rinpaku abstraction.killedthecat.net

  68. Writing Directives (Talk by Miško Hevery) Resources unrelated, but awesome:

    Building 2048 in Angular