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
230
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
65
Other Decks in Programming
See All in Programming
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
170
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
470
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Next.js App Router
quramy
12
2k
Polars入門
daikikatsuragawa
1
190
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
170
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
420
新宿ダンジョンを可視化してみた
satoshi7190
3
410
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
460
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Domain-Driven Transformation
hschwentner
2
1.5k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Side Projects
sachag
451
41k
What's new in Ruby 2.0
geeforr
337
31k
Typedesign – Prime Four
hannesfritz
36
2.1k
How STYLIGHT went responsive
nonsquared
92
4.8k
Unsuck your backbone
ammeep
664
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Designing for humans not robots
tammielis
247
25k
The Language of Interfaces
destraynor
151
23k
BBQ
matthewcrist
80
8.8k
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?