Reusable Components in Angular: Architecture, transclusion, and more

Transcript

1. SF Angular Meetup OpenTable January 12, 2015 MTV Angular Meetup Google January 20, 2015 Reusable Components in Angular Architecture, transclusion, and more
3. Who We Are Rachael L Moore UI Engineer morewry Kara Erickson Web Engineer kara
4. UI Components What they are Why to use them How to design them
5. Implementations Multi-transclude Attribute passing Sub-directives
6. Dropdown isolate scopes
7. 16:9 video tour of our app UI
8. UI Components What and why
10. FIREWORKS NIGHT CC BY GPS Benefits of UI Components Benefits of UI Components
11. Consistency Consistency
12. Faster Development Faster Development
13. Quality Quality TROPHIES CC BY BRAD K
14. Better Deployment Better Deployment T-10 D PARACHUTE CC BY PROGRAM EXECUTIVE OFFICE
15. Accuracy Accuracy
16. Better Focus Better Focus
17. FIREWORKS NIGHT CC BY GPS Consistency Faster development Quality Benefits of UI Components Better deployment Accuracy Better focus
18. Custom Elements Custom Elements BRIGHT YELLOW FLOWER CROCHET CC BY SINGLE STITCHES
19. Coherent Config Coherent Config
20. FIREWORKS NIGHT CC BY GPS Consistency Faster development Quality Better deployment Accuracy Better focus Custom elements Coherent config Benefits of UI Components
21. How to Design UI Components How to Design UI Components
22. Prior Art Prior Art
23. Natural Language Natural Language
25. Volatility Volatility ETNA VOLCANO PAROXYSMAL ERUPTION CC BY GNUCKX
26. Prior art Natural language Volatility How To Design UI Components Visual patterns Behavioral patterns Technical limitations
27. Site Layout Design
29. Visual Patterns Visual Patterns SANTAS AT CITY HALL CC BY DENNIS YANG
33. Technical Limitations Technical Limitations FACEPALM CC BY BRANDON GRASLEY
36. <div> <header /> <nav /> <div /> <footer /> </div> <directive-1> <directive-2 /> <directive-3 /> <directive-4 /> <directive-5 /> </directive-1> <self /> closing tags for brevity only (do not try at home)
37. <ot-site> </ot-site> site.html
38. Site Layout Implementation
40. Body  Menu  Header 
41. <ot-site></ot-site> HTML attributes Transclusion Site scaffold interface
42. <ot-site current-app= "Marketing"> </ot-site> HTML attributes Transclusion Site scaffold interface
43. <ot-site current-app=" Marketing" license=" 2015 Copyright OpenTable" account- manager="true" app- switcher="false" site- title="AppCtrl.title" sidebar="See more options" card-layout=" true" card-values=" AppCtrl.cards"></ot- site> HTML attributes Transclusion Site scaffold interface
44. Marketing"license=" 2015CopyrightOpenTable" account-manager="true" app-switcher="false" site-title="AppCtrl. title"sidebar=" Seemoreoptions"sidebar- items="AppCtrl. sidebarList"card- layout="true"card- values="AppCtrl.cards" rid-selector="true" dropdown-theme="dark" sub-header="Themes" tabs="true"tabs-items=" AppCtrl.tabs"sidebar- content="Here is very HTML attributes Transclusion Site scaffold interface
45. <ot-site> <div>Transcluded content</div> </ot-site> HTML attributes Transclusion Site scaffold interface
46. <ot-site> </ot-site> index.html
47. <ot-site> <div> I’m transcluding the header. </div> <div> I’m transcluding the menu. </div> <div> I’m transcluding the body. </div> </ot-site> index.html
49. Body  Menu  Header 
50. .directive("otSite", () => { return { scope: {}, template: `` }; }); site.js
51. .directive("otSite", () => { return { scope: {}, template: `` . }; }); site.js
52. Quick ES6 Review
53. "<div>" + "<p ng-class=\"{'highlight': selected}\">Hey</p>" + "</div>" `<div> <p ng-class="{'highlight': selected}">Hey</p> </div>` ES6 Review - Template Strings ES5 ES6
54. ES6 Review - Template Strings var name = "Kara"; var greeting = "Hi " + name + "!"; // Hi Kara! var name = "Kara"; var greeting = `Hi ${name}!`; // Hi Kara! ES5 ES6
55. ES6 Review - Fat Arrows var that = this; var toggleMenu = function() { that.menuShowing = !that.menuShowing; }; var toggleMenu = () => { this.menuShowing = !this.menuShowing; }; ES5 ES6
56. .directive("otSite", () => { return { scope: {}, template: `` }; }); site.js
57. .directive("otSite", () => { return { scope: {}, template: ` <div> <header></header> <nav></nav> <main></main> <footer></footer> </div>` }; site.js ...
58. Code Demo
59. <ot-site> <div> I’m transcluding the header. </div> <div> I’m transcluding the menu. </div> <div> I’m transcluding the body. </div> </ot-site> index.html
60. .directive("otSite", () => { return { scope: {}, template: ` <div> <header></header> <nav></nav> <main></main> <footer></main> </div>` }; site.js ...
61. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header></header> <nav></nav> <main></main> <footer></main> </div>` site.js ...
62. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header ng-transclude></header> <nav ng-transclude></nav> <main ng-transclude></main> <footer></footer> </div>` site.js ...
63. Code Demo
64. $transclude((function(clone)) { $element.empty(); $element.append(clone); }); } ng-transclude
65. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header ng-transclude></header> <nav ng-transclude></nav> <main ng-transclude></main> <footer></footer> </div>` site.js
66. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header></header> <nav></nav> <main></main> <footer></footer> </div>` site.js
67. <ot-site> <div> I’m transcluding the header. </div> <div> I’m transcluding the menu. </div> <div> I’m transcluding the body. </div> </ot-site> index.html
68. <ot-site> <div transclude-to="site-head"> I’m transcluding the header. </div> <div transclude-to="site-menu"> I’m transcluding the menu. </div> <div transclude-to="site-body"> I’m transcluding the body. </div> </ot-site> index.html
69. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header></header> <nav></nav> <main></main> <footer></footer> </div>` site.js ...
70. .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header transclude-id="site-head"></header> <nav transclude-id="site-menu"></nav> <main transclude-id="site-body"></main> <footer></footer> </div>` site.js ...
71. Custom transclusion For element in clone: 1. Get target ID 2. Find target element with that ID 3. Append clone element to target
72. angular.forEach(clone, (cloneEl) => { // get desired target ID // find target element with that ID // append element to target }); custom-transclude.js
73. angular.forEach(clone, (cloneEl) => { // get desired target ID var tId = cloneEl.attributes["transclude-to"].value; // find target element with that ID // append element to target }); custom-transclude.js
74. angular.forEach(clone, (cloneEl) => { // get desired target ID var tId = cloneEl.attributes["transclude-to"].value; // find target element with that ID var target = templ.find(`[transclude-id="${tId}"]`); // append element to target }); custom-transclude.js
75. angular.forEach(clone, (cloneEl) => { // get desired target ID var tId = cloneEl.attributes["transclude-to"].value; // find target element with that ID var target = templ.find(`[transclude-id="${tId}"]`); // append element to target target.append(cloneEl); }); custom-transclude.js
76. angular.forEach(clone, (cloneEl) => { ... target.append(cloneEl); }); custom-transclude.js
77. angular.forEach(clone, (cloneEl) => { ... if (target.length) { target.append(cloneEl); } }); custom-transclude.js
78. angular.forEach(clone, (cloneEl) => { ... if (target.length) { target.append(cloneEl); } else { cloneEl.remove(); } }); custom-transclude.js
79. angular.forEach(clone, (cloneEl) => { ... if (target.length) { target.append(cloneEl); } else { cloneEl.remove(); throw new Error( `Target not found. Please specify the correct transclude-to attribute.` ); } custom-transclude.js ...
80. Two parameters: ◦ scope (optional) ◦ callback function □ passes clone Transclude function transclude (clone) => # DOM manipulation
81. angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); custom-transclude.js
82. transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); custom-transclude.js
83. Transclude function access points compile: (tElem, tAttrs, transclude) => link: (scope, iElem, iAttrs, ctrl, transclude) => controller: ($scope, $element, $transclude) =>
84. Transclude function access points compile: (tElem, tAttrs, transclude) => link: (scope, iElem, iAttrs, ctrl, transclude) => controller: ($scope, $element, $transclude) =>
85. site.js .directive("otSite", () => { return { scope: {}, transclude: true, template: ` <div> <header transclude-id="site-head"></header> <nav transclude-id="site-menu"></nav> <main transclude-id="site-body"></main> <footer></footer> </div>` ...
86. site.js .directive("otSite", () => { ... });
87. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { } });
88. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
89. site.js .directive("otSite", ($rootScope) => { ... compile: (tElem, tAttrs, transclude) => { transclude($rootScope.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
90. transclusion scope using $rootScope.$new()
91. proper transclusion scope
92. site.js .directive("otSite", ($rootScope) => { ... compile: (tElem, tAttrs, transclude) => { transclude($rootScope.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
93. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
94. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { return (scope, iElem, iAttrs) => { transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); ...
95. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { return (scope, iElem, iAttrs) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); ...
96. Code Demo
97. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { return (scope, iElem, iAttrs) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); ...
98. Transclude function availability compile: (tElem, tAttrs, transclude) => link: (scope, iElem, iAttrs, ctrl, transclude) => controller: ($scope, $element, $transclude) =>
99. site.js .directive("otSite", () => { ... compile: (tElem, tAttrs, transclude) => { return (scope, iElem, iAttrs) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); ...
100. site.js .directive("otSite", () => { ... (scope, iElem, iAttrs) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
101. site.js .directive("otSite", () => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
102. site.js .directive("otSite", () => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { transclude(scope.$parent.$new(), (clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
103. site.js .directive("otSite", () => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
104. Code Demo
105. Transclude function access points compile: (tElem, tAttrs, transclude) => link: (scope, iElem, iAttrs, ctrl, transclude) => controller: ($scope, $element, $transclude) =>
106. Directive Life Cycle Parent compile 1 2 Child compile Parent controller 3 Parent pre-link 4 5 Child controller 6 Child pre-link 7 Child post-link Parent post-link 8
107. Transclude function access points compile: (tElem, tAttrs, transclude) => link: (scope, iElem, iAttrs, ctrl, transclude) => controller: ($scope, $element, $transclude) =>
108. Transclude function in ... link / controller.... ◦ Auto-generates scope ◦ No wrapper ◦ Link: safest for DOM manipulation compile... ◦ Scope issues ◦ Wrapper code ◦ Deprecated
109. .factory("MultiTransclude", () => { return { }; }); multi-transclude.js
110. .factory("MultiTransclude", () => { return { transclude: (elem, transcludeFn) => { } }; }); multi-transclude.js
111. multi-transclude.js .factory("MultiTransclude", () => { return { transclude: (elem, transcludeFn) => { transcludeFn((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
112. site.js .directive("otSite", () => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { transclude((clone) => { angular.forEach(clone, (cloneEl) => { var tId = ... var target = ... if (target.length) {...} else {...} }); }); ...
113. site.js .directive("otSite", () => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { } }; });
114. site.js .directive("otSite", (MultiTransclude) => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { } }; });
115. site.js .directive("otSite", (MultiTransclude) => { ... link: (scope, iElem, iAttrs, ctrl, transclude) => { MultiTransclude.transclude(iElem, transclude); } }; }); Code Demo
116. Multi-transclusion model Pros Cons Flexible UI Open system All in one directive Requires custom DOM manipulation Extensible Less “HTML-like” Re-usable for any component
117. Selectable List Design
118. Selectable List Design
119. Selectable List Design
120. Behavioral Patterns Behavioral Patterns
125. <ot-list /> list.html
126. <ot-list items="" /> list.html
127. <ot-list items="" selected="" /> list.html
128. <ot-list items="" selected="" on-select="" /> list.html
129. <ot-list items="" selected="" on-select="" theme="" /> list.html
130. <ot-list items="" selected="" on-select="" theme="" /> list.html
131. <ot-list items="" selected="" /> list.html
132. Selectable List Implementation
134. Areas Navigation
135. .controller("AppController", ($scope) => { $scope.areas = { list: [ "Floorplan", "Combinations", "Schedule", "Publish" ], current: "Floorplan" }; }); app.js
136. <ot-site> <div transclude-to="site-head"> I’m transcluding the header. </div> <div transclude-to="site-menu"> I’m transcluding the menu. </div> <div transclude-to="site-body"> I’m transcluding the body. </div> </ot-site> index.html
137. <ot-site> </ot-site> index.html
138. <ot-site> <ot-list></ot-list> </ot-site> index.html
139. <ot-site> <ot-list items="{{ areas.list }}" selected="{{ areas.current }}"></ot-list> </ot-site> index.html
140. <ot-site> <ot-list items="{{ areas.list }}" selected="{{ areas.current }}" transclude-to="site-body"></ot-list> </ot-site> index.html
141. .directive("otList", () => { return { template: `` }; }); list.js
142. list.js .directive("otList", () => { return { template: ` <ul> <li ng-repeat="item in items" ng-bind="item" ng-class="{'ot-selected': item === selected}" ng-click="selectItem(item)"> </li> </ul>` }; ...
143. list.js .directive("otList", () => { return { template: ... }; });
144. list.js .directive("otList", () => { return { template: ..., link: (scope, elem, attrs) => { } }; });
145. list.js .directive("otList", () => { return { template: ..., link: (scope, elem, attrs) => { scope.selectItem = (item) => { scope.selected = item; }; } }; ...
146. list.js .directive("otList", () => { return { template: ..., link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selectItem = (item) => { scope.selected = item; }; } }; ...
147. list.js .directive("otList", () => { return { template: ..., link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; } ...
148. Code Demo
149. Shared scope is the default behavior Need to set the scope property No scope set... When asked if shared scope was a good idea...
151. Apps Navigation
152. app.js .controller("AppController", ($scope) => { $scope.areas = { list: [ "Floorplan", "Combinations", "Schedule", "Publish" ], current: "Floorplan" }; });
153. app.js .controller("AppController", ($scope) => { $scope.areas = {...}; });
154. app.js .controller("AppController", ($scope) => { $scope.areas = {...}; $scope.apps = { list: [ "Marketing", "Planning", "Reservations", "Settings" ], current: "Marketing" }; ...
155. <ot-site> <ot-list items="{{ areas.list }}" selected="{{ areas.current }}" transclude-to="site-body"></ot-list> </ot-site> index.html
156. <ot-site> <ot-list items="{{ areas.list }}" selected="{{ areas.current }}" transclude-to="site-body"></ot-list> <ot-list items="{{ apps.list }}" selected="{{ apps.current }}" transclude-to="site-body"></ot-list> </ot-site> index.html
157. Code Demo
158. List component, no scope set
159. list.js .directive("otList", () => { return { template: ..., link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; } ...
160. list.js .directive("otList", () => { return { template: ..., scope: true, link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; ...
161. List component, scope: true
162. Code Demo
163. List component, scope: true (leak)
164. list.js .directive("otList", () => { return { template: ..., scope: true, link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; ...
165. list.js .directive("otList", () => { return { template: ..., scope: {}, link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; ...
166. List component, scope: { }
167. list.js .directive("otList", () => { return { template: ..., scope: {}, link: (scope, elem, attrs) => { scope.items = JSON.parse(attrs.items); scope.selected = attrs.selected; scope.selectItem = (item) => { scope.selected = item; }; ...
168. list.js .directive("otList", () => { return { template: ..., scope: {}, link: (scope, elem, attrs) => { scope.selectItem = (item) => { scope.selected = item; }; } }; });
169. list.js .directive("otList", () => { return { template: ..., scope: { items: "=items", selected: "=selected" }, link: (scope, elem, attrs) => { scope.selectItem = (item) => { scope.selected = item; }; ...
170. list.js .directive("otList", () => { return { template: ..., scope: { items: "=", selected: "=" }, link: (scope, elem, attrs) => { scope.selectItem = (item) => { scope.selected = item; }; ...
171. <ot-site> <ot-list items="{{ areas.list }}" selected="{{ areas.current }}" transclude-to="site-body"></ot-list> <ot-list items="{{ apps.list }}" selected="{{ apps.current }}" transclude-to="site-body"></ot-list> </ot-site> index.html
172. <ot-site> <ot-list items="areas.list" selected="areas.current" transclude-to="site-body"></ot-list> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-site> index.html
173. <ot-site> <ot-list items="areas.list" selected="areas.current" transclude-to="site-menu"></ot-list> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-site> index.html
174. Code Demo
175. Attribute passing model Pros Cons Simple interface Not very extensible Closed system Less flexibility for users
176. Dropdown Design
183. <ot-dropdown> <ot-trigger /> <ot-target /> </ot-dropdown> dropdown.html
185. Dropdown Implementation
187. Apps Navigation
188. <ot-site> <ot-list items="areas.list" selected="areas.current" transclude-to="site-menu"></ot-list> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-site> index.html
189. <ot-site> ... <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-site> index.html
190. <ot-site> ... <ot-dropdown> </ot-dropdown> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-site> index.html
191. <ot-site> ... <ot-dropdown> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-dropdown> </ot-site> index.html
192. <ot-site> ... <ot-dropdown> <ot-list items="apps.list" selected="apps.current" transclude-to="site-body"></ot-list> </ot-dropdown> </ot-site> index.html
193. <ot-site> ... <ot-dropdown> <ot-list items="apps.list" selected="apps.current"></ot-list> </ot-dropdown> </ot-site> index.html
194. <ot-site> ... <ot-dropdown transclude-to="site-head"> <ot-list items="apps.list" selected="apps.current"></ot-list> </ot-dropdown> </ot-site> index.html
195. <ot-site> ... <ot-dropdown> <span ng-bind="apps.current"></span> <ot-list items="apps.list" selected="apps.current"></ot-list> </ot-dropdown> </ot-site> index.html
196. <ot-site> ... <ot-dropdown> <span ng-bind="apps.current" transclude-to="trigger"></span> <ot-list items="apps.list" selected="apps.current" transclude-to="target"></ot-list> </ot-dropdown> </ot-site> index.html
197. <ot-site> ... <ot-dropdown> <span ng-bind="apps.current" transclude-to="trigger"></span> <ot-list items="apps.list" selected="apps.current" transclude-to="target"></ot-list> </ot-dropdown> </ot-site> index.html
198. <ot-site> ... <ot-dropdown> <ot-trigger> <span ng-bind="apps.current"></span> </ot-trigger> <ot-target> <ot-list items="apps.list" selected="apps.current"></ot-list> </ot-target> </ot-dropdown> index.html ...
199. <ot-site> ... <ot-dropdown> <ot-trigger> <span ng-bind="apps.current" /> </ot-trigger> <ot-target> <ot-list items="apps.list" ... /> </ot-target> </ot-dropdown> </ot-site> index.html
200. Multi-transclude vs sub-directives ◦ “HTML-like” ◦ Built with separate parts □ Maintain style of parts separately □ Split options up into separate tags
201. dropdown.js .directive("otDropdown", () => { return { }; });
202. dropdown.js .directive("otDropdown", () => { return { scope: {} }; });
203. dropdown.js .directive("otDropdown", () => { return { scope: {}, transclude: true }; });
204. dropdown transclusion index.html trigger transclusion target transclusion <ot-site> ... <ot-dropdown> <ot-trigger> <span ng-bind="apps.current" /> </ot-trigger> <ot-target> <ot-list items="apps.list" ... /> </ot-target> </ot-dropdown> </ot-site>
205. dropdown.js .directive("otDropdown", () => { return { scope: {}, transclude: true, template: ` <div> </div>` }; });
206. dropdown.js .directive("otDropdown", () => { return { scope: {}, transclude: true, template: ` <div ng-transclude> </div>` }; });
207. dropdown.js .directive("otDropdown", () => { return { scope: {}, transclude: true, template: ` <div ng-transclude ng-click="toggleTarget()"> </div>` }; });
208. dropdown.js .directive("otDropdown", () => { return { scope: {}, transclude: true, template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, link: (scope) => { scope.toggleTarget = () => { scope.targetOpen = !scope.targetOpen; }; ...
209. .directive("otTarget",()=>{ return { }; }); dropdown.js .directive("otTrigger",()=>{ return { }; });
210. .directive("otTarget",()=>{ return { transclude: true }; }); dropdown.js .directive("otTrigger",()=>{ return { transclude: true }; });
211. .directive("otTarget",()=>{ return { transclude: true, template: ` <div> </div>` }; }); dropdown.js .directive("otTrigger",()=>{ return { transclude: true, template: ` <div> </div>` }; });
212. .directive("otTarget",()=>{ return { transclude: true, template: ` <div ng-transclude> </div>` }; }); dropdown.js .directive("otTrigger",()=>{ return { transclude: true, template: ` <div ng-transclude> </div>` }; });
213. .directive("otTarget", () => { return { transclude: true, template: ` <div ng-transclude> </div>` }; }); dropdown.js
214. .directive("otTarget", () => { return { transclude: true, template: ` <div ng-show="targetOpen" ng-transclude> </div>` }; }); dropdown.js
215. Code Demo
216. .directive("otTarget", () => { return { transclude: true, template: ` <div ng-show="targetOpen" ng-transclude> </div>` }; }); dropdown.js
217. Dropdown - trigger/target share scope
218. Directive to directive communication ◦ Controller as directive API ◦ “Require” controller from other directives □ link: (scope, elem, attrs, controller) => □ Caveat: must be on element or parents
219. ◦ Controller as directive API ◦ “Require” controller from other directives □ link: (scope, elem, attrs, controller) => □ Caveat: must be on element or parents Directive to directive communication
220. dropdown.js .directive("otDropdown", () => { ... template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, link: (scope) => { scope.toggleTarget = () => { scope.targetOpen = !scope.targetOpen; }; } });
221. dropdown.js .directive("otDropdown", () => { ... template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, controller: function ($scope) { scope.toggleTarget = () => { scope.targetOpen = !scope.targetOpen; }; } });
222. dropdown.js .directive("otDropdown", () => { ... template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, controller: function ($scope) { $scope.toggleTarget = () => { scope.targetOpen = !scope.targetOpen; }; } });
223. dropdown.js .directive("otDropdown", () => { ... template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, controller: function ($scope) { $scope.toggleTarget = () => { scope.targetOpen = !scope.targetOpen; }; } });
224. dropdown.js .directive("otDropdown", () => { ... template: ` <div ng-click="toggleTarget()" ng-transclude> </div>`, controller: function ($scope) { $scope.toggleTarget = () => { this.targetOpen = !this.targetOpen; }; } });
225. ◦ Controller as directive API ◦ “Require” controller from other directives □ link: (scope, elem, attrs, controller) => □ Caveat: must be on element or parents Directive to directive communication
226. .directive("otTarget", () => { return { transclude: true, template: ` <div ng-show="targetOpen" ng-transclude> </div>` }; }); dropdown.js
227. dropdown.js .directive("otTarget", () => { return { transclude: true, require: "^otDropdown", template: ` <div ng-show="targetOpen" ng-transclude> </div>` }; });
228. dropdown.js .directive("otTarget", () => { return { transclude: true, require: "^otDropdown", template: ` <div ng-show="targetOpen" ng-transclude> </div>`, link: (scope, elem, attrs, ctrl) => { } }; ...
229. dropdown.js .directive("otTarget", () => { return { transclude: true, require: "^otDropdown", template: ` <div ng-show="targetOpen" ng-transclude> </div>`, link: (scope, elem, attrs, ctrl) => { scope.ctrl = ctrl; } }; ...
230. dropdown.js .directive("otTarget", () => { return { transclude: true, require: "^otDropdown", template: ` <div ng-show="ctrl.targetOpen" ng-transclude> </div>`, link: (scope, elem, attrs, ctrl) => { scope.ctrl = ctrl; } }; ...
231. Code Demo
232. Dropdown - trigger/target share scope
233. .directive("otTrigger",()=>{ return { transclude: true, template: ` <div ng-transclude> </div>` }; }); .directive("otTarget",()=>{ return { transclude: true, require: "^otDropdown", template: ` <div ng-show="ctrl.targetOpen" ng-transclude> </div>`, link: ... dropdown.js
234. .directive("otTrigger",()=>{ return { transclude: true, scope: {}, template: ` <div ng-transclude> </div>` }; }); .directive("otTarget",()=>{ return { transclude: true, scope: {}, require: "^otDropdown", template: ` <div ng-show="ctrl.targetOpen" ng-transclude> </div>`, ... dropdown.js
235. Dropdown isolate scopes
236. Sub-directive model Pros Cons Flexible UI Open system HTML-ish More boilerplate Can modularize parts of the component Not extensible for new entry points
237. Application Scaffold Conclusion
239. <ot-site> <ot-dropdown transclude-to="site-head"> <ot-trigger /> <ot-target> <ot-list items="apps" /> </ot-target> </ot-dropdown> <ot-dropdown transclude-to="site-head"> <ot-trigger /> <ot-target> ... index.html
240. ... <div class="profile" /> <a href="/logoff" /> </ot-target> </ot-dropdown> <ot-list transclude-to="site-menu" items="areas" /> <div transclude-to="site-body"> <!-- app content --> </div> </ot-site> index.html
241. <ot-app> <!-- app content --> </ot-app> index.html
242. <ot-app></ot-app>
243. Barry Wong Simon Attley Caleb Morrell Sara Rahimian David Amusin ALL OTHER PHOTOS CC0 / SPECIAL THANKS TO RYAN MCGUIRE
244. We’re hiring! opentable.com/careers/ We’re hiring! opentable.com/careers/
245. Questions? Rachael L Moore UI Engineer morewry Kara Erickson Web Engineer kara