Modular Angular JS

Presentation at 1st FrontInCuiabá (2015) with a short introduction on AngularJS wrote with good practices.

Transcript

1. MODULAR ANGULARJS
2. WHO AM I? @dhyegofernando
3. PLUGINS? I SEE EVERYWHERE
4. VANILLA JS PLUGINS v a r p l u g i n = n e w P l u g i n ( d o c u m e n t . q u e r y S e l e c t o r ( ' . p l u g i n ­ s e l e c t o r ' ) ) ;
5. JQUERY PLUGINS $ ( ' . p l u g i n ­ s e l e c t o r ' ) . p l u g i n ( ) ;
7. ANGULARJS FTW
8. WHY ANGULARJS?
9. DATA-BINDING
10. DATA-BINDING JQUERY EXAMPLE $ ( ' # i n p u t ­ n a m e ' ) . o n ( ' c h a n g e ' , f u n c t i o n ( ) { $ ( ' # g r e e t i n g ­ n a m e ' ) . t e x t ( t h i s . v a l u e ) ; } ) ;
11. ONE WAY DATA-BINDING
12. TWO WAY DATA-BINDING
13. DATA-BINDING EXAMPLE < d i v n g ­ a p p > < l a b e l > N a m e : < / l a b e l > < i n p u t t y p e = " t e x t " n g ­ m o d e l = " y o u r N a m e " > < h r > < h 1 > H e l l o { { y o u r N a m e } } ! < / h 1 > < / d i v >
14. DEPENDENCY INJECTION
15. DEPENDENCY INJECTION EXAMPLE
16. DEPENDENCY INJECTION EXAMPLE < d i v n g ­ a p p = " a p p " n g ­ c o n t r o l l e r = " G r e e t i n g C o n t r o l l e r " > < f o r m n g ­ s u b m i t = " g r e e t ( ) " > < i n p u t t y p e = " t e x t " n g ­ m o d e l = " n a m e " > < b u t t o n t y p e = " s u b m i t " > G r e e t < / b u t t o n > < / f o r m > < / d i v > a n g u l a r . m o d u l e ( ' a p p ' , [ ] ) . c o n t r o l l e r ( ' G r e e t i n g C o n t r o l l e r ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . n a m e = ' J o h n D o e ' ; $ s c o p e . g r e e t = f u n c t i o n ( ) { a l e r t ( ' H e l l o ' + $ s c o p e . n a m e ) ; } ; } ) ;
17. DIRECTIVES
18. TAB COMPONENT
19. NON-SEMANTIC TAB COMPONENT < d i v i d = " t a b " > < u l c l a s s = " t a b ­ h e a d " > < l i > < a h r e f = " # c o n t e n t ­ 1 " > T i t l e 1 < / a > < / l i > < l i > < a h r e f = " # c o n t e n t ­ 2 " > T i t l e 2 < / a > < / l i > < l i > < a h r e f = " # c o n t e n t ­ 3 " > T i t l e 3 < / a > < / l i > < / u l > < d i v i d = " c o n t e n t ­ 1 " c l a s s = " t a b ­ c o n t e n t " > < p > C o n t e n t 1 g o e s h e r e < / p > < / d i v > < d i v i d = " c o n t e n t ­ 2 " c l a s s = " t a b ­ c o n t e n t " > < p > C o n t e n t 2 g o e s h e r e < / p > < / d i v > < d i v i d = " c o n t e n t ­ 3 " c l a s s = " t a b ­ c o n t e n t " > < p > C o n t e n t 3 g o e s h e r e < / p > < / d i v > < / d i v > $ ( ' # t a b ' ) . t a b ( ) ;
21. SEMANTIC TAB COMPONENT < t a b s e t > < t a b h e a d i n g = " T i t l e 1 " > < p > C o n t e n t 1 g o e s h e r e < / p > < / t a b > < t a b h e a d i n g = " T i t l e 2 " > < p > C o n t e n t 2 g o e s h e r e < / p > < / t a b > < t a b h e a d i n g = " T i t l e 3 " > < p > C o n t e n t 3 g o e s h e r e < / p > < / t a b > < / t a b s e t >
23. NOW LET'S LET THE THINGS A LITTLE BIT MORE INTERESTING
24. TODO APP
25. FEATURES Tasks List Add Mark/Unmark as complete Archive
26. TODO APP: THE WRONG WAY
27. STRUCTURE | ­ ­ j s / | | ­ ­ c o n t r o l l e r s . j s | | ­ ­ d i r e c t i v e s . j s | | ­ ­ s e r v i c e s . j s | | ­ ­ a p p . j s | ­ ­ i n d e x . h t m l
28. index.html . . . < d i v n g ­ c o n t r o l l e r = " T o d o C o n t r o l l e r " > < s p a n > { { r e m a i n i n g ( ) } } o f { { t a s k s . l e n g t h } } r e m a i n i n g < / s p a n > [ < a h r e f = " " n g ­ c l i c k = " a r c h i v e ( ) " > a r c h i v e < / a > ] < u l > < l i n g ­ r e p e a t = " t a s k i n t a s k s " > < i n p u t t y p e = " c h e c k b o x " n g ­ m o d e l = " t a s k . d o n e " > < s p a n c l a s s = " d o n e ­ { { t a s k . d o n e } } " > { { t a s k . t e x t } } < / s p a n > < / l i > < / u l > < f o r m n g ­ s u b m i t = " a d d T a s k ( ) " > < i n p u t t y p e = " t e x t " n g ­ m o d e l = " t a s k T e x t " > < i n p u t t y p e = " s u b m i t " v a l u e = " a d d " > < / f o r m > < / d i v > . . .
29. app.js a n g u l a r . m o d u l e ( ' a p p ' , [ ' a p p . c o n t r o l l e r s ' ] ) ; controllers.js a n g u l a r . m o d u l e ( ' a p p . c o n t r o l l e r s ' ) . c o n t r o l l e r ( ' T o d o C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . t a s k s = [ ] ; $ s c o p e . a d d T a s k = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . r e m a i n i n g = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . a r c h i v e = f u n c t i o n ( ) { / / . . . } ; } ] ) . c o n t r o l l e r ( ' O t h e r C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { / / . . . } ] ) ;
31. COMMON APPROACH MISTAKES
32. FILES STRUCTURE
33. NEVER SEPARATE FILES IN FOLDER BY THEIR TYPE | ­ ­ j s / | | ­ ­ c o n t r o l l e r s . j s | | ­ ­ d i r e c t i v e s . j s | | ­ ­ s e r v i c e s . j s | | ­ ­ a p p . j s | ­ ­ i n d e x . h t m l
34. ALWAYS SEPARATE FILES IN THEIR COMPONENT NAME FOLDER | ­ ­ s r c / | | ­ ­ t o d o / | | | ­ ­ t o d o . h t m l | | | ­ ­ t o d o . m o d u l e . j s | | | ­ ­ t o d o . c o n f i g . j s | | | ­ ­ t o d o . c o n t r o l l e r . j s | | | ­ ­ t o d o . c o n t r o l l e r . s p e c . j s | | ­ ­ t a s k s / | | | ­ ­ t a s k s . m o d u l e . j s | | | ­ ­ t a s k s . s e r v i c e . j s | | | ­ ­ t a s k s . s e r v i c e . s p e c . j s | | | ­ ­ t a s k s . d i r e c t i v e . j s | | | ­ ­ t a s k s . d i r e c t i v e . s p e c . j s | | ­ ­ a p p . m o d u l e . j s | | ­ ­ i n d e x . h t m l
35. MODULES (OR LACK THEREOF)
36. NEVER SEPARATE MODULES BY THEIR TYPE controllers.js a n g u l a r . m o d u l e ( ' a p p . c o n t r o l l e r s ' ) . c o n t r o l l e r ( ' T o d o C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . t a s k s = [ ] ; $ s c o p e . a d d T a s k = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . r e m a i n i n g = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . a r c h i v e = f u n c t i o n ( ) { / / . . . } ; } ] ) . c o n t r o l l e r ( ' O t h e r C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { / / . . . } ] ) ;
37. ALWAYS SEPARATE MODULES BY THEIR COMPONENT NAME todo/todo.controller.js a n g u l a r . m o d u l e ( ' t o d o ' ) . c o n t r o l l e r ( ' T o d o C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . t a s k s = [ ] ; $ s c o p e . a d d T a s k = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . r e m a i n i n g = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . a r c h i v e = f u n c t i o n ( ) { / / . . . } ; } ] ) ; app.module.js a n g u l a r . m o d u l e ( ' a p p ' , [ ' t o d o ' ] ) ;
38. TOO MANY CONTROLLERS RESPONSIBILITY
39. NEVER LET CONTROLLERS DO A LOT OF OTHER THINGS (LIKE PERSIST) controllers.js a n g u l a r . m o d u l e ( ' a p p . c o n t r o l l e r s ' ) . c o n t r o l l e r ( ' T o d o C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . t a s k s = [ ] ; $ s c o p e . a d d T a s k = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . r e m a i n i n g = f u n c t i o n ( ) { / / . . . } ; $ s c o p e . a r c h i v e = f u n c t i o n ( ) { / / . . . } ; } ] ) . . .
40. ALWAYS LET CONTROLLERS AS CLEAN AS POSSIBLE (AND ISOLATE SHARED BEHAVIOURS IN SERVICES)
41. todo/todo.controller.js a n g u l a r . m o d u l e ( ' t o d o ' ) . c o n t r o l l e r ( ' T o d o C o n t r o l l e r ' , [ ' $ s c o p e ' , ' T a s k s ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . t a s k s = T a s k s . g e t ( ) ; $ s c o p e . a d d T a s k = f u n c t i o n ( ) { T a s k s . a d d ( ) ; } ; $ s c o p e . r e m a i n i n g = f u n c t i o n ( ) { T a s k s . c o u n t ( ) ; } ; $ s c o p e . a r c h i v e = f u n c t i o n ( ) { T a s k s . a r c h i v e ( ) ; } ; } ] ) ; tasks/tasks.service.js a n g u l a r . m o d u l e ( ' t a s k s ' ) . f a c t o r y ( ' T a s k s ' , [ ' $ h t t p ' , f u n c t i o n ( $ h t t p ) { r e t u r n { g e t : f u n c t i o n ( ) { $ h t t p . g e t ( ) ; } , a d d : f u n c t i o n ( ) { $ h t t p . p o s t ( ) ; } , c o u n t : f u n c t i o n ( ) { $ h t t p . g e t ( ) . l e n g t h ; } , a r c h i v e : f u n c t i o n ( ) { $ h t t p . p u t ( ) ; } } ; } ] ) ;
43. JUST SOME TIPS TO KEEP THINGS BETTER...
44. SHARE BEHAVIOURS THROUGH COMPONENTS BUT DO NOT REINVENT THE WHEEL
45. HOW TO LOOK FOR A COMPONENT
46. WHERE TO FIND COMPONENTS?
47. ANGULARJS DOCS
48. BOWER.IO
49. NGMODULES.ORG
50. HOW TO USE A COMPONENT? Download or Install the component b o w e r i n s t a l l ­ ­ s a v e a n g u l a r ­ m a t e r i a l Load the component files < l i n k h r e f = " a n g u l a r ­ m a t e r i a l . m i n . c s s " r e l = " s t y l e s h e e t " > < s c r i p t s r c = " a n g u l a r ­ m a t e r i a l . m i n . j s " > Set as a module dependency a n g u l a r . m o d u l e ( ' a p p ' , [ ' n g M a t e r i a l ' ] ) ;
52. WHAT DO I HAVE TO DO TO BUILD MY OWN COMPONENT?
53. WRITE GREAT TESTS
54. WRITE SOME DOCUMENTATION
55. FOLLOW THE STYLE GUIDE
56. USE GENERATORS
57. AND FINALLY PUBLISH IT b o w e r i n i t & & b o w e r p u b l i s h
58. QUESTIONS?
59. NOW... IT'S UP TO YOU
60. THANK YOU github.com/dhyegofernando twitter.com/dhyegofernando SLIDES bit.ly/1F3KyH2