WebApps with AngularJS

Overview of developement using AngularJS, you can also check the presentation with some interactive examples here http://vitorleal.github.io/angularjs-talk

Transcript

1. WEBAPPS WITH ANGULARJS AN OVERVIEW OF THE FRAMEWORK - Telefonica Brazil Vitor Leal
2. WHAT IS ANGULARJS It's a structural framework for dynamic web apps that's easy to maintain, in a fast and testable way.
3. THE PRINCIPLES Rapid development Modularity Built to be testable Write less code
4. WHAT IT OFFERS US Controllers Templates Two-Way data bindings Services Directives Dependency Injection
5. THE SIMPLEST EXAMPLE < ! 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 = " j s / a n g u l a r . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < f o r m > < l a b e l > Y o u r 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 = " n a m e " p l a c e h o l d e r = " Y o u r n a m e ? " > < / f o r m > < h 3 > M y n a m e i s { { n a m e } } ! < / h 3 > < / b o d y > < / h t m l >
6. $SCOPE $scope is an object that refers to the application model. It connects the View and the Controller myController.js myView.html f u n c t i o n M y C o n t r o l l e r ( $ s c o p e ) { $ s c o p e . n a m e = ' V i t o r L e a l ' ; } < f o r m n g - c o n t r o l l e r = " M y C o n t r o l l e r " > < i n p u t t y p e = " t e x t " n g - m o d e l = " n a m e " > < / f o r m >
7. CONTROLLERS The controller is a function that augment the $scope object. It's used to add a value or to add a behavior to the $scope. f u n c t i o n T o d o C t r l ( $ s c o p e ) { $ s c o p e . t o d o s = [ { t e x t : ' L e a r n A n g u l a r J S ' , d o n e : t r u e } , { t e x t : ' C r e a t e a n A p p ' , d o n e : f a l s e } ] ; $ s c o p e . a d d T o d o = f u n c t i o n ( ) { $ s c o p e . t o d o s . p u s h ( { t e x t : $ s c o p e . t o d o T e x t , d o n e : f a l s e } ) ; $ s c o p e . t o d o T e x t = ' ' ; } ; } ;
8. TEMPLATES The templates are simply HTML5. All the presentation logic of the app must be in there. < d i v n g - c o n t r o l l e r = " T o d o C t r l " > < u l > < l i n g - r e p e a t = " t o d o i n 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 > { { 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 = " 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 T e x t " > < b u t t o n t y p e = " s u b m i t " > A d d < / b u t t o n > < / f o r m > < / d i v >
9. RESULT Learn AngularJS Create an App add new task Add [ { "text": "Learn AngularJS", "done": true }, { "text": "Create an App", "done": false } ]
10. TWO-WAY DATA BINDING Two-way data binding is the automatic synchronization of data between the model and view.
11. $SCOPE INHERITANCE When a new $scope is created, it's added as a children of their parent $scope. MyControllers.js f u n c t i o n P a r e n t C o n t r o l l e r ( $ s c o p e ) { $ s c o p e . p e r s o n = { n a m e : ' V i t o r L e a l ' , h e l l o T e x t : ' ' } ; } ; f u n c t i o n C h i l d C o n t r o l l e r ( $ s c o p e ) { $ s c o p e . s a y H e l l o = f u n c t i o n ( ) { $ s c o p e . p e r s o n . h e l l o T e x t = " H i " + $ s c o p e . p e r s o n . n a m e ; } } ;
12. $SCOPE INHERITANCE 2 MyView.html < d i v n g - c o n t r o l l e r = " P a r e n t C o n t r o l l e r " > < f o r m n g - c o n t r o l l e r = " C h i l d C o n t r o l l e r " > < i n p u t t y p e = " t e x t " n g - m o d e l = " p e r s o n . n a m e " p l a c e h o l d e r = " N a m e " > < b u t t o n n g - c l i c k = " s a y H e l l o ( ) " > S a y h e l l o < / b u t t o n > < / f o r m > < p > { { p e r s o n . h e l l o T e x t } } < / p > < / d i v > Vitor Leal Say hello person.helloText =
13. SERVICES Injctable objects that carry out specific tasks. Provide a way to separate concerns and re-use code. $http (ajax) $locale $timeout $filter
14. $HTTP The $http service makes easier to integration with external APIs. Main methods: .get, .post, .put, .delete, .jsonp $ h t t p . g e t ( ' h t t p : / / a d d r e s s - o f . t h e / a p i ' ) . s u c c e s s ( s u c c e s s C a l l b a c k ) . e r r o r ( e r r o r C a l l b a c k ) ; $ h t t p . p o s t ( ' h t t p : / / a d d r e s s - o f . t h e / a p i ' , d a t a ) . s u c c e s s ( s u c c e s s C a l l b a c k ) . e r r o r ( e r r o r C a l l b a c k ) ;
15. $HTTP - EXAMPLE f u n c t i o n B e e r C o n t r o l l e r ( $ s c o p e , $ h t t p ) { $ s c o p e . m a k e R e q u e s t = f u n c t i o n ( ) { $ h t t p . j s o n p ( ' h t t p : / / a p i . o p e n b e e r d a t a b a s e . c o m / v 1 / b e e r s . j s o n ' ) . s u c c e s s ( f u n c t i o n ( d a t a , s t a t u s ) { $ s c o p e . b e e r s = d a t a . b e e r s ; } ) . e r r o r ( f u n c t i o n ( ) { $ s c o p e . b e e r s = [ { n a m e : " N o b e e r f o r y o u : ( " } ] } ) ; } ; } ; < d i v n g - c o n t r o l l e r = " B e e r C o n t r o l l e r " > < u l > < l i n g - r e p e a t = " b e e r i n b e e r s | l i m i t T o : 1 5 " > { { b e e r . n a m e } } - { { b e e r . b r e w e r y . n a m e } } < / l i > < / u l > < b u t t o n n g - c l i c k = " m a k e R e q u e s t ( ) " > G e t b e e r s < / b u t t o n > < / d i v >
16. MODULES Angular modules declaratively specify how an application should be bootstrapped. v a r a p p = a n g u l a r . m o d u l e ( ' m y A p p ' , [ ' t h i r d - p a r t - m o d u l e ' ] ) ; a p p . c o n f i g ( f u n c t i o n ( ) { . . . } ) ; < ! - - C o n f i g u r a t i o n - - > a p p . c o n t r o l l e r ( ' m y C o n t r o l l e r ' , . . . ) ; < ! - - C r e a t e a c o n t r o l l e r - - > a p p . s e r v i c e ( ' m y S e r v i c e ' , . . . ) ; < ! - - C r e a t e a s e r v i c e - - > < h t m l n g - a p p = " m y A p p " > . . . < / h t m l >
17. ROUTING In a more complex app you can use the $routeProvider service, to define which controller and template will be loaded in each path. v a r a p p = a n g u l a r . m o d u l e ( ' m y A p p ' ) ; 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 ( ' / ' , { c o n t r o l l e r : ' m a i n C o n t r o l l e r ' , t e m p l a t e U r l : ' / v i e w s / i n d e x . h t m l ' } ) . w h e n ( ' / n e w P o s t / ' , { c o n t r o l l e r : ' n e w P o s t C o n t r o l l e r ' , t e m p l a t e U r l : ' / v i e w s / n e w P o s t . h t m l ' } ) . w h e n ( ' / p o s t s / : i d ' , { c o n t r o l l e r : ' p o s t s C o n t r o l l e r ' , t e m p l a t e U r l : ' / v i e w s / p o s t s . h t m l ' } ) . o t h e r w i s e ( { r e d i r e c t T o : ' / ' } ) ; } ) ;
18. DIRECTIVES "Teach new tricks to the HTML" 1. Create custom attributes 2. Create custom HTML tags (based on W3C webcomponents specification)
19. DIRECTIVES 2 All the attributes that begin with "ng" are AngularJS directives. ng-app ng-controller ng-model ng-repeat ng-click ng-view ...
20. DIRECTIVES 3 How to use directives < ! d o c t y p e h t m l > < h t m l n g - a p p = " m y A p p " > < h e a d > < s c r i p t s r c = " . . / j s / a n g u l a r . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < u l n g - c o n t r o l l e r = " m y L i s t C o n t r o l l e r " > < l i n g - r e p e a t = " i t e m i n i t e m s " > { { i t e m . n a m e } } < / l i > < / u l > < / b o d y > < / h t m l >
21. DIRECTIVES 4 You can also create you own directive. element: <my-directive></my-directive> atribute: <span my-directive="value"></span> class: <span class="my-directive: value;"></span> comment: <!-- directive: my-directive value -->
22. DIRECTIVES 5 v a r a p p = a n g u l a r . m o d u l e ( ' m y A p p ' ) ; a p p . d i r e c t i v e ( ' m y D i r e c t i v e ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E A ' , l i n k : f u n c t i o n ( $ s c o p e , e l e m e n t ) { e l e m e n t . t e x t ( ' T e x t f r o m d i r e c t i v e ' ) ; } } ; } ) ; < m y - d i r e c t i v e > < / m y - d i r e c t i v e > < ! - - D i r e c t i v e a s e l e m e n t - - > < d i v m y - d i r e c t i v e > < / d i v > < ! - - D i r e c t i v e a s a t t r i b u t e - - >
23. DIRECTIVES 6 v a r a p p = a n g u l a r . m o d u l e ( ' m y A p p ' ) ; a p p . d i r e c t i v e ( ' m y D i r e c t i v e ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E ' , r e p l a c e : t r u e , t e m p l a t e : ' < h 1 c l a s s = " t i t l e " > < / h 1 > ' l i n k : f u n c t i o n ( $ s c o p e , e l e m e n t ) { e l e m e n t . t e x t ( ' T e x t f r o m d i r e c t i v e ' ) ; } } ; } ) ; < m y - d i r e c t i v e > < / m y - d i r e c t i v e > < ! - - C u s t o m t a g - - > < h 1 c l a s s = " t i t l e " > T e x t f r o m d i r e c t i v e < / h 1 > < ! - - R e p l a c e d b y t h e t e m p l a t e - - >
24. TESTING YOUR APP A framework to be easily tested TOOLS: Karma Test runner Jasmine Test framework
25. TESTING A CONTROLLER d e s c r i b e ( ' T e s t i n g C o n t r o l l e r ' , f u n c t i o n ( ) { v a r c t r l , s c o p e ; b e f o r e E a c h ( a n g u l a r . m o c k . m o d u l e ( ' m y A p p ' ) ) ; b e f o r e E a c h ( i n j e c t ( f u n c t i o n ( $ c o n t r o l l e r , $ r o o t S c o p e ) { s c o p e = $ r o o t S c o p e . $ n e w ( ) ; c t r l = $ c o n t r o l l e r ( ' m y C o n t r o l l e r ' , { $ s c o p e : s c o p e } ) ; } ) ) ; i t ( ' s h o u l d e x i s t a c o n t r o l l e r c a l l e d m y C o n t r o l l e r ' , f u n c t i o n ( ) { e x p e c t ( s c o p e ) . n o t . t o B e U n d e f i n e d ( ) ; } ) ; } ) ;
26. END-TO-END TESTS d e s c r i b e ( ' G r o c e r y l i s t ' , f u n c t i o n ( ) { b e f o r e E a c h ( f u n c t i o n ( ) { b r o w s e r ( ) . n a v i g a t e T o ( ' / ' ) ; } ) ; i t ( ' f i l t e r s t h e g r o c e r y l i s t b a s e d o n t h e s e a r c h q u e r y ' , f u n c t i o n ( ) { e x p e c t ( r e p e a t e r ( ' . g r o c e r i e s l i ' ) . c o u n t ( ) ) . t o B e ( 5 ) ; i n p u t ( ' q u e r y ' ) . e n t e r ( ' b ' ) ; e x p e c t ( r e p e a t e r ( ' . g r o c e r i e s l i ' ) . c o u n t ( ) ) . t o B e ( 3 ) ; i n p u t ( ' q u e r y ' ) . e n t e r ( ' b l u e b e r r y ' ) ; e x p e c t ( r e p e a t e r ( ' . g r o c e r i e s l i ' ) . c o u n t ( ) ) . t o B e ( 1 ) ; } ) ; } ) ;
27. REFERENCES Angular - Karma - Jasmine - HandsOn - http://angularjs.org/ http://karma-runner.github.io/ http://pivotal.github.io/jasmine/ https://github.com/vitorleal/angular-start.git
28. THE END - Telefonica Brazil Vitor Leal