Baixar para ler offline
![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](https://image.slidesharecdn.com/gdg-161113002037/85/Migrando-para-o-Angular-2-7-320.jpg)
Carregado porAndre Baltieri
Migrando para o Angular 2
O documento resume as principais mudanças entre Angular 1 e Angular 2, incluindo a adoção de componentes, um mindset focado em componentes, a introdução de observáveis para lidar com assíncrono e a simplificação de diretivas, formulários e animações.
Mais conteúdo relacionado
Migrando para o Angular 2
- 2. André Baltieri Microsoft MVPdesde 2013 Web Developer desde 2005 Trabalhos no BRA, EUA, ENG, HOL http://balta.io/
- 3. Agenda Por que mudou? Resumão Mudançasno Mindset Bindings HTTP, Services e Observables Formulários Diretivas Pipes Animations Mobile/PWA Migrando para o Angular 2
- 4. Por que mudou? Angular1 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 É UMALIB (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 eControllers 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 WayData 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.
- 9. HTTP, Services eObservables Angular 1 HTTP Services Factories Promises Angular 2 HTTP Services **Observables/Promises
- 10. HTTP, Services eObservables
- 11. HTTP, Services eObservables
- 12. HTTP, Services eObservables
- 13. HTTP, Services eObservables
- 14. Promises Imagine um atendimentoqualquer 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 deeventos 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.
- 17.
- 18.
- 19. Formulários Angular 1 Ng-form Ng-messages Fonte: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 Angular2 FormBuilder FormGroup Validators
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Diretivas Angular 1 Inicialmente usadaspara 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.
- 29.
- 30.
- 31.
- 32.
- 33. Structure Directives O asterisco(*) é apenas um Syntax Sugar, que simplifica a leitura e escrita do template que vai sobrepor a diretiva.
- 34.
- 35. Pipes Angular 1 Parcialmente equivalenteaos Filters Angular 2 Utilizados para modificar alguma informação nas Views
- 36.
- 37.
- 38. Pipes IMPORTAR O ExponentialStrenght NASDECLARAÇÕES DO @NgModule
- 39.
- 40.
- 41.
- 42. Mobile e PWA Nãoé apenas um framework Web Angular CLI Suporte Mobile PWA Abstração do DOM Native Script
- 43.
- 44.
Notas do Editor
- #4 Forms: https://toddmotto.com/angular-2-forms-reactive