Building the Modern Web with AngularJS

B56bb22b3a4b83c6b534b4c114671380?s=47 Todd Motto
January 16, 2014

Building the Modern Web with AngularJS

Presented at London Web, 16.01.2014 and FrontEndLondon 30.01.2014.

B56bb22b3a4b83c6b534b4c114671380?s=128

Todd Motto

January 16, 2014
Tweet

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?