Angular.JS

JavaScript CodeLabs - Angular.JS
http://eueung.github.io/js-stuff/angular

Transcript

1.  Angular.JS Eueung Mulyana http://eueung.github.io/js/angular JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 26
2. Agenda Basics Basics++ Flatlander 2 / 26
3.  Basics 3 / 26
4. < ! d o c t y p e h t m l > < h t m l n g - a p p > < h e a d > < s c r i p t s r c = " h t t p s : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / a n g u l a r j s / 1 . 4 . 8 / a n g u l a r . m i n . j s " < / h e a d > < b o d y > < d i v > < 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 " p l a c e h o l d e r = " E n t e r a n a m e h e r e " < h r > < h 1 > H e l l o { { y o u r N a m e } } ! < / h 1 > < / d i v > < / b o d y > < / h t m l > Example #1 4 / 26
5. Example #2 a n g u l a r . m o d u l e ( ' e x - 0 1 - a p p ' , [ ] ) ; a n g u l a r . m o d u l e ( ' e x - 0 1 - 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 = ' W o r l d ' ; } ) ; < ! D O C T Y P E h t m l > < h t m l n g - a p p = " e x - 0 1 - a p p " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > A n g u l a r . J S < / t i t l e > < s c r i p t s r c = " h t t p s : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / a n g u l a r j s < / h e a d > < b o d y > < d i v 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 " > < l a b e l > N a m e : < i n p u t t y p e = " t e x t " n g - m o d e l = " n a m e " > < / l a b e l > < h 1 > H e l l o , { { n a m e } } ! < / h 1 > < / d i v > < / b o d y > < s c r i p t s r c = " e x - 0 1 . j s " > < / s c r i p t > < / h t m l > 5 / 26
6. a n g u l a r . m o d u l e ( ' e x - 0 2 - a p p ' , [ ] ) ; a n g u l a r . m o d u l e ( ' e x - 0 2 - 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 = ' D e f a u l t ' ; $ s c o p e . n a m e s = [ ] ; $ s c o p e . s u b m i t = f u n c t i o n ( ) { $ s c o p e . n a m e s . p u s h ( $ s c o p e . n a m e ) ; $ s c o p e . n a m e = " " ; } ; } ) ; < d i v 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 = " s u b m i t ( ) " > < l a b e l > N a m e : < i n p u t t y p e = " t e x t " n g - m o d e l = " n a m e " > < / l a b e l < / f o r m > < d i v n g - i f = " n a m e s . l e n g t h > 0 " > < h 1 > H e l l o t o < / h 1 > < u l > < l i n g - r e p e a t = " n a m e i n n a m e s " > { { n a m e | u p p e r c a s e } } < / u l > < / d i v > < / d i v > Example #3 6 / 26
7. Example #4 a n g u l a r . m o d u l e ( ' e x - 0 3 - a p p ' , [ ] ) ; a n g u l a r . m o d u l e ( ' e x - 0 3 - 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 = ' ' ; $ s c o p e . n a m e s = [ ' U j a n g ' , ' O t o n g ' , ' D o d $ s c o p e . s u b m i t = f u n c t i o n ( ) { $ s c o p e . n a m e s . p u s h ( $ s c o p e . n a m e ) ; c o n s o l e . l o g ( ' s u b m i t t i n $ s c o p e . n a m e = " " ; } ; } ) ; a n g u l a r . m o d u l e ( ' e x - 0 3 - a p p ' ) . f i l t e r ( ' r e v e r s e ' , f u n c t i o n ( ) { r e t u r n f u n c t i o n ( i n p u t ) { r e t u r n i n p u t . s p l i t ( " " ) . r e v e r s e ( ) . j o i n ( " " ) ; } ; } ) ; < d i v 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 = " s u b m i t ( ) " > < l a b e l > N a m e : < i n p u t t y p e = " t e x t " n g - m o d e l = " n a m e " > < / l a b e l < / f o r m > < d i v > < h 1 > H i t s < / h 1 > < u l > < l i n g - r e p e a t = " n a m e i n n a m e s " > { { n a m e | r e v e r s e } } < / l i < / d i v > < / d i v > 7 / 26
8. ( f u n c t i o n ( ) { v a r a p p = a n g u l a r . m o d u l e ( ' s t o r e ' , [ ] ) ; a p p . c o n t r o l l e r ( ' S t o r e C o n t r o l l e r ' , f u n c t i o n ( ) { t h i s . p r o d u c t = g e m ; } ) ; v a r g e m = { n a m e : ' D o d e c a h e d r o n ' , p r i c e : 2 . 9 5 , d e s c r i p t i o n : ' . . . ' , c a n P u r c h a s e : t r u e , s o l d O u t : f a l s e } } ) ( ) ; < d i v i d = " a p p 0 3 " n g - a p p = " s t o r e " > < d i v n g - c o n t r o l l e r = " S t o r e C o n t r o l l e r a s s t o r e " > < d i v n g - h i d e = " s t o r e . p r o d u c t . s o l d O u t " > < h 1 > { { s t o r e . p r o d u c t . n a m e } } < / h 1 > < h 2 > $ { { s t o r e . p r o d u c t . p r i c e } } < / h 2 > < p > { { s t o r e . p r o d u c t . d e s c r i p t i o n } } < / p > < b u t t o n n g - s h o w = " s t o r e . p r o d u c t . c a n P u r c h a s e " > A d d t o C a r t < / < / d i v > < / d i v > < / d i v > Example #5-1 8 / 26
9. < d i v i d = " a p p 0 3 a " n g - a p p = " s t o r e _ a " > < d i v n g - c o n t r o l l e r = " S t o r e C o n t r o l l e r a s s t o r e " > < d i v n g - r e p e a t = " p r o d u c t i n s t o r e . p r o d u c t s " > < d i v n g - h i d e = " p r o d u c t . s o l d O u t " > < h 2 > { { p r o d u c t . n a m e } } < / h 2 > < h 3 > $ { { p r o d u c t . p r i c e } } < / h 3 > < p > { { p r o d u c t . d e s c r i p t i o n } } < / p > < b u t t o n n g - s h o w = " p r o d u c t . c a n P u r c h a s e " > A d d t o C a r t < / b u t t o n < / d i v > < / d i v > < / d i v > < / d i v > Example #5-2 ( f u n c t i o n ( ) { v a r a p p = a n g u l a r . m o d u l e ( ' s t o r e _ a ' , [ ] ) ; a p p . c o n t r o l l e r ( ' S t o r e C o n t r o l l e r ' , f u n c t i o n ( ) { t h i s . p r o d u c t s = g e m s ; } ) ; v a r g e m s = [ { n a m e : ' D o d e c a h e d r o n ' , p r i c e : 2 . 9 5 , d e s c r i p t i o n : ' . . . ' , c a n P u r c h a s e : t r u e , s o l d O u t : f a l s e } , { n a m e : " P e n t a g o n a l G e m " , p r i c e : 5 . 9 5 , d e s c r i p t i o n : " . . . " , c a n P u r c h a s e : f a l s e , s o l d O u t : f a l s e } ] ; } ) ( ) ; 9 / 26
10. < d i v i d = " a p p 0 3 a _ m o d " n g - a p p = " s t o r e _ a " > < d i v n g - c o n t r o l l e r = " S t o r e C o n t r o l l e r a s s t o r e " > < u l c l a s s = " l i s t - g r o u p " > < l i c l a s s = " l i s t - g r o u p - i t e m " n g - r e p e a t = " p r o d u c t i n s t o r e . p r o d u c t s " < h 3 > { { p r o d u c t . n a m e } } < e m c l a s s = " p u l l - r i g h t " > { { p r o d u c t . p r i c e | c u r r e n c y } } < / h 3 > < / l i > < / u l > < / d i v > < / d i v > Example #5-3 ( f u n c t i o n ( ) { v a r a p p = a n g u l a r . m o d u l e ( ' s t o r e _ a ' , [ ] ) ; a p p . c o n t r o l l e r ( ' S t o r e C o n t r o l l e r ' , f u n c t i o n ( ) { t h i s . p r o d u c t s = g e m s ; } ) ; v a r g e m s = [ { n a m e : ' D o d e c a h e d r o n ' , p r i c e : 2 . 9 5 , d e s c r i p t i o n : ' . . . ' , c a n P u r c h a s e : t r u e , s o l d O u t : f a l s e } , { n a m e : " P e n t a g o n a l G e m " , p r i c e : 5 . 9 5 , d e s c r i p t i o n : " . . . " , c a n P u r c h a s e : f a l s e , s o l d O u t : f a l s e } ] ; } ) ( ) ; 10 / 26
11.  Basics++ 11 / 26
12. . d o n e - t r u e { t e x t - d e c o r a t i o n : l i n e - t h r o u g h ; c o l o r : g r e y ; } u l . u n s t y l e d , o l . u n s t y l e d { m a r g i n - l e f t : 0 ; l i s t - s t y l e : n o n e ; p a d d i n g Example #6 (Todo) 12 / 26
13. < ! d o c t y p e h t m l > < h t m l n g - a p p = " t o d o A p p " > < h e a d > < s c r i p t s r c = " h t t p s : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / a n g u l a r j s / 1 . 4 . 8 / a n g u l a r . m i n . j s " < s c r i p t s r c = " e x - 0 5 - t o d o . j s " > < / s c r i p t > < l i n k r e l = " s t y l e s h e e t " h r e f = " e x - 0 5 - t o d o . c s s " > < / h e a d > < b o d y > < h 2 > T o d o < / h 2 > < d i v n g - c o n t r o l l e r = " T o d o L i s t C o n t r o l l e r a s t o d o L i s t " > < s p a n > { { t o d o L i s t . r e m a i n i n g ( ) } } o f { { t o d o L i s t . t o d o s . l e n g t h } } r e m a i n i n g [ < a h r e f = " " n g - c l i c k = " t o d o L i s t . a r c h i v e ( ) " > a r c h i v e < / a > < u l c l a s s = " u n s t y l e d " > < l i n g - r e p e a t = " t o d o i n t o d o L i s t . t o d o 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 o d o . d o n e " > < s p a n c l a s s = " d o n e - { { t o d o . d o n e } } " > { { t o d o . t e x t } } < / s p a n < / l i > < / u l > < f o r m n g - s u b m i t = " t o d o L i s t . a d d T o d o ( ) " > < i n p u t t y p e = " t e x t " n g - m o d e l = " t o d o L i s t . t o d o T e x t " s i z e p l a c e h o l d e r = " a d d n e w t o d o h e r e " > < i n p u t c l a s s = " b t n - p r i m a r y " 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 > < / b o d y > < / h t m l > a n g u l a r . m o d u l e ( ' t o d o A p p ' , [ ] ) . c o n t r o l l e r ( ' T o d o L i s t C o n t r o l l e r ' , f u n c t i o n ( ) { v a r t o d o L i s t = t h i s ; t o d o L i s t . t o d o s = [ { t e x t : ' l e a r n a n g u l a r ' , d o n e : t r u e } , { t e x t : ' b u i l d a n a n g u l a r a p p ' , d o n e : f a l s e } ] ; t o d o L i s t . a d d T o d o = f u n c t i o n ( ) { t o d o L i s t . t o d o s . p u s h ( { t e x t : t o d o L i s t . t o d o T e x t , d o n e : f a l s e t o d o L i s t . t o d o T e x t = ' ' ; } ; t o d o L i s t . r e m a i n i n g = f u n c t i o n ( ) { v a r c o u n t = 0 ; a n g u l a r . f o r E a c h ( t o d o L i s t . t o d o s , f u n c t i o n ( t o d o ) { c o u n t + = t o d o . d o n e ? 0 : 1 ; } ) ; r e t u r n c o u n t ; } ; t o d o L i s t . a r c h i v e = f u n c t i o n ( ) { v a r o l d T o d o s = t o d o L i s t . t o d o s ; t o d o L i s t . t o d o s = [ ] ; a n g u l a r . f o r E a c h ( o l d T o d o s , f u n c t i o n ( t o d o ) { i f ( ! t o d o . d o n e ) t o d o L i s t . t o d o s . p u s h ( t o d o ) ; } ) ; } ; } ) ; 13 / 26
14. Example #7 (scotch.io) < d i v c l a s s = " j u m b o t r o n t e x t - c e n t e r " > < h 1 > H o m e P a g e < / h 1 > < p > { { m e s s a g e } } < / p > < / d i v > < d i v c l a s s = " j u m b o t r o n t e x t - c e n t e r " > < h 1 > C o n t a c t P a g e < / h 1 > < p > { { m e s s a g e } } < / p > < / d i v > 14 / 26
15. HTML < b o d y n g - c o n t r o l l e r = " m a i n C o n t r o l l e r " > < n a v c l a s s = " n a v b a r n a v b a r - d e f a u l t " > < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " n a v b a r - h e a d e r " > < a c l a s s = " n a v b a r - b r a n d " h r e f = " / " > A n g u l a r R o u t i n g E x a m p l e < / d i v > < u l c l a s s = " n a v n a v b a r - n a v n a v b a r - r i g h t " > < l i > < a h r e f = " # h o m e " > < i c l a s s = " f a f a - h o m e " > < / i > H o m e < / < l i > < a h r e f = " # a b o u t " > < i c l a s s = " f a f a - s h i e l d " > < / i > A b o u t < l i > < a h r e f = " # c o n t a c t " > < i c l a s s = " f a f a - c o m m e n t " > < / i > < / u l > < / d i v > < / n a v > < d i v i d = " m a i n " > < d i v n g - v i e w > < / d i v > < / d i v > < f o o t e r c l a s s = " t e x t - c e n t e r " > . . . < / f o o t e r > < / b o d y > JS v a r s c o t c h A p p = a n g u l a r . m o d u l e ( ' s c o t c h A p p ' , [ ' n g R o u t e ' ] ) ; s c o t c h A p p . c o n f i g ( 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 ( ' / ' , { t e m p l a t e U r l : ' e x - 0 6 / h o m e . h t m l ' , c o n t r . w h e n ( ' / h o m e ' , { t e m p l a t e U r l : ' e x - 0 6 / h o m e . h t m l ' , c o n t r . w h e n ( ' / a b o u t ' , { t e m p l a t e U r l : ' e x - 0 6 / a b o u t . h t m l ' , c o n t . w h e n ( ' / c o n t a c t ' , { t e m p l a t e U r l : ' e x - 0 6 / c o n t a c t . h t m l ' , c o } ) ; s c o t c h A p p . c o n t r o l l e r ( ' m a i n 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 . m e s s a g e = ' E v e r y o n e c o m e a n d s e e h o w g o o d I l o o k ! ' } ) ; s c o t c h A p p . c o n t r o l l e r ( ' a b o u t 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 . m e s s a g e = ' L o o k ! I a m a n a b o u t p a g e . ' ; } ) ; s c o t c h A p p . c o n t r o l l e r ( ' c o n t a c t 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 . m e s s a g e = ' C o n t a c t u s ! J K . T h i s i s j u s t a d e m o . ' ; } ) ; 15 / 26
16.  Flatlander Based on Shaping up with Angular.js @Codeschool 16 / 26
17. 17 / 26
18. 18 / 26
19. 19 / 26
20. 20 / 26
21. HTML < d i v i d = " a p p 0 2 " n g - a p p = " s t o r e " > < d i v c l a s s = " l i s t - g r o u p n g - s c o p e " n g - c o n t r o l l e r = " S t o r e C o n t r o l l e r a s s t o r e " < d i v c l a s s = " l i s t - g r o u p - i t e m " n g - r e p e a t = " p r o d u c t i n s t o r e . p r o d u c t s " < p r o d u c t - t i t l e > < / p r o d u c t - t i t l e > < p r o d u c t - g a l l e r y > < / p r o d u c t - g a l l e r y > < p r o d u c t - p a n e l s > < / p r o d u c t - p a n e l s > < / d i v > < / d i v > < / d i v > < / b o d y > < s c r i p t s r c = " f l a t l a n d e r - 0 2 . j s " > < / s c r i p t > < s c r i p t s r c = " f l a t l a n d e r - 0 2 - p r o d u c t s . j s " > < / s c r i p t > < s t y l e t y p e = " t e x t / c s s " > b o d y { m a x - w i d t h : 6 0 0 p x ; m a r g i n : 0 a u t o ; p a d d i n g : 2 0 p x 0 ; } . i m g - t h u m b n a i l { m a r g i n : 1 0 p x a u t o ; } l i . s m a l l - i m a g e { w i d t h : 5 0 p x ; m a r g i n - b o t t o m : 0 ! i m p o r t a n t ; } l i . s m a l l - i m a g e i m g { w i d t h : 1 0 0 % ; } . n o p a d d i n g { p a d d i n g : 0 ! i m p o r t a n t ; } < / s t y l e > 21 / 26
22. JS ( f u n c t i o n ( ) { v a r a p p = a n g u l a r . m o d u l e ( ' s t o r e ' , [ ' s t o r e - p r o d u c t s ' ] ) ; / / - - - - - - - - - - - - - - - - a p p . c o n t r o l l e r ( ' S t o r e C o n t r o l l e r ' , [ ' $ h t t p ' , f u n c t i o n ( $ h t t p ) v a r s t o r e = t h i s ; s t o r e . p r o d u c t s = [ ] ; $ h t t p . g e t ( ' f l a t l a n d e r - 0 2 / s t o r e - p r o d u c t s . j s o n ' ) . s u c c e s s ( f u n c t i o n } ] ) ; / / - - - - - - - - - - - - - - - - a p p . c o n t r o l l e r ( ' R e v i e w C o n t r o l l e r ' , f u n c t i o n ( ) { t h i s . r e v i e w = { } ; t h i s . a d d R e v i e w = f u n c t i o n ( p r o d u c t ) { t h i s . r e v i e w . c r e a t e d O n = D a t e . n o w ( ) ; p r o d u c t . r e v i e w s . p u s h ( t h i s . r e v i e w ) ; t h i s . r e v i e w = { } ; } ; } ) ; / / - - - - - - - - - - - - - - - - } ) ( ) ; ( f u n c t i o n ( ) { v a r a p p = a n g u l a r . m o d u l e ( ' s t o r e - p r o d u c t s ' , [ ] ) ; / / - - - - - - - - - - - - - - - - a p p . d i r e c t i v e ( ' p r o d u c t G a l l e r y ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E ' , t e m p l a t e U r l : ' f l a t l a n d e r - 0 2 / t e m p l a c o n t r o l l e r : f u n c t i o n ( ) { t h i s . c u r r e n t = 0 ; t h i s . s e t C u r r e n t = f u n c t i o n ( n e w G a l l e r y ) { t h i s . c u r r e n t = } , c o n t r o l l e r A s : ' g a l l e r y ' } ; } ) ; / / - - - - - - - - - - - - - - - - a p p . d i r e c t i v e ( ' p r o d u c t T i t l e ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E ' , t e m p l a t e U r l : ' f l a t l a n d e r - 0 2 / t e m p l a } ) ; / / - - - - - - - - - - - - - - - - a p p . d i r e c t i v e ( " p r o d u c t S p e c s " , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' A ' , t e m p l a t e U r l : ' f l a t l a n d e r - 0 2 / t e m p l a } ) ; / / - - - - - - - - - - - - - - - - a p p . d i r e c t i v e ( " p r o d u c t P a n e l s " , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E ' , t e m p l a t e U r l : ' f l a t l a n d e r - 0 2 / t e m p l a c o n t r o l l e r : f u n c t i o n ( ) { t h i s . t a b = 1 ; t h i s . s e l e c t T a b = f u n c t i o n ( s e t T a b ) { t h i s . t a b = s e t T a b ; t h i s . i s S e l e c t e d = f u n c t i o n ( c h e c k T a b ) { r e t u r n t h i s . t a b } , c o n t r o l l e r A s : ' p a n e l ' } ; } ) ; / / - - - - - - - - - - - - - - - - } ) ( ) ; 22 / 26
23. product-title.html < h 3 > { { p r o d u c t . n a m e } } < e m c l a s s = " p u l l - r i g h t " > { { p r o d u c t . p r i c e | c u r r e n c y } } < / e m > < / h 3 > product-gallery.html < d i v c l a s s = " g a l l e r y " n g - s h o w = " p r o d u c t . i m a g e s . l e n g t h " > < i m g n g - s r c = " { { p r o d u c t . i m a g e s [ g a l l e r y . c u r r e n t ] } } " c l a s s = " i m g i m g - c i r c l e i m g - t h u m b n a i l c e n t e r - b l o c k " < u l c l a s s = " c l e a r f i x n o p a d d i n g " > < l i c l a s s = " s m a l l - i m a g e p u l l - l e f t t h u m b n a i l " n g - r e p e a t = " i m a g e i n p r o d u c t . i m a g e s t r a c k b y $ i n d e x " < a h r e f n g - c l i c k = " g a l l e r y . s e t C u r r e n t ( $ i n d e x ) " > < i m g n g - s r c < / l i > < / u l > < / d i v > product-specs.html < h 4 > S p e c s < / h 4 > < u l c l a s s = " l i s t - u n s t y l e d " > < l i > < s t r o n g > S h i n e < / s t r o n g > : { { p r o d u c t . s h i n e } } < / l i > < l i > < s t r o n g > F a c e s < / s t r o n g > : { { p r o d u c t . f a c e s } } < / l i > < l i > < s t r o n g > R a r i t y < / s t r o n g > : { { p r o d u c t . r a r i t y } } < / l i > < l i > < s t r o n g > C o l o r < / s t r o n g > : { { p r o d u c t . c o l o r } } < / l i > < / u l > < / d i v > 23 / 26
24. product-panels.html < s e c t i o n > < l i n g - c l a s s = " { a c t i v e : p a n e l . i s S e l e c t e d ( 1 ) } " > < a h r e f n g - c l i c k < l i n g - c l a s s = " { a c t i v e : p a n e l . i s S e l e c t e d ( 2 ) } " > < a h r e f n g - c l i c k < l i n g - c l a s s = " { a c t i v e : p a n e l . i s S e l e c t e d ( 3 ) } " > < a h r e f n g - c l i c k < / u l > < d i v c l a s s = " p a n e l " n g - s h o w = " p a n e l . i s S e l e c t e d ( 1 ) " > < h 4 > D e s c r i p t i o n < / h 4 > < b l o c k q u o t e > { { p r o d u c t . d e s c r i p t i o n } } < / b l o c k q u o t e > < / d i v > < d i v p r o d u c t - s p e c s c l a s s = " p a n e l " n g - s h o w = " p a n e l . i s S e l e c t e d ( 2 ) " < d i v c l a s s = " p a n e l " n g - s h o w = " p a n e l . i s S e l e c t e d ( 3 ) " > < h 4 > R e v i e w s < / h 4 > . . . < / d i v > < / s e c t i o n > < u l c l a s s = " n a v n a v - p i l l s " > < b l o c k q u o t e n g - r e p e a t = " r e v i e w i n p r o d u c t . r e v i e w s " > < b > { { r e v i e w . s t a r s } } S t a r s < / b > { { r e v i e w . b o d y } } < f o o t e r > < c i t e > { { r e v i e w . a u t h o r } } o n { { r e v i e w . c r e a t e d O n | d a t e < / b l o c k q u o t e > < f o r m n a m e = " r e v i e w F o r m " r o l e = " f o r m " n g - c o n t r o l l e r = " R e v i e w C o n t r < b l o c k q u o t e > < b > { { r e v i e w C t r l . r e v i e w . s t a r s } } S t a r s < / b > { { r e v i e w C t r l . r e v i e w . b o d y } } < f o o t e r > < c i t e > { { r e v i e w C t r l . r e v i e w . a u t h o r } } < / c i t e > < / f o o t e r < / b l o c k q u o t e > < h 4 > S u b m i t a R e v i e w < / h 4 > < d i v c l a s s = " f o r m - g r o u p " > < s e l e c t c l a s s = " f o r m - c o n t r o l " n g - o p t i o n s = " s t a r s f o r s t a r s i < o p t i o n v a l u e = " " > R a t e t h e P r o d u c t < / o p t i o n > < / s e l e c t > < / d i v > < d i v c l a s s = " f o r m - g r o u p " > < t a g - t e x t a r e a c l a s s = " f o r m - c o n t r o l " r o w s = " 3 " n g - m o d e l = " r e v i < / d i v > < d i v c l a s s = " f o r m - g r o u p " > < i n p u t t y p e = " e m a i l " c l a s s = " f o r m - c o n t r o l " n g - m o d e l = " r e v i e w C < / d i v > < i n p u t t y p e = " s u b m i t " v a l u e = " S u b m i t " c l a s s = " b t n b t n - d e f a u l t " < / f o r m > 24 / 26
25. References 1. AngularJS — Superheroic JavaScript MVW Framework 2. Single Page Apps with AngularJS Routing and Templating | Scotch 3. Shaping up with Angular.js 4. Angular introduction 25 / 26
26.  END Eueung Mulyana http://eueung.github.io/js/angular JS CodeLabs | Attribution-ShareAlike CC BY-SA 26 / 26