Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. BUILDING THE MODERN WEB WITH ANGULARJS @toddmotto | toddmotto.com

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

    FireShell Partnered with Intel/Rolling Stone in 2013
  3. SESSION OVERVIEW Modern Web Key concepts (MVC, data-binding) AngularJS core

    features
  4. WHAT/WHY ANGULAR? Client-side MVC + JS framework Server + Client

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

    DOM HTML5 data-* attributes Single Page Apps More JavaScript
  6. KEY CONCEPTS QUICK OVERVIEW OF MVC (+ DATA-BINDING!)

  7. MODEL APPLICATION DATA (JSON)

  8. VIEW RENDERED HTML/COMPONENTS/TEMPLATES

  9. CONTROLLER COMMS WITH THE SERVER AND CLIENT DRIVES THE MODEL/VIEW

    CHANGES
  10. TWO WAY DATA-BINDING KEEPING DATA IN SYNC, MODEL UPDATES THE

    VIEW, VICE VERSA
  11. THREE D'S Design Declare Distribute

  12. 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 " } ]
  13. 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 >
  14. 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 } ) ; } ] ) ;
  15. CORE FEATURES THE WOW PARTS

  16. 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 >
  17. 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 ; } ) ; } ] ) ;
  18. 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 >
  19. $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 ) ; } ) ; } ;
  20. 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 >
  21. 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 ! } } ; } ) ;
  22. 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 >
  23. 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 >
  24. 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 : ' / ' } ) ; } ] ) ;
  25. 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 ; / / } ) ;
  26. 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 >
  27. "THINKING ANGULAR" NG-THINKING Forget the DOM exists $('.no!') Think components

    and layers Keep code abstracted (files/code)
  28. QUESTIONS?