Slide 1

Slide 1 text

WEBAPPS WITH ANGULARJS AN OVERVIEW OF THE FRAMEWORK - Telefonica Brazil Vitor Leal

Slide 2

Slide 2 text

WHAT IS ANGULARJS It's a structural framework for dynamic web apps that's easy to maintain, in a fast and testable way.

Slide 3

Slide 3 text

THE PRINCIPLES Rapid development Modularity Built to be testable Write less code

Slide 4

Slide 4 text

WHAT IT OFFERS US Controllers Templates Two-Way data bindings Services Directives Dependency Injection

Slide 5

Slide 5 text

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 >

Slide 6

Slide 6 text

$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 >

Slide 7

Slide 7 text

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 = ' ' ; } ; } ;

Slide 8

Slide 8 text

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 >

Slide 9

Slide 9 text

RESULT Learn AngularJS Create an App add new task Add [ { "text": "Learn AngularJS", "done": true }, { "text": "Create an App", "done": false } ]

Slide 10

Slide 10 text

TWO-WAY DATA BINDING Two-way data binding is the automatic synchronization of data between the model and view.

Slide 11

Slide 11 text

$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 ; } } ;

Slide 12

Slide 12 text

$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 =

Slide 13

Slide 13 text

SERVICES Injctable objects that carry out specific tasks. Provide a way to separate concerns and re-use code. $http (ajax) $locale $timeout $filter

Slide 14

Slide 14 text

$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 ) ;

Slide 15

Slide 15 text

$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 >

Slide 16

Slide 16 text

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 >

Slide 17

Slide 17 text

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 : ' / ' } ) ; } ) ;

Slide 18

Slide 18 text

DIRECTIVES "Teach new tricks to the HTML" 1. Create custom attributes 2. Create custom HTML tags (based on W3C webcomponents specification)

Slide 19

Slide 19 text

DIRECTIVES 2 All the attributes that begin with "ng" are AngularJS directives. ng-app ng-controller ng-model ng-repeat ng-click ng-view ...

Slide 20

Slide 20 text

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 >

Slide 21

Slide 21 text

DIRECTIVES 4 You can also create you own directive. element: atribute: class: comment:

Slide 22

Slide 22 text

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 - - >

Slide 23

Slide 23 text

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 - - >

Slide 24

Slide 24 text

TESTING YOUR APP A framework to be easily tested TOOLS: Karma Test runner Jasmine Test framework

Slide 25

Slide 25 text

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 ( ) ; } ) ; } ) ;

Slide 26

Slide 26 text

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 ) ; } ) ; } ) ;

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

THE END - Telefonica Brazil Vitor Leal