Angular Directives For The Rest Of Us

Slide 1

Slide 1 text

Angular Directives for the rest of us

Slide 2

Slide 2 text

Rin Räuber @rinpaku ! developer at bitcrowd

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Angular is what HTML would have been, had it been designed for building web-apps

Slide 5

Slide 5 text

lets you build a new vocabulary for HTML – a DSL for your app Angular

Slide 6

Slide 6 text

Directives

Slide 7

Slide 7 text

What the fuck is a Directive?

Slide 8

Slide 8 text

teach your browser new tricks ! add behavior to an element and/or transform the DOM Directives

Slide 9

Slide 9 text

THIS

Slide 10

Slide 10 text

! ! ! $(function() {! $("#datepicker").datepicker();! });! instead of this

Slide 11

Slide 11 text

THIS

Slide 12

Slide 12 text

instead of this

Slide 13

Slide 13 text

include angular.js the setup

Slide 14

Slide 14 text

include angular.js create your Angular app angular.module(“myAwesomeAngularApp”, []); the setup

Slide 15

Slide 15 text

include angular.js create your Angular app angular.module(“myAwesomeAngularApp”, []); have Angular bootstrap it

the setup

Slide 16

Slide 16 text

the setup $ yo angular bitch shortcut!

Slide 17

Slide 17 text

Our ﬁrst Directive

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

restrictions A is for attributes

Slide 22

Slide 22 text

restrictions C is for CSS classes

Slide 23

Slide 23 text

restrictions E is for elements

Slide 24

Slide 24 text

restrictions E is for elements no kittens for IE =< 8

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

let’s look at an example.

Slide 28

Slide 28 text

kittens come in diﬀerent sizes, so …

Slide 29

Slide 29 text

let’s add an attribute

Slide 30

Slide 30 text

myApp.directive('myDirective', function(){ return { link: function(scope, element, attrs){ // do something } }; }); the linkin’ function

Slide 31

Slide 31 text

modifying the DOM function(scope, element, attrs){ // change the height of the element element.css(‘height’, ‘42px’); }

Slide 32

Slide 32 text

let’s look at an example. again.

Slide 33

Slide 33 text

… but what about behavior?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

let’s look at an example. one last time.

Slide 36

Slide 36 text

I wish I had known™

Slide 37

Slide 37 text

scope.$apply

Slide 38

Slide 38 text

scope

Slide 39

Slide 39 text

code. again.

Slide 40

Slide 40 text

when to use scope.$apply

Slide 41

Slide 41 text

changes to the scope that Angular doesn’t know about

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

changes to the scope that Angular doesn’t know about browser DOM events setTimeout asynchronous requests … ng-click $timeout $http

Slide 46

Slide 46 text

… but how do I test this stuﬀ?

Slide 47

Slide 47 text

you DO test, don’t you?

Slide 48

Slide 48 text

Unit Testing w/ Karma and Jasmine

Slide 49

Slide 49 text

install and conﬁgure Karma $ npm install -g karma $ karma init run Karma karma start rejoice \o/ the setup

Slide 50

Slide 50 text

describe(‘my thing', function(){ // some setup stuff ! it(“does something", function() { expect(result).toEqual(expectedResult); }); Jasmine specs

Slide 51

Slide 51 text

example!

Slide 52

Slide 52 text

Built-in Directives

Slide 53

Slide 53 text

ng-click

Kitten

Slide 54

Slide 54 text

Hide me!

ng-hide

Slide 55

Slide 55 text

Hide me!

ng-show

Slide 56

Slide 56 text

I think, therefore I am.

ng-if

Slide 57

Slide 57 text

Moar Directives

Slide 58

Slide 58 text

even more awesome angular directives

Slide 59

Slide 59 text

some words of advice.

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Know where to use scope.$apply. ! (And why.)

Slide 62

Slide 62 text

Read the fucking manual.

Slide 63

Slide 63 text

Don’t reimplement existing directives.

Slide 64

Slide 64 text

Test.

Slide 65

Slide 65 text

Recap

Slide 66

Slide 66 text

… 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

Slide 67

Slide 67 text

kthxbai @rinpaku abstraction.killedthecat.net

Slide 68

Slide 68 text

Writing Directives (Talk by Miško Hevery) Resources unrelated, but awesome: Building 2048 in Angular