Angular 2: o fim do two-way data binding?

Em 2009 a Google tornou open source seu framework MVC client-side batizado Angular. Sem dúvidas, uma de suas características que o tornou tão popular foi a associação de dados bidirecional descomplicada, o famoso two-way data binding.

Two-way data binding

No two-way data binding, alterações na view são refletidas na fonte de dados e atualizações na fonte refletem na view sem a necessidade de manipulação explícita do DOM. Vejamos um exemplo:

// controller 
angular
	.module('app')
	.controller('PalestranteController', function($scope) {
	
		$scope.palestrante = {nome: 'Flávio', email: 'N/A'};

		$scope.grava = function() {
			// envia os dados do palestrante para uma API
			$scope.palestrante = {}; // limpa o formulário
		}
	});
<!-- template -->
<form ng-submit="grava()">
	<input ng-model="palestrante.nome" placeholder="Nome">
	<input ng-model="palestrante.email" placeholder="E-mail">
	<button type="submit">Gravar</button>
</form>

No exemplo anterior, realizamos o two-way data binding através da diretiva ng-model. A cada interação com os elementos input, os dados de entrada são enviados da view para a fonte de dados $scope.palestrante.

Quando clicamos no botão “Gravar”, os dados são enviados para uma API e logo em seguida atribuímos um objeto {} na propriedade $scope.palestrante para limparmos o formulário. Nesse momento, os dados fluirão da fonte de dados para a view.

Há outros recursos não menos importantes como injeção de dependências e um sistema de módulos próprios, mas talvez o two-way data binding seja o que mais se destacou.

Onde está o two-way data binding no Angular 2?

Em outubro de 2014 foi anunciado o desenvolvimento da versão 2.0 do framework da Google. A nova versão gerou muita polêmica por ser muito diferente da anterior, inclusive por não oferecer mais o two-way data binding, pelo menos não como o conhecemos no Angular 1.X.

Vejamos o exemplo anterior, agora em Angular 2:

// o componente 

import {Component} from 'angular2/core';

@Component({
	selector: 'cadastro',
	templateUrl: 'cadastro.html'
})
export class Cadastro {

	private palestrante: Object = {nome: 'Flávio', email: 'N/A'};

	public grava():void {
		// envia os dados do palestrante para uma API
		this.palestrante = {}; // limpa o formulário
	}	
}
<!-- template do componente  -->
<form ng-submit="grava()">
	<input [value]="palestrante.nome" placeholder="Nome">
	<input [value]="palestrante.email" placeholder="E-mail">
	<button type="submit">Gravar</button>
</form>

Veja que o atributo value está entre colchetes, a nova sintaxe de associação de dados unidirecional que flui da fonte de dados para a view. Quando o componente é renderizado, ele exibe “Flávio” e “N/A” em seus respectivos input’s. Contudo qualquer interação do usuário com os campos não se propagará para a fonte de dados. E agora?

Angular 2 possui uma associação, também unidirecional, mas que flui da view para a fonte de dados que é a associação de eventos, ou event binding no inglês.

Implementando two-way data binding no Angular 2

Podemos conseguir algo semelhante ao two-way data binding combinando os dois tipos de associação:

<!-- template -->
<form ng-submit="grava()">
	<input 
		(input)="palestrante.nome = $event.target.value" 
		[value]="palestrante.nome" 
		placeholder="Nome">

	<input 
		(input)="palestrante.email = $event.target.value" 
		[value]="palestrante.email" 
		placeholder="E-mail">

	<button type="submit">Gravar</button>
</form>

Quando o evento input é disparado, $event.target representa quem disparou o evento. Sendo um elemento do DOM, podemos acessar seu valor com $event.target.value. É este valor que é atualizado na propriedade palestrante do nosso componente.

NgModel está de volta, mas não como você o conhecia!

Contudo, a equipe do Angular 2 criou uma diretiva que funciona como uma espécie de atalho para esses dois tipos de associação, a ngModel:

<!-- template -->
<form ng-submit="grava()">
	<input 
		[(ngModel)]="palestrante.nome"
		placeholder="Nome">

	<input 
		[(ngModel)]="palestrante.email"
		placeholder="E-mail">

	<button type="submit">Gravar</button>
</form>

Veja que a diretiva está envolvida por [()], ou seja, temos os dois tipos de associações unidirecionais ao mesmo tempo, mas com direções opostas no fluxo de atualização.

Conclusão

Apesar de uma sintaxe e uma implementação um tanto diferente (data binding + event binding), é possível conseguir uma resultado semelhante ao two-way data binding em Angular 2.

A Caelum e o Alura possuem treinamentos de Angular que você pode conferir aqui e aqui! Inclusive a Casa do Código possui um livro de MEAN que aborda também o assunto e no caso, com Angular 1.

36 Comentários

  1. sombriks 01/04/2016 at 00:24 #

    Oferecer o 2-way binding salva o futuro do Angular 2, evitando um novo episódio Struts 1.x -> 2.x

    Nesse Vídeo ele apelida o ‘[(‘ de “banana brackets”, 😉 https://youtu.be/Xi6EQ5l84Bw?t=19m15s

  2. Almir Junior 01/04/2016 at 09:02 #

    Opa Flávio, tudo bem? Eu não conheço muito bem a tecnologia, mas me surgiu uma questão! Se o Two-Way Data Binding é tão bom quanto realmente parece, porque o Google “negligenciou” ele na nova versão? Será que tem algum débito técnico? Além dessa forma que você apresentou, teria uma forma a qual o Google achou que seria melhor que o Two-Way Data Binding?

  3. Angular 01/04/2016 at 09:04 #

    Credo esse Angular 2.0 ein

  4. Dagnaldo Silva 01/04/2016 at 09:50 #

    Ainda não conheço o Angular2, mas to meio receoso quanto à quantidade de voltas que teremos que dar pra resolver algo como no 1.x, assim como a sintaxe, logo, em minha humilde opinião, tô achando mais interessante o uso do ReactJS ao Angular2.

    Essa sintaxe de atributos pro html ficou bastante poluída em relação às versões 1.x para este formulário, pelo menos em minha opinião. Tem ideia se a versão 1.x será descontinuada, se sim, quando?

    À propósito, post interessante e inteligente, obrigado!

  5. Flávio Almeida 01/04/2016 at 10:47 #

    Oi Almir! Não há two-way data binding em Angular 2 por dois motivos: a previsibilidade de mudanças e performance. O que o Angular 2 faz é combinar o data binding unidirecional com eventos para conseguir algo semelhante (sob o ponto de vista de quem vê o resultado) ao two-way data binding (quando trabalharmos com formulários). Foi por isso que eles criaram o atalho para um binding de data e de eventos com `ngModel`. Veja que ainda assim, precisamos usar a sintaxe [()] para indicar que haverá um fluxo unidirecional dos dados para a view e ainda o disparo de um evento.

    Oi Dagnaldo! O React não possui two-way data binding assim como Angular 2.x, ambos usam um fluxo unidirecional, apesar do Angular 2.X, “emular” o two-way data binding com a diretiva `ngModel`, o que é bom para quem estava acostumado com a sintaxe do `ng-model` do Angular 1.X.

    O React é uma boa alternativa, contudo ele foca apenas na criação de componentes, por isso pode ser chamado de uma biblioteca para criar componentes. Já o Angular é um framework e vai lhe fornecer injeção de dependência, router e outros serviços. Contudo, Angular 2.X pode deixá-lo enrijecido e talvez você goste de ter mais liberdade criando e combinado várias partes do seu arsenal para criar SPA’s.

  6. Raphael 02/04/2016 at 22:56 #

    Esse limpa formulário me lembrou muuuuiitto JSF

  7. Renato Lemos 02/04/2016 at 23:21 #

    Poderia jurar que angular era da Apple e depois do Google, mas agora fique em dúvida!

  8. Flávio Almeida 03/04/2016 at 12:09 #

    Opa! Angular nunca foi da Apple 🙂
    Abraço!

  9. Robson 05/04/2016 at 18:21 #

    Eu ainda não me acostumei com esse Angular 2, e nem sei porque eles continuaram com o nome, já que o treco é muito diferente da versão 1.
    Pode ser falta de costume, mas eu achei ele muito complicado de entender e de fazer coisas que eram super simples no Angular 1

  10. André 05/04/2016 at 19:48 #

    Oi Flávio, sou assinante do alura.

    Os cursos são excelentes lá, existe alguma previsão para o curso de angular 2?

  11. Reinaldo 05/04/2016 at 21:53 #

    Opa! O nome mudou sim, de angularjs para angular. 🙂

  12. MaxMax 06/04/2016 at 08:34 #

    Concordo com o Robson, as coisas que eram simples e rápidas de desenvolver agora parecem tão complicadas.

  13. Flávio Almeida 06/04/2016 at 12:16 #

    Olá André,

    Está nos planos do Alura o curso de Angular 2 sim, fique tranquilo. Não temos uma data de previsão, pois só lançaremos o treinamento depois que a versão final do Angular 2 for lançada. Fique antenado conosco!

  14. leandro 08/04/2016 at 16:08 #

    Mataram o framework !!!!!!!!!!!!!!!!!!!!!!!!!

  15. Ythalo Rossy Saldanha Lira 09/04/2016 at 09:06 #

    Acredito que as mudanças e complicações não estão relacionadas diretamente com o framework Angular, mas com os novos paradigmas e sintaxes do próprio Javascript. Essa nova sintaxes já é tema de discussão em diversos fóruns mundo à fora.

  16. Lucas de Souza 10/04/2016 at 00:11 #

    Que criasse um framework novo, então… Pois, mudou basicamente tudo. O AngularJS é tão famoso por ter essa vantagem do 2-way e tirar isso acho complicado… Sem falar da sintaxe, que mudou muito!

  17. Plínio Balduino 11/04/2016 at 15:34 #

    @Renato Lemos: o desenvolvimento Angular foi encabeçado pelo Misko Hevery, que é/era o responsável por práticas ágeis, qualidades e testes no Google.

    Recomendo ler o antigo blog dele em http://misko.hevery.com/about/

    Abraço

  18. Clairton 11/04/2016 at 16:41 #

    O Emberjs ainda continua com o two-way data binding na versão dois.
    Tenho formulário com varias abas, e cada aba com vários campos, e sem problema de performance.
    Mas cada framework com seus prós e contras.

  19. Rafael Gil 11/04/2016 at 17:29 #

    Eu não consigo gostar desse Angular 2. Já decidi que daqui pra frente é só React.
    Achei muito confuso, complicado, praticamente obriga a usar TypeScript…
    Já que vou ter que “jogar fora” quase tudo que aprendi sobre o Angular 1, já parto logo pra proposta do React, que me pareceu mais interessante.

  20. Pedro Silva 05/05/2016 at 06:19 #

    Damn.. Esse angular 2 é demasiado confuso -.-‘
    Para quem está com ideias de desistir do angular, aconselho a darem uma espreitadela no AureliaJS (http://aurelia.io). É muito mais simples e limpo!
    Já agora, o criador (Rob Eisenberg) fazia parte da equipa de desenvolvimento do angular pois não estava a gostar do caminho que o angular ia tomar.. acho que dá para perceber porquê.. xD

  21. Rhoger 09/05/2016 at 16:49 #

    Achei o Angular 2 muito mais complicado, angularjs 1.x resolvia problemas de forma tão facil e limpa. Pretendo continuar usando a versão “antiga”, por mais que a Google descontinue, é um projeto aberto, e sei que a comunidade dará suporte ainda, é uma ferramenta muito poderosa e simples pra se perder.

  22. Reactjs 16/05/2016 at 16:36 #

    Matou o Angular, vai desencorajar geral.

  23. Eduardo Freitas 21/05/2016 at 21:21 #

    Eu até gostei, realmente 90% das variáveis em scope não necessitavam de two data bind. Na maioria só queríamos refletir o controller na view. Fazendo dessa forma evitamos um monte de watch desnecessários. Se for só isso, acho q melhorou.

  24. Denner 07/06/2016 at 12:01 #

    Acho que Two-Way Data Binding saiu mesmo por performance…. mas podemos criar um component pra isso…..

  25. Igor Couto 07/08/2016 at 19:32 #

    Imutabilidade vence. Não faz sentido acoplamento de dados entre componentes.
    Redux 😉

  26. Flavio 16/09/2016 at 11:21 #

    E a sintaxe [()] ?

  27. Diego 24/09/2016 at 20:45 #

    Concordo com vc Igor…

  28. Ricardo 09/10/2016 at 20:02 #

    Temos 2 sistemas grandes em angular 1. Fiquei decepcionado com a v2, apesar de mais performance, não ter a certeza de continuidade da versão anterior e ainda a migração ser bastante traumática é frustante. Como teremos custo adicional no médio prazo estamos com uma inclinação para partir para Elm. É um dos Frameworks mais rápido que testamos, funcional e pega quebra de código antes de executar.
    Se para um simples hello world vc precisa escrever mais de 5 linhas de script já considero que tem algum problema estrutural, mesmo que a justificativa seja que a produtividade vem quando for desenvolver grandes sistemas.

  29. Victor Ivens 21/10/2016 at 21:07 #

    @Rhoger Eu também achei o angular 2 bem mais complicado que o angular 1, pensei principalmente como seria dificil ensinar pros juniors. Mas então eu comecei a brincar e fui fazer um sisteminha que gerava n pontos aleatórios em um canvas e fazia implementações fajutas do caxeiro viajante. Rapaz, na primeira iteração de desenvolvimento eu estava usando arrays com as posições sendo os pontos, distâncias e afins. Quando chegou num ponto que eu já não estava mais compreendendo, eu comecei a usar as funções tipadas e facilitou tanto o desenvolvimento que eu entendi o motivo da complexidade. Eu cheguei a criar uma interface, ficou show de bola. Ficou mais dificil, porém muito mais poderoso.

  30. Jupiracy 05/11/2016 at 03:43 #

    Eu sempre sou a favor de tornar a aplicacao mais rapida e menos acoplada, o que eu nao entendo eh porque melhoram uma coisa e complicam outras. Sinto que nesta versao se escreve muito mais codigo e sinceramente acho que a manutencao ficou pior. Eu sou a favor de ter algo mais facil de implementar.

    Como por exemplo a ideia do Hybernate foi general implementou muita coisa que escreviamos todos os dias nos codigos, facilitou muito. Depois veio outras solucoes na mesma ideia.

  31. Lucas Neves 05/11/2016 at 11:09 #

    Olá, Flávio.

    Você recomenda aprender a primeira versão do Angular ou o Angular 2 direto?

  32. Flávio Almeida 05/11/2016 at 12:29 #

    Oi Lucas! Se for para começar um projeto do zero o Angular 2. Contudo, há muito código escrito em Angular 1.× que pode render um bom trampo durante um bom tempo. Sendo assim, para aumentar seu índice de empregabilidade é importante saber o Angular 1.x.

    Abraço

  33. Jonas 07/11/2016 at 14:21 #

    Estou fortemente tendendo a adotar o aurelia, que me parece ter uma proposta muito boa e inclusive foi criada por um dos membros que fazia parte da equipe do Angular 2 e saiu por discordar dos rumos que o projeto estava tomando.

  34. Flávio Almeida 07/11/2016 at 15:00 #

    Jonas, o Aurélia é o antigo Durandal. Só que no lugar de chamarem de Durandal 2.0, chamaram de Aurélia 🙂

  35. diogo braga 28/11/2016 at 21:20 #

    boa noite, alguma previsão de lançamento de um material da caelum sobre angularjs2? preferencialmente livro.. parabéns pelo site e cursos de alta qualidade!

  36. Marcus Pereira 09/01/2017 at 11:45 #

    [(ngModel)] é um shorten, é um código facilitador para desenvolvedores, para bater o olho e dizer, OLHA, já sei o que significa, a forma que o angular 2 trata por debaixo dos pontos é:

    bindon-NgModel= “”

    Snif,

Deixe uma resposta