$30 off During Our Annual Pro Sale. View Details »

Building the Modern Web with AngularJS

Todd Motto
January 16, 2014

Building the Modern Web with AngularJS

Presented at London Web, 16.01.2014 and FrontEndLondon 30.01.2014.

Todd Motto

January 16, 2014
Tweet

More Decks by Todd Motto

Other Decks in Programming

Transcript

  1. WHO AM I? Lead front-end at Appsbroker Created Conditionizr, HTML5Blank,

    FireShell Partnered with Intel/Rolling Stone in 2013
  2. WHAT/WHY ANGULAR? Client-side MVC + JS framework Server + Client

    AIO (one language!) Rapid application development Focus on data-driven apps (no DOM manipulation)
  3. WHAT IS THE "MODERN WEB"? Client side templating Web Components/Shadow

    DOM HTML5 data-* attributes Single Page Apps More JavaScript
  4. DESIGN (JSON - MODEL) [ { " f r o

    m " : " S t e v e J o b s " , " s u b j e c t " : " H o l d i n g y o u r i P h o n e c o r r e c t l y " , " s e n t " : " 2 0 1 4 - 0 1 - 1 2 T 0 8 : 0 5 : 5 9 Z " } , { " f r o m " : " B i l l G a t e s " , " s u b j e c t " : " O v e r c o m i n g B S O D " , " s e n t " : " 2 0 1 4 - 0 1 - 1 6 T 1 9 : 0 1 : 2 6 Z " } ]
  5. DECLARE (DATA-BINDING - VIEW) < u l > < l

    i n g - r e p e a t = " e m a i l i n e m a i l s " > < p > F r o m : { { e m a i l . f r o m } } < / p > < p > S u b j e c t : { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
  6. DISTRIBUTE (CONTROLLER) v a r m y A p p

    = a n g u l a r . m o d u l e ( ' m y A p p ' , [ ] ) ; m y A p p . c o n t r o l l e r ( ' M a i n C t r l ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ h t t p . g e t ( ' / e m a i l s ' ) . s u c c e s s ( f u n c t i o n ( d a t a ) { $ s c o p e . e m a i l s = d a t a ; / / A r r a y } ) ; } ] ) ;
  7. HANDLEBAR BINDINGS EXPOSING THE MODEL / / J S $

    s c o p e . u s e r n a m e = ' T o d d ' ; / / H T M L < p > W e l c o m e , { { u s e r n a m e } } < / p > / / O u t p u t < p > W e l c o m e , T o d d < / p >
  8. CONTROLLER SIMPLICITY PUSHING TO THE $SCOPE v a r m

    y A p p = a n g u l a r . m o d u l e ( ' m y A p p ' , [ ] ) ; / / < d i v n g - c o n t r o l l e r = " U s e r s C t r l " > < / d i v > m y A p p . c o n t r o l l e r ( ' U s e r s C t r l ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { / / g e t t h e u s e r n a m e $ h t t p . g e t ( ' / u s e r s ' ) . s u c c e s s ( f u n c t i o n ( d a t a ) { $ s c o p e . u s e r n a m e = d a t a . u s e r n a m e ; } ) ; } ] ) ;
  9. TWO WAY DATA-BINDING MODEL AND VIEW IN SYNC, NO RE-QUERYING

    AND INSTANT UPDATES < d i v c l a s s = " u s e r n a m e " > < p > C h a n g e y o u r u s e r n a m e : < / p > < i n p u t t y p e = " t e x t " n g - m o d e l = " u s e r n a m e " > < a n g - c l i c k = " u p d a t e U s e r n a m e ( ) ; " > S a v e u s e r n a m e a s { { u s e r n a m e } } ? < / a > < / d i v >
  10. $SCOPE FUNCTIONS CALLBACK-LESS DATA MANIPULATION (NO DOM) / / a

    p p l i e d v i a n g - c l i c k = " d e l e t e E m a i l ( $ i n d e x , e m a i l ) " $ s c o p e . d e l e t e E m a i l = f u n c t i o n ( i n d e x , d a t a ) { $ h t t p . d e l e t e ( d a t a ) . s u c c e s s ( f u n c t i o n ( ) { $ s c o p e . e m a i l s . s p l i c e ( i n d e x , 1 ) ; } ) ; } ;
  11. TEMPLATING SCALABLE/REUSABLE AND FAST COMPONENTS < ! - - t

    e m p l a t e s / e m a i l s . h t m l - - > < d i v c l a s s = " e m a i l s " n g - c o n t r o l l e r = " E m a i l s C t r l " > < p > I n b o x { { m y M o d e l . e m a i l s . l e n g t h } } < / p > < / d i v > < u l > < l i n g - r e p e a t = " e m a i l i n m y M o d e l . e m a i l s " n g - c l i c k = " v i e w E m a i l ( $ i n d e x , e m a i l ) " > < p > F r o m : { { e m a i l . f r o m } } < / p > < p > S u b j e c t : { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
  12. DIRECTIVES REUSABLE CHUNKS OF CODE/LOGIC / / < e m

    a i l s - l i s t > < / e m a i l s - l i s t > E l e m e n t : ' E ' / / < d i v e m a i l s - l i s t > < / d i v > A t t r i b u t e : ' A ' m y A p p . d i r e c t i v e ( ' e m a i l s L i s t ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E A ' , r e p l a c e : t r u e , t r a n s c l u d e : t r u e , t e m p l a t e U r l : ' t e m p l a t e s / e m a i l s . h t m l ' , l i n k : f u n c t i o n ( s c o p e , e l e m e n t , a t t r s ) { / / D O M m a n i p u l a t i o n / e v e n t s h e r e ! } } ; } ) ;
  13. EXPRESSIONS EVALUATE DATA AND MANIPULATE THE DOM < p >

    { { m y M o d e l . e m a i l s . l e n g t h > 0 & & ' E m a i l s ' | | ' N o e m a i l s ' } } < / p >
  14. FILTERS INSTANT DOM FILTERING < ! - - m y

    A p p . f i l t e r ( ' i m p o r t a n t ' , [ l o g i c ] ) - - > < u l > < l i n g - r e p e a t = " e m a i l i n m y M o d e l . e m a i l s | f i l t e r : i m p o r t a n t " > < p > { { e m a i l . f r o m } } < / p > < p > { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
  15. DYNAMIC VIEWS/ROUTING AUTOMATIC XHR HANDLING/TEMPLATE POPULATION m y A p

    p . c o n f i g ( [ ' $ r o u t e P r o v i d e r ' , f u n c t i o n ( $ r o u t e P r o v i d e r ) { $ r o u t e P r o v i d e r . w h e n ( ' / e m a i l s ' , { t e m p l a t e U r l : ' v i e w s / e m a i l s . h t m l ' } ) . w h e n ( ' / e m a i l s / i t e m : i d ' , { t e m p l a t e U r l : ' v i e w s / e m a i l s - s i n g l e . h t m l ' } ) . o t h e r w i s e ( { r e d i r e c t T o : ' / ' } ) ; } ] ) ;
  16. FACTORY ABSTRACTED LOGIC (DRY) m y A p p .

    f a c t o r y ( ' J S O N F a c t o r y ' , [ ' $ h t t p ' , f u n c t i o n ( $ h t t p ) { v a r J S O N F a c t o r y = { g e t U s e r s : f u n c t i o n ( c a l l b a c k ) { $ h t t p . g e t ( ' / u s e r s ' ) . s u c c e s s ( c a l l b a c k ) ; } , p o s t U s e r s : f u n c t i o n ( c a l l b a c k ) { $ h t t p . p o s t ( ' / u s e r s U p d a t e ' ) . s u c c e s s ( c a l l b a c k ) ; } } ; r e t u r n J S O N F a c t o r y ; } ] ) ; / / J S O N F a c t o r y . g e t U s e r s ( f u n c t i o n ( d a t a ) { / / $ s c o p e . u s e r s = d a t a ; / / } ) ;
  17. VALIDATION MODEL SAYS NO < ! - - a u

    t o e v e n t . p r e v e n t D e f a u l t ( ) f o r X H R c a l l s - - > < f o r m n g - s u b m i t = " u p d a t e U s e r n a m e ( ) ; " > < i n p u t t y p e = " t e x t " n g - m o d e l = " u s e r n a m e " > < b u t t o n t y p e = " s u b m i t " n g - d i s a b l e d = " ! u s e r n a m e . l e n g t h " > U p d a t e U s e r n a m e < / b u t t o n > < / f o r m >