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 NYC Presentation - 3 November 2014
Search
Jaco Pretorius
November 03, 2014
Programming
3
260
Angular NYC Presentation - 3 November 2014
Jaco Pretorius
November 03, 2014
Tweet
Share
More Decks by Jaco Pretorius
See All by Jaco Pretorius
Searching with Solr
jacopretorius
0
72
Other Decks in Programming
See All in Programming
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
540
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
フロントエンドの現在地とこれから
koba04
10
4.7k
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
書籍『LangChainとLangGraphによるRAG・AIエージェント[実践]入門』の紹介
os1ma
2
120
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
230
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
680
2024-10-01 dev2next - Observability for Modern JVM Applications
jonatan_ivanov
1
140
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
400
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
We Have a Design System, Now What?
morganepeng
50
7.2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
A Tale of Four Properties
chriscoyier
156
22k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
A designer walks into a library…
pauljervisheath
202
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Building Your Own Lightsaber
phodgson
102
6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Transcript
ANGULAR DIRECTIVES WTF EDITION WWW.JACOPRETORIUS.NET @JACOPRETORIUS
PREFACE WHY ADVANCED DIRECTIVES?
WHAT TO COVER • TRANSCLUDE • COMMUNICATING BETWEEN DIRECTIVES •
COMPILE VS LINK
TRANSCLUDE • SET TRANSCLUDE: TRUE • USE NG-TRANSCLUDE IN YOUR
DIRECTIVE’S TEMPLATE
TRANSCLUDE FUNCTION • GIVES COMPLETE CONTROL OVER HOW THE BODY
OF YOUR DIRECTIVE IS INSERTED INTO THE DOM • CONTROL THE SCOPE THAT IS USED INSIDE THE BODY OF THE DIRECTIVE • OPTIONALLY USE TRANSCLUDE: ‘ELEMENT’ INSTEAD OF TRANSCLUDE: TRUE
TRANSCLUDE IN ANGULAR • NG-IF • NG-INCLUDE • NG-REPEAT •
NG-SWITCH
COMMUNICATING BETWEEN DIRECTIVES • USING THE REQUIRE PROPERTY OF YOUR
DIRECTIVE • CONTROLLER(S) OF THE REQUIRED DIRECTIVE(S) BECOME AVAILABLE AS THE 4TH PARAMETER IN THE LINK FUNCTION
COMPILE VS LINK • WHEN SHOULD YOU USE COMPILE? •
PERFORMANCE • ANGULAR PAGE LIFE CYCLE • ESPECIALLY USEFUL IN DIRECTIVES USING TRANSCLUDE
COMPILE VS LINK STRUCTURE compile: function compile(tElement, tAttrs) { //
interact with template element return function postLink( ... ) { ... } } // or // link: function postLink( ... ) { ... }
COMPILE RETURNS A LINK FUNCTION
COMPILE IN ANGULAR • HTML ANCHOR <A /> • FORM
<FORM /> • NG-BIND • NG-CLOAK • NG-CLICK, NG-MOUSEDOWN, NG-MOUSEUP, NG- KEYDOWN, ETC • NG-INCLUDE
Q & A • WE’RE HIRING – GETHIGHTOWER.COM/JOBS • QUESTIONS?