Angular 2: o fim do two-way data binding?
4 minutos de leitura
Autor(a)
flavio.almeida
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
4 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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 .
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.
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.
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.
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.
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.
Avalie este artigo
