Download - 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é [email protected]://andrebaltieri.net/http://youtube.balta.io/http://balta.io/
DÚVIDAS?
OBRIGADO