Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Directives For The Rest Of Us
Search
Rin Raeuber
April 09, 2014
Programming
1
320
Angular Directives For The Rest Of Us
A very basic introduction to directives. Talk at the Angular Meetup Berlin, April 9th 2014
Rin Raeuber
April 09, 2014
Tweet
Share
More Decks by Rin Raeuber
See All by Rin Raeuber
Das Internet of Things mit dem ESP2866
rin
0
170
Let's create a game with Ruby
rin
1
100
Hallo, wir sind die Cyborgs: Implantate, Body-Hacks und Rock ‘n Roll
rin
1
94
How is magic formed
rin
0
850
Let's go to Mars #rp14
rin
0
250
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
940
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
GraphRAGの仕組みまるわかり
tosuri13
8
480
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
440
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Embracing the Ebb and Flow
colly
86
4.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Faster Mobile Websites
deanohume
307
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Angular Directives for the rest of us
Rin Räuber @rinpaku ! developer at bitcrowd
Content what is a directive? ! how to roll your
own. ! testing.
Angular is 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 app Angular
Directives
What the fuck is a Directive?
teach your browser new tricks ! add behavior to an
element and/or transform the DOM Directives
<datapicker></datapicker> THIS
<input type=‘text’ id=‘datepicker’>! ! <script>! $(function() {! $("#datepicker").datepicker();! });! </script>
instead of this
THIS
instead of this
include angular.js <script src=“angular.js” type=“text/javascript"></script> the setup
include angular.js <script src=“angular.js” type=“text/javascript"></script> create your Angular app angular.module(“myAwesomeAngularApp”,
[]); the setup
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
the setup $ yo angular bitch shortcut!
Our first Directive
<kitten></kitten>
myApp.directive('kitten', function(){ return { // directive definition object }; }
); Registering a directive
restrictions myApp.directive('myDirective', function(){ return { restrict: ‘ACE’ }; } );
restrictions A is for attributes <div kitten></div>
restrictions C is for CSS classes <div class=“kitten”> </div>
restrictions E is for elements <kitten></kitten>
restrictions E is for elements <kitten></kitten> no kittens for 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 at an example.
kittens come in different sizes, so …
let’s add an attribute <kitten width=’200’ height=‘50’> </kitten>
myApp.directive('myDirective', function(){ return { link: function(scope, element, attrs){ // do
something } }; }); the linkin’ function
modifying the DOM function(scope, element, attrs){ // change the height
of the element element.css(‘height’, ‘42px’); }
let’s look at an example. again.
… but what about behavior?
adding an event listener function(scope, element, attrs){ element.on(‘mouseover’, function(){ alert(‘meooow’);
}) }
let’s look at an example. one last time.
I wish I had known™
scope.$apply
scope
code. again.
when to use scope.$apply
changes to the scope that Angular doesn’t know about
changes to the scope that Angular doesn’t know about browser
DOM events
changes to the scope that Angular doesn’t know about browser
DOM events setTimeout
changes to the scope that Angular doesn’t know about browser
DOM events setTimeout asynchronous requests …
changes to the scope that Angular doesn’t know about browser
DOM events setTimeout asynchronous requests … ng-click $timeout $http
… but how do I test this stuff?
you DO test, don’t you?
Unit Testing w/ Karma and Jasmine
install and configure Karma $ npm install -g karma $
karma init run Karma karma start rejoice \o/ the setup
describe(‘my thing', function(){ // some setup stuff ! it(“does something",
function() { expect(result).toEqual(expectedResult); }); Jasmine specs
example!
Built-in Directives
ng-click <p ng-click=‘alert(“meow!”)’> Kitten </p>
<p ng-click=‘hidden=true’ ng-hide=‘hidden’> Hide me! </p> ng-hide
<p ng-click=‘shown=false’ ng-show=‘shown’> Hide me! </p> ng-show
<p ng-if=‘think==true’> I think, therefore I am. </p> ng-if
Moar Directives
even more awesome angular directives
some words of advice.
Don’t try to use “self-closing” or void tags for your
directives. <kitten/>
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 directive you hopefully learnt
kthxbai @rinpaku abstraction.killedthecat.net
Writing Directives (Talk by Miško Hevery) Resources unrelated, but awesome:
Building 2048 in Angular