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
93
How is magic formed
rin
0
850
Let's go to Mars #rp14
rin
0
250
Other Decks in Programming
See All in Programming
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
150
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
파급효과: From AI to Android Development
l2hyunwoo
0
160
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
240
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.3k
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
3
550
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
110
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
120
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
12k
Cursorを活用したAIプログラミングについて 入門
rect
0
170
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
260
エンジニアが挑む、限界までの越境
nealle
1
320
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Bash Introduction
62gerente
612
210k
Statistics for Hackers
jakevdp
798
220k
Side Projects
sachag
453
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Facilitating Awesome Meetings
lara
54
6.3k
Become a Pro
speakerdeck
PRO
28
5.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
How to train your dragon (web standard)
notwaldorf
91
6k
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