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
97
Hallo, wir sind die Cyborgs: Implantate, Body-Hacks und Rock ‘n Roll
rin
1
91
How is magic formed
rin
0
830
Let's go to Mars #rp14
rin
0
240
Other Decks in Programming
See All in Programming
Better Code Design in PHP
afilina
PRO
0
130
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
CSC509 Lecture 09
javiergs
PRO
0
140
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
最新TCAキャッチアップ
0si43
0
190
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
CSC509 Lecture 11
javiergs
PRO
0
180
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Arm移行タイムアタック
qnighy
0
330
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
How to Ace a Technical Interview
jacobian
276
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fireside Chat
paigeccino
34
3k
Designing Experiences People Love
moore
138
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
RailsConf 2023
tenderlove
29
900
Music & Morning Musume
bryan
46
6.2k
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