Future of Angular Lazy Loading

Transcript

1. Future of Angular Lazy Loading Juanfran (Organizo AngularJs Madrid)
2. Angular 2.0
3. ES6
4. Clases c l a s s C h a r a c t e r { c o n s t r u c t o r ( n a m e , x , y ) { t h i s . n a m e = n a m e ; t h i s . x = x ; t h i s . y = y ; } m o v e ( x , y ) { t h i s . x = x ; t h i s . y = y ; } }
5. Módulos e x p o r t v a r m o v e s = 3 ; e x p o r t c l a s s C h a r a c t e r { c o n s t r u c t o r ( n a m e , x , y ) { t h i s . n a m e = n a m e ; t h i s . x = x ; t h i s . y = y ; } m o v e ( x , y ) { t h i s . x = x ; t h i s . y = y ; } } i m p o r t { m o v e s , C h a r a c t e r } f r o m ' . / c h a r a c t e r s ' ; c o n s o l e . l o g ( m o v e s ) ; / / 3 n e w C h a r a c t e r ( ' M r . A n g u l a r ' , 1 , 2 ) ;
6. Module loader API S y s t e m . i m p o r t ( ' . / c h a r a c t e r s ' ) . t h e n ( f u n c t i o n ( m o d u l e ) { c o n s o l e . l o g ( m o d u l e . m o v e s ) ; n e w m o d u l e . C h a r a c t e r ( ' M r . A n g u l a r ' , 1 , 2 ) ; } ) ;
8. di.js https://github.com/angular/di.js
9. p h o n e c a t C o n t r o l l e r s . c o n t r o l l e r ( ' P h o n e L i s t C t r l ' , [ ' $ s c o p e ' , ' $ h t t p ' , f u n c t i o n ( $ s c o p e , $ h t t p ) { / / } ] ) ;
10. e x p o r t c l a s s M e e t u p { c o n s t r u c t o r ( s p e a k e r , p r e s e n t a t i o n , p l a c e ) { } g e t I n f o ( ) { / / } }
11. i m p o r t { I n j e c t } f r o m ' d i / a n n o t a t i o n s ' ; i m p o r t { S p e a k e r } f r o m ' . / s p e a k e r ' ; i m p o r t { P r e s e n t a t i o n } f r o m ' . / p r e s e n t a t i o n ' ; i m p o r t { P l a c e } f r o m ' . / p l a c e ' ; @ I n j e c t ( S p e a k e r , P r e s e n t a t i o n , P l a c e ) e x p o r t c l a s s M e e t u p { c o n s t r u c t o r ( s p e a k e r , p r e s e n t a t i o n , p l a c e ) { } g e t I n f o ( ) { / / } }
12. v a r M e e t u p = f u n c t i o n ( . . . ) { / / } M e e t u p . a n n o t a t i o n s = [ n e w I n j e c t ( S p e a k e r , P r e s e n t a t i o n , P l a c e ) ] ;
13. i m p o r t { I n j e c t o r } f r o m ' d i / i n j e c t o r ' ; i m p o r t { M e e t u p } f r o m ' . / m e e t u p ' ; v a r i n j e c t o r = n e w I n j e c t o r ( ) ; v a r m e e t u p = i n j e c t o r . g e t ( M e e t u p ) ; m e e t u p . g e t I n f o ( ) ;
14. i m p o r t { I n j e c t o r } f r o m ' d i / i n j e c t o r ' ; v a r i n j e c t o r = n e w I n j e c t o r ( ) ; $ ( ' # s u b m i t ' ) . o n ( ' c l i c k ' , f u n c t i o n ( ) { S y s t e m . i m p o r t ( ' . / m e e t u p ' ) . t h e n ( f u n c t i o n ( m o d u l e ) { v a r m e e t u p = i n j e c t o r . g e t ( m o d u l e . M e e t u p ) ; m e e t u p . g e t I n f o ( ) ; } ) ; } ) ;
15. a n n o t a t e , h a s A n n o t a t i o n , r e a d A n n o t a t i o n s , S u p e r C o n s t r u c t o r , T r a n s i e n t S c o p e , I n j e c t , I n j e c t P r o m i s e , I n j e c t L a z y , P r o v i d e , P r o v i d e P r o m i s e
16. ¡Gracias! ¿Preguntas?