A very basic introduction to directives. Talk at the Angular Meetup Berlin, April 9th 2014
Angular Directivesfor the rest of us
View Slide
Rin Räuber@rinpaku!developer at bitcrowd
Contentwhat is a directive?!how to roll your own.!testing.
Angularis what HTML would have been, had it been designed for building web-apps
lets you build a new vocabulary for HTML – a DSL for your appAngular
Directives
What the fuckis a Directive?
teach your browser new tricks!add behavior to an element and/or transform the DOMDirectives
THIS
!!!<br/>$(function() {!<br/>$("#datepicker").datepicker();!<br/>});!<br/>instead of this
insteadof this
include angular.jsthe setup
include angular.jscreate your Angular appangular.module(“myAwesomeAngularApp”, []);the setup
include angular.jscreate your Angular appangular.module(“myAwesomeAngularApp”, []);have Angular bootstrap itthe setup
the setup$ yo angular bitchshortcut!
Our firstDirective
myApp.directive('kitten',function(){return {// directive definition object};});Registering a directive
restrictionsmyApp.directive('myDirective',function(){return {restrict: ‘ACE’};});
restrictionsA is for attributes
restrictionsC is for CSS classes
restrictionsE is for elements
restrictionsE is for elementsno kittensfor IE =< 8
myApp.directive('myDirective',function(){return {template: ‘I am a template’};});template
myApp.directive('myDirective',function(){return {templateUrl: ‘me_too.html’};});templateUrl
let’s look atan example.
kittenscomein differentsizes,so …
let’s add an attributeheight=‘50’>
myApp.directive('myDirective', function(){return {link: function(scope, element, attrs){// do something}};});the linkin’ function
modifying the DOMfunction(scope, element, attrs){// change the height of the elementelement.css(‘height’, ‘42px’);}
let’s look atan example.again.
… butwhat aboutbehavior?
adding an event listenerfunction(scope, element, attrs){element.on(‘mouseover’, function(){alert(‘meooow’);})}
let’s look atan example.one last time.
I wishI had known™
scope.$apply
scope
code.again.
when to usescope.$apply
changes to the scopethat Angular doesn’tknow about
changes to the scopethat Angular doesn’tknow aboutbrowser DOM events
changes to the scopethat Angular doesn’tknow aboutbrowser DOM eventssetTimeout
changes to the scopethat Angular doesn’tknow aboutbrowser DOM eventssetTimeoutasynchronous requests…
changes to the scopethat Angular doesn’tknow aboutbrowser DOM eventssetTimeoutasynchronous requests…ng-click$timeout$http
… but howdo I testthis stuff?
you DO test,don’t you?
Unit Testing w/Karma and Jasmine
install and configure Karma$ npm install -g karma$ karma initrun Karmakarma startrejoice \o/the setup
describe(‘my thing', function(){// some setup stuff!it(“does something", function() {expect(result).toEqual(expectedResult);});Jasmine specs
example!
Built-inDirectives
ng-clickKitten
ng-hide=‘hidden’>Hide me!ng-hide
ng-show=‘shown’>Hide me!ng-show
I think, therefore I am.ng-if
MoarDirectives
even more awesome angular directives
some wordsof advice.
Don’t try to use “self-closing” or void tags for your directives.
Know where to use scope.$apply.!(And why.)
Read the fucking manual.
Don’t reimplement existing directives.
Test.
Recap
… 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 directiveyou hopefully learnt
kthxbai@rinpakuabstraction.killedthecat.net
Writing Directives (Talk by Miško Hevery)Resourcesunrelated, but awesome:Building 2048 in Angular
rin
slobodan
munetoshi
mot_techtalk
syossan27
77web
syumai
iberianpig
twada
totto2727
manfredsteyer
soutaro
heronshoes
productmarketing
3n
rasmusluckow
chriscoyier
sonatard
bkeepers
jrom
malarkey
deanohume
chrislema
philhawksworth