Angular Directives For The Rest Of Us

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