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
860
Let's go to Mars #rp14
rin
0
250
Other Decks in Programming
See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.8k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
350
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
CDK引数設計道場100本ノック
badmintoncryer
2
420
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.3k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
Deep Dive into ~/.claude/projects
hiragram
14
12k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Docker and Python
trallard
45
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
It's Worth the Effort
3n
185
28k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Balancing Empowerment & Direction
lara
1
440
Into the Great Unknown - MozCon
thekraken
40
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
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