WebApps com AngularJS

Overview de desenvolvimento de WebApps com AngularJS

Transcript

1. CRIANDO WEBAPPS OVERVIEW DE DESENVOLVIMENTO COM ANGULARJS - Telefonica Digital Vitor Leal
2. O QUE É O ANGULARJS Um framework para criar aplicações web dinâmicas, de maneira rápida, testável e de fácil manutenção.
3. PRINCÍPIOS DO ANGULARJS Desenvolvimento rápido Escrever menos código Modularidade Pensado para ser testado
4. O QUE O ANGULARJS OFERECE Controllers Templates Two-Way data bindings Services Directives Integração com REST Injeção de dependências
5. UM EXEMPLO BEM SIMPLES < ! 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 > S e u n o 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 = " S e u n o m e ? " > < / f o r m > < h 3 > M e u n o m e é { { n a m e } } ! < / h 3 > < / b o d y > < / h t m l >
6. MODEL O modelo da aplicação é representado pelo objeto $scope, que liga a View e o 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 São funções usadas para "aumentar" a instância do $scope. Adicionando um valor ou um comportamento a um objeto. 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 : ' A p r e n d e r A n g u l a r J S ' , d o n e : t r u e } , { t e x t : ' C r i a r u m n o v o 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. VIEWS As views no angular são simplesmente HTML5. É onde toda a presentation logic deve estar. < 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. RESULTADO Aprender AngularJS Criar um novo App add new task Add [ { "text": "Aprender AngularJS", "done": true }, { "text": "Criar um novo App", "done": false } ]
10. TWO-WAY DATA BINDING Data binding no angular funciona de maneira bi-direcional, qualquer alteração na View se reflete no Model e vice-versa.
11. HERANÇA DE $SCOPE O $scope de um controller é herdado em um controller filho. 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. HERANÇA DE $SCOPE 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 >
13. SERVICES São objetos que executam tarefas específicas e que são controlados pela injeção de depêndencias. $http (ajax) $locale $timeout $filter
14. $HTTP O service $http facilita a comunicação com APIs. Principais métodos: .get, .post, .put, .delete, .jsonp $ h t t p . g e t ( ' h t t p : / / e n d e r e c o . d a / 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 : / / e n d e r e c o . d a / 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 - EXEMPLO 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 No angular voce utiliza o "module" para especificar como um aplicativo deve ser inicializado. 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 ç õ e s - - > 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 i a n d o u m 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 i a n d o u m 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. ROUTES Em apps mais complexos utilize o $routeProvider do angular, para definir qual controller e template deve ser utilizdo para cada 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 "Ensine novos truques ao HTML" 1. Crie atributos customizados para tags HTML 2. Crie tags HTML customizadas (baseado na especificação webcomponents da W3C)
19. DIRECTIVES 2 Todos os atributos que iniciam com "ng" são directives criadas pelo Angular. ng-app ng-controller ng-model ng-repeat ng-click ng-view entre muitas outras
20. DIRECTIVES 3 Exemplo de directives sendo utilizadas < ! 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 Você pode criar sua própria directive. elemento: <my-directive></my-directive> atributo: <span my-directive="value"></span> class: <span class="my-directive: value;"></span> comentário: <!-- 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 c o m o u m e l e m e n t o - - > < 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 c o m o u m a t r i b u t o - - >
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 > < ! - - N o s s a t a g c u s t o m i z a d a - - > < 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 > < ! - - S e c o n v e r t e n o t e m p l a t e - - >
24. TESTANDO SEU APP Um framework criado com o intuito de ser facilmente testado FERRAMENTAS RECOMENDADAS: Karma Test runner Jasmine Test framework
25. TESTANDO CONTROLLERS 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. REFERÊNCIAS Angular - Karma - Jasmine - HandsOn - http://angularjs.org/ http://karma-runner.github.io/ http://pivotal.github.io/jasmine/ https://github.com/vitorleal/angular-start.git
27. FIM - Telefonica Digital Vitor Leal