Using Angular.js in Existing Projects

angularjs.tw#3

Transcript

1. Using Angular.js in Existing Projects A n d a g l i m p s e o f t h e c o m p o n e n t s a n g u l a r j s . t w # 3 @ c l k a o
2. Why? Animation is cool! as we learned last time ++ lots of angularjs modules are now available, and you don’t need to be in a pure ng-world to use them.
3. A little recap No controller, if the interaction is trivial: (Using ui-bootstrap) . b t n - g r o u p a . b t n ( n g - m o d e l = " t y p e " , b t n - r a d i o = " ' p r i c e ' " ) P r i c e a . b t n ( n g - m o d e l = " t y p e " , b t n - r a d i o = " ' u n i t p r i c e ' " ) U n i t . l e a f l e t ( c l a s s = " a g g r e g a t e - { { t y p e } } " , r e s i z e ) Implicit $ s c o p e.
4. In html < d i v c l a s s = " b t n - g r o u p " > < a n g - m o d e l = " t y p e " b t n - r a d i o = " ' p r i c e ' " c l a s s = " b t n " > P r i c e < / a > < a n g - m o d e l = " t y p e " b t n - r a d i o = " ' u n i t p r i c e ' " c l a s s = " b t n " > U n i t < / a > < / d i v > < d i v r e s i z e = " r e s i z e " c l a s s = " l e a f l e t a g g r e g a t e - { ​ { t y p e } } " > < / d i v > You can now use .aggregate-price and .aggregate-unit selectors to control the display inside leaflet
5. sass . a g g r e g a t e - m a r k e r s p a n d i s p l a y : n o n e . l e a f l e t & . a g g r e g a t e - p r i c e . a g g r e g a t e - m a r k e r s p a n . p r i c e d i s p l a y : b l o c k & . a g g r e g a t e - u n i t p r i c e . a g g r e g a t e - m a r k e r s p a n . u n i t p r i c e d i s p l a y : b l o c k
6. Demo realprice.g0v.tw
7. bootstrap Basically what < h t m l n g - a p p > does for us. Similar to: a n g u l a r . b o o t s t r a p ( $ e l e m e n t )
8. bootstrapping in existing project Let’s walk through this by modifying a real project. Subway - an IRC web UI built with Backbone W A R N I N G just an example, not for practical reason nor complete. github.com/clkao/subway angulardemo branch
9. Let’s change the user list
10. fragments Subway does some client side templating in ChatView: t h i s . s e t e l e m e n t ( i c h . t e m p l a t e s . c h a t ) ; a n g u l a r . b o o t s t r a p ( t h i s . $ e l , [ ] ) ; So let’s just bootstrap after the template is rendered But if you do something more complicated, you need $compile
11. $compile Every time you do $ e l e m e n t . h t m l ( ' < d i v > . . . < / d i v > ' ) a kitten dies. Save them with: $ i n j e c t o r = a n g u l a r . e l e m e n t ( r o o t ) . d a t a ( ' $ i n j e c t o r ' ) ; $ s c o p e = a n g u l a r . e l e m e n t ( $ e l e m e n t ) . s c o p e ( ) ; $ c o m p i l e = $ i n j e c t o r . i n v o k e ( f u n c t i o n ( $ c o m p i l e ) { r e t u r n $ c o m p i l e } $ c o m p i l e ( e l e m e n t ) ( $ s c o p e ) ;
12. $digest when data (dom values or refrences) changed in non-angular context, manually $digest the $scope. $ s c o p e = a n g u l a r . e l e m e n t ( t h i s . _ e l e m e n t ) . s c o p e ( ) ; $ s c o p e . u s e r s . p u s h ( U s e r . a t t r i b u t e s ) ; $ s c o p e . $ d i g e s t ( ) ;
13. Controller • = modular $scope helper • enabe with ng-controller tag attributes • or ui-router state rule
14. Module Essentially a collection of things, can load other dependencies. a n g u l a r . m o d u l e ( ' s u b w a y ' , [ ' u i - b o o t s t r a p ' ] ) . c o n t r o l l e r ( ' U s e r L i s t ' , f u n c t i o n ( $ s c o p e ) { $ s c o p e . u s e r s = [ ] } ) ; a n g u l a r . b o o t s t r a p ( $ e l e m e n t , [ ' s u b w a y ' ] )
15. $scope scope Many directives create new scopes. Some creates isolated scopes. . u s e r l i s t _ u s e r ( n g - r e p e a t = " u s e r i n u s e r s " ) # # n e w s c o p e w i t h i t e r a t o r d i v ( c l a s s = " u s e r l i s t _ u s e r _ a c t i v i t y " ) i m g ( n g - s r c = " / a s s e t s / i m a g e s / . p n g " ) “prototopical copy” - If you don’t know what it means, use an object if you want the child scopes to be able to update scope variables.
16. Break
17. Service • communication between Controllers. • persistent across controller
18. Service - auth example . c o n t r o l l e r F o o : ( $ s c o p e , m y A u t h S e r v i c e ) - > $ s c o p e . $ o n ' e v e n t : a u t h - l o g g e d i n ' - > # d o s o m e t h i n g . f a c t o r y m y A u t h S e r v i c e : ( $ h t t p , $ r o o t S c o p e ) - > l o g i n : - > # i f l o g g e d - i n : $ r o o t S c o p e . $ b r o a d c a s t ' e v e n t : a u t h - l o g g e d i n ' , { u s e r }
19. Directives Remember r e s i z e? . l e a f l e t ( r e s i z e ) l e a f l e t ( n g - s t y l e = ' { w i d t h : $ p a r e n t . w i d t h , h e i g h t : $ p a r e n t . c o n t e n t H e i g h t } ' )
20. Resize . d i r e c t i v e ' r e s i z e ' ( $ w i n d o w ) - > ( $ s c o p e , e l e m e n t , a t t r s ) - > r e f r e s h - s i z e = - > $ s c o p e . w i d t h = $ w i n d o w . i n n e r W i d t h $ s c o p e . c o n t e n t - h e i g h t = $ s c o p e . h e i g h t = $ w i n d o w . i n n e r H e i g h t $ s c o p e . c o n t e n t - h e i g h t - = $ ( e l e m e n t ) . o f f s e t ( ) . t o p a n g u l a r . e l e m e n t ( $ w i n d o w ) . b i n d ' r e s i z e ' - > $ s c o p e . $ a p p l y r e f r e s h - s i z e r e f r e s h - s i z e !
21. Directives All dom interaction should be defined as directives. The Hitchhiker’s Guide to the Directive
22. Route v.s. State Builtin router = route -> view -> controller Use ui-router instead: route -> state <- controller
23. Thank you!