*Note* - Some slides were cropped and code snippets not shown as the code example slide are interactive and sadly I can only show one piece of code per slide rather than each line I was highlighting :)
. L o a d i n g . . . 3 7 . < / a p p > 3 8 . < s c r i p t s r c = " b u n d l e . j s " > < / s c r i p t > 2 2 . p a c k a g e s : { 2 3 . a p p : { 2 4 . m a i n : ' . / m a i n . t s ' , 2 5 . d e f a u l t E x t e n s i o n : ' t s ' 2 6 . } 2 7 . } 2 8 . } ) ; 2 9 . S y s t e m 3 0 . . i m p o r t ( ' a p p ' ) 3 1 . . c a t c h ( c o n s o l e . e r r o r . b i n d ( c o n s o l e ) ) ; 3 2 . < / s c r i p t > 3 3 . < / h e a d > 3 4 . < b o d y > 3 9 . < / b o d y > 4 0 . < / h t m l >
p ( A p p C o m p o n e n t ) ; 1 . / / m a i n . t s 2 . i m p o r t { b o o t s t r a p } f r o m ' @ a n g u l a r / p l a t f o r m - b r o w s e r - d y n a m i c ' ; 3 . i m p o r t { A p p C o m p o n e n t } f r o m ' . / a p p . c o m p o n e n t ' ; 4 .
s s a g e = ' H e l l o w o r l d ' ; 1 . / / a p p . c o m p o n e n t . t s 2 . i m p o r t { C o m p o n e n t } f r o m ' @ a n g u l a r / c o r e ' ; 3 . 4 . @ C o m p o n e n t ( { 5 . s e l e c t o r : ' a p p ' , 6 . t e m p l a t e : ` 7 . < d i v c l a s s = " a p p " > 8 . { { m e s s a g e } } 9 . < / d i v > 1 0 . ` 1 1 . } ) 1 2 . e x p o r t c l a s s A p p C o m p o n e n t { 1 3 . c o n s t r u c t o r ( ) { 1 5 . } 1 6 . n g O n I n i t ( ) { 1 7 . c o n s o l e . l o g ( ' C o m p o n e n t i n i t i a l i s e d ' ) ; 1 8 . } 1 9 . }
s s = " a p p " > 1 1 . < m a i n > 1 2 . < c h a t > < / c h a t > 1 3 . < / m a i n > 1 4 . < / d i v > 1 . / / a p p . c o m p o n e n t . t s 2 . i m p o r t { C o m p o n e n t } f r o m ' @ a n g u l a r / c o r e ' ; 3 . i m p o r t { 4 . C h a t C o m p o n e n t 5 . } f r o m ' . / c o m p o n e n t s / c h a t . c o m p o n e n t ' ; 6 . 7 . @ C o m p o n e n t ( { 8 . s e l e c t o r : ' a p p ' , 9 . t e m p l a t e : ` 1 5 . ` , 1 6 . d i r e c t i v e s : [ 1 7 . C h a t C o m p o n e n t 1 8 . ] 1 9 . } ) 2 0 . e x p o r t c l a s s A p p C o m p o n e n t { 2 1 . c o n s t r u c t o r ( ) { 2 2 . t h i s . m e s s a g e = ' H e l l o w o r l d ' ; 2 3 . } 2 4 . n g O n I n i t ( ) { 2 5 . c o n s o l e . l o g ( ' C o m p o n e n t i n i t i a l i s e d ' ) ; 2 6 . } 2 7 . }
l a t i o n : V i e w E n c a p s u l a t i o n . N a t i v e , 4 . V i e w E n c a p s u l a t i o n 5 . } f r o m ' @ a n g u l a r / c o r e ' ; 6 . i m p o r t { 7 . C h a t P r o f i l e C o m p o n e n t 8 . } f r o m ' . / c o m p o n e n t s / c h a t - p r o f i l e . c o m p o n e n t ' ; 9 . i m p o r t { 1 0 . C h a t S e a r c h C o m p o n e n t 1 1 . } f r o m ' . / c o m p o n e n t s / c h a t - s e a r c h . c o m p o n e n t ' ; 1 2 . i m p o r t { 1 3 . C h a t L i s t C o m p o n e n t 1 4 . } f r o m ' . / c o m p o n e n t s / c h a t - l i s t . c o m p o n e n t ' ; 1 5 . 1 6 . @ C o m p o n e n t ( { 1 7 . s e l e c t o r : ' c h a t ' , 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 2 6 . < c h a t - p r o f i l e > < / c h a t - p r o f i l e > 2 7 . < c h a t - s e a r c h > < / c h a t - s e a r c h > 2 8 . < c h a t - l i s t > < / c h a t - l i s t > 2 9 . < / d i v > 3 0 . ` , 3 1 . d i r e c t i v e s : [ 3 2 . C h a t P r o f i l e C o m p o n e n t , 3 3 . C h a t S e a r c h C o m p o n e n t , 3 4 . C h a t L i s t C o m p o n e n t
i s t 3 3 . [ f r i e n d s ] = " c h a t F r i e n d s " > 3 4 . < / c h a t - l i s t > 3 5 . < / d i v > 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 2 6 . < c h a t - p r o f i l e 2 7 . [ u s e r ] = " c h a t U s e r " > 2 8 . < / c h a t - p r o f i l e > 2 9 . < c h a t - s e a r c h 3 0 . [ t e r m ] = " c h a t T e r m " > 3 1 . < / c h a t - s e a r c h > 3 6 . ` , 3 7 . d i r e c t i v e s : [ 3 8 . C h a t P r o f i l e C o m p o n e n t , 3 9 . C h a t S e a r c h C o m p o n e n t , 4 0 . C h a t L i s t C o m p o n e n t 4 1 . ] 4 2 . } ) 4 3 . e x p o r t c l a s s C h a t C o m p o n e n t { 4 4 . c o n s t r u c t o r ( ) { 4 5 . t h i s . c h a t U s e r = { 4 6 . n a m e : ' T o d d M o t t o ' , 4 7 . o n l i n e : t r u e 4 8 . } ; 4 9 . t h i s . c h a t T e r m = ' ' ;
r o f i l e 2 7 . [ u s e r ] = " c h a t U s e r " 2 8 . ( s t a t u s C h a n g e ) = " o n S t a t u s C h a n g e ( $ e v e n t ) " > 2 9 . < / c h a t - p r o f i l e > 1 3 . C h a t L i s t C o m p o n e n t 1 4 . } f r o m ' . / c o m p o n e n t s / c h a t - l i s t . c o m p o n e n t ' ; 1 5 . 1 6 . @ C o m p o n e n t ( { 1 7 . s e l e c t o r : ' c h a t ' , 1 8 . e n c a p s u l a t i o n : V i e w E n c a p s u l a t i o n . N a t i v e , 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 3 0 . < c h a t - s e a r c h 3 1 . [ t e r m ] = " c h a t T e r m " 3 2 . ( s e a r c h C h a n g e ) = " o n S e a r c h C h a n g e ( $ e v e n t ) " > 3 3 . < / c h a t - s e a r c h > 3 4 . < c h a t - l i s t 3 5 . [ f r i e n d s ] = " c h a t F r i e n d s " 3 6 . ( c o n t a c t S e l e c t ) = " o n C o n t a c t S e l e c t ( $ e v e n t ) " > 3 7 . < / c h a t - l i s t > 3 8 . < / d i v > 3 9 . ` , 4 0 . d i r e c t i v e s : [ 4 1 . C h a t P r o f i l e C o m p o n e n t , 4 2 . C h a t S e a r c h C o m p o n e n t , 4 3 . C h a t L i s t C o m p o n e n t
( n g M o d e l ) ] = " t o d o . t e x t " > 1 . / / v i c t o r s a v k i n . c o m / p o s t / 1 1 9 9 4 3 1 2 7 1 5 1 / a n g u l a r - 2 - t e m p l a t e - s y n t a x 2 . < d i v * n g F o r = " l e t i t e m i n i t e m s ; v a r i n d e x = i n d e x " > 3 . { { i n d e x } } 4 . < / d i v > 5 . 6 . < i n p u t 7 . [ n g M o d e l ] = " t o d o . t e x t " 8 . ( n g M o d e l C h a n g e ) = " t o d o . t e x t = $ e v e n t " > 9 .
t e 1 4 . n g F o r 1 5 . [ n g F o r O f ] = " t o d o s " 1 6 . l e t - t = " $ i m p l i c i t " 1 7 . l e t - i = " i n d e x " > 1 8 . < t o d o - c m p 1 9 . [ m o d e l ] = " t " 2 0 . [ i n d e x ] = " i " > 2 1 . < / t o d o - c m p > 2 2 . < / t e m p l a t e > 1 . < t o d o - c m p 2 . * n g F o r = " l e t t o f t o d o s ; l e t i = i n d e x " 3 . [ m o d e l ] = " t " 4 . [ i n d e x ] = " t " > 5 . < / t o d o - c m p > 6 . 7 . < t o d o - c m p 8 . t e m p l a t e = " n g F o r : l e t t o f t o d o s ; l e t i = i n d e x " 9 . [ m o d e l ] = " t " 1 0 . [ i n d e x ] = " i " > 1 1 . < / t o d o - c m p > 1 2 .
t a t u s ( ) { 3 4 . l e t n e w S t a t u s = ! t h i s . u s e r . o n l i n e ; 3 5 . l e t u s e r = { 3 6 . n a m e : t h i s . u s e r . n a m e , 3 7 . o n l i n e : n e w S t a t u s 3 8 . } ; 3 9 . t h i s . u s e r S t a t u s = ( 4 0 . n e w S t a t u s ? ' O n l i n e ' : ' O f f l i n e ' 4 1 . ) ; 4 2 . t h i s . s t a t u s C h a n g e . e m i t ( { u s e r } ) ; 4 3 . } 4 4 . } 1 8 . W e l c o m e , { { u s e r . n a m e } } - { { u s e r S t a t u s } } 1 9 . < a h r e f = " " ( c l i c k ) = " t o g g l e S t a t u s ( ) " > 2 0 . C h a n g e s t a t u s 2 1 . < / a > 2 2 . < / d i v > 2 3 . ` 2 4 . } ) 2 5 . e x p o r t c l a s s C h a t P r o f i l e C o m p o n e n t { 2 6 . @ I n p u t ( ) u s e r ; 2 7 . @ O u t p u t ( ) s t a t u s C h a n g e = n e w E v e n t E m i t t e r ( ) ; 2 8 . c o n s t r u c t o r ( ) { 2 9 . t h i s . u s e r S t a t u s = ( 3 0 . t h i s . u s e r . o n l i n e ? ' O n l i n e ' : ' O f f l i n e ' 3 1 . ) ; 3 2 . }
8 . < r o u t e r - o u t l e t > < / r o u t e r - o u t l e t > 2 9 . < / m a i n > 3 0 . < a s i d e > 3 1 . < c h a t > < / c h a t > 3 2 . < / a s i d e > 1 5 . i m p o r t { 1 6 . D a s h b o a r d C o m p o n e n t 1 7 . } f r o m ' . / c o m p o n e n t s / d a s h b o a r d . c o m p o n e n t ' ; 1 8 . 1 9 . @ C o m p o n e n t ( { 2 0 . s e l e c t o r : ' a p p ' , 2 1 . t e m p l a t e : ` 2 2 . < d i v c l a s s = " a p p " > 2 3 . < n a v > 2 4 . < a [ r o u t e r L i n k ] = " [ ' / i n b o x ' ] " > I n b o x < / a > 2 5 . < a [ r o u t e r L i n k ] = " [ ' / d a s h b o a r d ' ] " > D a s h b o a r d < / a > 2 6 . < / n a v > 3 3 . < / d i v > 3 4 . ` , 3 5 . d i r e c t i v e s : [ 3 6 . R O U T E R _ D I R E C T I V E S , 3 7 . C h a t C o m p o n e n t 3 8 . ] 3 9 . } ) 4 0 . @ R o u t e s ( [ 4 1 . { p a t h : ' / i n b o x ' , c o m p o n e n t : I n b o x C o m p o n e n t } , 4 2 . { p a t h : ' / i n b o x / : i d ' , c o m p o n e n t : I n b o x M e s s a g e C o m p o n e n t } , 4 3 . { p a t h : ' / d a s h b o a r d ' , c o m p o n e n t : D a s h b o a r d C o m p o n e n t } 4 4 . ] ) 4 5 . e x p o r t c l a s s A p p C o m p o n e n t { 4 6 . c o n s t r u c t o r ( ) { }
Angular bootstraps in a Web Worker Superfast UI and data-processing (faster repaints) Angular communicates between UI + Web Worker WEB WORKER RENDERING
toddmotto
schroneko
suneo3476
watabee
komakichi
nealle
hayaokimura
ike002jp
ymd65536
nishiuriraku
joergneumann
mu_zaru
tomohisa
colly
sferik
gr2m
lemiorhan
kneath
tammyeverts
iamctodd
kevinliebholz
brad_frost
maggiecrowley
addyosmani
paigeccino
![[ ] are property bindings Think myObject['property'] in JavaScript (](https://files.speakerdeck.com/presentations/e815b65cbc7b470685d4d0d2d89c52a1/slide_52.jpg){kind=link}
