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
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Discover Metal 4
rei315
2
130
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.3k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
効率的な開発手段として VRTを活用する
ishkawa
0
140
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Visualization
eitanlees
146
16k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.6k
Being A Developer After 40
akosma
90
590k
GitHub's CSS Performance
jonrohan
1031
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Producing Creativity
orderedlist
PRO
346
40k
Designing Experiences People Love
moore
142
24k
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