migrando para o angular 2
TRANSCRIPT
![Page 1: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/1.jpg)
![Page 2: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/2.jpg)
André BaltieriMicrosoft MVP desde 2013Web Developer desde 2005Trabalhos no BRA, EUA, ENG, HOL
http://balta.io/
![Page 3: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/3.jpg)
AgendaPor que mudou?ResumãoMudanças no MindsetBindingsHTTP, Services e ObservablesFormuláriosDiretivasPipesAnimationsMobile/PWA
Migrando para oAngular 2
![Page 4: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/4.jpg)
Por que mudou?Angular 1 surgiu em 2009Introduziu o MVC ao mundo FrontendResolveu vários problemasNão existia reatividadeNem conceitos de Web ComponentsOs Watchers… ahhh os watchersReact mudou muita coisaComponentizaçãoPerformance
![Page 5: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/5.jpg)
ResumãoREACT É UMA LIB (Que pode ser usado no Angular 2)Framework completoHTTPServicesPipesFormsDirectivesComponentsTestesA migração não é assim tão dolorosa vai!
![Page 6: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/6.jpg)
MindsetModels, Views e Controllers já eram!Tudo é um ComponentComponent faz uso de
ServicesDirectivesPipes
São testáveisMenores e mais fáceis de lidarManutenabilidadeFacilidade de reescrita
![Page 7: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/7.jpg)
BindingsAngular 1Two Way Data Binding por padrãoOne Way controlado pelo ::
{{::name}}
Angular 2[ ] = Bind do JS para a tela( ) = Bind da tela para o JS[( )] = Two Way Data Binding
![Page 8: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/8.jpg)
Bindings
![Page 9: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/9.jpg)
HTTP, Services e ObservablesAngular 1HTTPServicesFactoriesPromises
Angular 2HTTPServices**Observables/Promises
![Page 10: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/10.jpg)
HTTP, Services e Observables
![Page 11: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/11.jpg)
HTTP, Services e Observables
![Page 12: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/12.jpg)
HTTP, Services e Observables
![Page 13: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/13.jpg)
HTTP, Services e Observables
![Page 14: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/14.jpg)
PromisesImagine 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
![Page 15: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/15.jpg)
ObservablesSão fluxos de eventos publicados por alguma fonteVocê se inscreve (subscribe) para observá-losÉ o modelo mais recomendadoVocê decide quais ações tomar quando:• A requisição for realizada com sucesso
• Retornando um payload• A requisição falha
• Retornando um erroArmazena resultadoPodemos usar Retry
![Page 16: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/16.jpg)
Observables
![Page 17: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/17.jpg)
Observables
![Page 18: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/18.jpg)
Observables
![Page 19: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/19.jpg)
FormuláriosAngular 1Ng-formNg-messages
Fonte: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
Angular 2FormBuilderFormGroupValidators
![Page 20: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/20.jpg)
FormuláriosAngular 1
![Page 21: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/21.jpg)
FormuláriosAngular 1
![Page 22: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/22.jpg)
Formulários
![Page 23: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/23.jpg)
Formulários
![Page 24: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/24.jpg)
Formulários
![Page 25: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/25.jpg)
Formulários
![Page 26: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/26.jpg)
Formulários
![Page 27: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/27.jpg)
DiretivasAngular 1Inicialmente usadas para componentizarControladas por um Controller*Built-in Directives
Angular 2Restrita a atributos e estruturasComponentes 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.
![Page 28: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/28.jpg)
Attribute Directives
![Page 29: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/29.jpg)
Attribute Directives
![Page 30: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/30.jpg)
Attribute Directives
![Page 31: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/31.jpg)
Structure Directives
![Page 32: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/32.jpg)
Structure Directives
![Page 33: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/33.jpg)
Structure DirectivesO asterisco (*) é apenas um Syntax Sugar, que simplifica a leitura e escrita do template que vai sobrepor a diretiva.
![Page 34: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/34.jpg)
Structure Directives
![Page 35: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/35.jpg)
PipesAngular 1Parcialmente equivalente aos Filters
Angular 2Utilizados para modificar alguma informação nas Views
![Page 36: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/36.jpg)
Pipes
![Page 37: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/37.jpg)
Pipes
![Page 38: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/38.jpg)
Pipes
IMPORTAR O ExponentialStrenght NAS DECLARAÇÕES DO @NgModule
![Page 39: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/39.jpg)
Animations
![Page 40: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/40.jpg)
Animations
![Page 41: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/41.jpg)
Animations
![Page 42: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/42.jpg)
Mobile e PWANão é apenas um framework WebAngular CLISuporte MobilePWAAbstração do DOM
Native Script
![Page 44: Migrando para o Angular 2](https://reader035.vdocuments.site/reader035/viewer/2022062218/589b4a2e1a28ab4a398b56bd/html5/thumbnails/44.jpg)
OBRIGADO