Angular Directives For The Rest Of Us

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

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