migrando para o angular 2

André BaltieriMicrosoft MVP desde 2013Web Developer desde 2005Trabalhos no BRA, EUA, ENG, HOL

http://balta.io/

AgendaPor que mudou?ResumãoMudanças no MindsetBindingsHTTP, Services e ObservablesFormuláriosDiretivasPipesAnimationsMobile/PWA

Migrando para oAngular 2

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

ResumãoREACT É UMA LIB (Que pode ser usado no Angular 2)Framework completoHTTPServicesPipesFormsDirectivesComponentsTestesA migração não é assim tão dolorosa vai!

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

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

Bindings

HTTP, Services e ObservablesAngular 1HTTPServicesFactoriesPromises

Angular 2HTTPServices**Observables/Promises

HTTP, Services e Observables

HTTP, Services e Observables

HTTP, Services e Observables

HTTP, Services e Observables

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

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

Observables

Observables

Observables

FormuláriosAngular 1Ng-formNg-messages

Fonte: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Angular 2FormBuilderFormGroupValidators

FormuláriosAngular 1

FormuláriosAngular 1

Formulários

Formulários

Formulários

Formulários

Formulários

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.

Attribute Directives

Attribute Directives

Attribute Directives

Structure Directives

Structure Directives

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

Structure Directives

PipesAngular 1Parcialmente equivalente aos Filters

Angular 2Utilizados para modificar alguma informação nas Views

Pipes

Pipes

Pipes

IMPORTAR O ExponentialStrenght NAS DECLARAÇÕES DO @NgModule

Animations

Animations

Animations

Mobile e PWANão é apenas um framework WebAngular CLISuporte MobilePWAAbstração do DOM

Native Script

André Baltiericontato@andrebaltieri.nethttp://andrebaltieri.net/http://youtube.balta.io/http://balta.io/

DÚVIDAS?

OBRIGADO