Palestra apresentada durante o evento GDG DevFest SP da Google em São Paulo, no dia 12/11/2016

2. André Baltieri
Microsoft MVP desde 2013
Web Developer desde 2005
Trabalhos no BRA, EUA, ENG, HOL
http://balta.io/

3. Agenda
Por que mudou?
Resumão
Mudanças no Mindset
Bindings
HTTP, Services e Observables
Formulários
Diretivas
Pipes
Animations
Mobile/PWA
Migrando para o
Angular 2

4. Por que mudou?
Angular 1 surgiu em 2009
Introduziu o MVC ao mundo Frontend
Resolveu vários problemas
Não existia reatividade
Nem conceitos de Web Components
Os Watchers… ahhh os watchers
React mudou muita coisa
Componentização
Performance

5. Resumão
REACT É UMA LIB (Que pode ser usado no
Angular 2)
Framework completo
HTTP
Services
Pipes
Forms
Directives
Components
Testes
A migração não é assim tão dolorosa vai!

6. Mindset
Models, Views e Controllers já eram!
Tudo é um Component
Component faz uso de
Services
Directives
Pipes
São testáveis
Menores e mais fáceis de lidar
Manutenabilidade
Facilidade de reescrita

7. Bindings
Angular 1
Two Way Data Binding por padrão
One Way controlado pelo ::
{{::name}}
Angular 2
[ ] = Bind do JS para a tela
( ) = Bind da tela para o JS
[( )] = Two Way Data Binding

8. Bindings

9. HTTP, Services e Observables
Angular 1
HTTP
Services
Factories
Promises
Angular 2
HTTP
Services
**Observables/Promises

10. HTTP, Services e Observables

11. HTTP, Services e Observables

12. HTTP, Services e Observables

13. HTTP, Services e Observables

14. Promises
Imagine um atendimento qualquer onde
você não é atendido assim que chega, mas
sim, recebe uma senha, para ser chamado
futuramente.
É o meio utilizado pelo Angular 1 como
padrão.
Você decide quais ações tomar quando:
• A requisição for realizada com sucesso
• Retornando um payload
• A requisição falha
• Retornando um erro

15. Observables
São fluxos de eventos publicados por
alguma fonte
Você se inscreve (subscribe) para observá-
los
É o modelo mais recomendado
Você decide quais ações tomar quando:
• A requisição for realizada com sucesso
• Retornando um payload
• A requisição falha
• Retornando um erro
Armazena resultado
Podemos usar Retry

16. Observables

17. Observables

18. Observables

19. Formulários
Angular 1
Ng-form
Ng-messages
Fonte: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
Angular 2
FormBuilder
FormGroup
Validators

20. Formulários
Angular 1

21. Formulários
Angular 1

22. Formulários

23. Formulários

24. Formulários

25. Formulários

26. Formulários

27. Diretivas
Angular 1
Inicialmente usadas para componentizar
Controladas por um Controller*
Built-in Directives
Angular 2
Restrita a atributos e estruturas
Componentes são Components!
Attribute Directives mudam a aparência ou
comportamente de um elemento.
Structural Directives mudam o layout do
DOM, adicionando ou removendo outros
elementos.

28. Attribute Directives

29. Attribute Directives

30. Attribute Directives

31. Structure Directives

32. Structure Directives

33. Structure Directives
O asterisco (*) é apenas um
Syntax Sugar, que simplifica a
leitura e escrita do template que
vai sobrepor a diretiva.

34. Structure Directives

35. Pipes
Angular 1
Parcialmente equivalente aos Filters
Angular 2
Utilizados para modificar alguma
informação nas Views

36. Pipes

37. Pipes

38. Pipes
IMPORTAR O ExponentialStrenght
NAS DECLARAÇÕES DO @NgModule

39. Animations

40. Animations

41. Animations

42. Mobile e PWA
Não é apenas um framework Web
Angular CLI
Suporte Mobile
PWA
Abstração do DOM
Native Script

43. André Baltieri
contato@andrebaltieri.net
http://andrebaltieri.net/
http://youtube.balta.io/
http://balta.io/
DÚVIDAS?

44. OBRIGADO