.NET - Compreendendo o Data Binding no AngularJS

 Neste artigo vamos entender como funciona o data binding no AngularJS.
   

O AngularJS é um framework de aplicações web de código aberto. Ele foi originalmente desenvolvido em 2009 por Misko Hevery e Adam Abrons. Atualmente é mantido pelo Google.

Dentre os muitos recursos oferecidos pelo AngularJS o data binding se destaca pela sua importância para o desenvolvedor.

Numa definição bem simplista temos que o Data-Binding é a sincronização automática de dados entre os modelos e os componentes da view.

O recurso da vinculação de dados ou data binding do AngularJS é o recurso mais útil e facilita a vida do desenvolvedor poupando-o de escrever muito código, e tirando dele a responsabilidade de manipular manualmente os elementos DOM e os atributos para refletir as mudanças do modelo.

O AngularJS fornece de duas vias de vinculação de dados para lidar com a sincronização de dados entre o model e a view.

Assim em aplicativos AngularJS a vinculação de dados é a sincronização automática de dados entre os componentes do model e a view. A maneira que o Angular implementa a vinculação de dados permite tratar o model como a única fonte real na sua aplicação. A view é uma projeção do modelo em todos os momentos. Quando o modelo for alterado, a view reflete a mudança, e vice-versa.

O DataBinding no modelo clássico

A maioria dos sistemas de templates vinculam dados em apenas uma direção: eles fundem o template e os componentes do modelo em uma view. Após a fusão ocorrer, mudanças no modelo ou seções relacionadas da visão NÃO são automaticamente refletidas na view.

Pior ainda, as alterações que o usuário faz na view não são refletidas no modelo. Isso significa que o desenvolvedor tem que escrever código que constantemente sincroniza a view com o model e o model com a view.

O DataBinding no AngularJS

Os templates do AngularJS funcionam de forma diferente. Primeiro o modelo (que é o HTML não compilado juntamente com qualquer marcação ou diretivas adicionais) é compilado no browser. A etapa de compilação produz uma view ao vivo. Quaisquer alterações na view são imediatamente refletidas no modelo, e quaisquer mudanças no modelo são propagadas para a view.

O modelo é o a única fonte real para o estado do aplicativo, simplificando enormemente o modelo de programação para o desenvolvedor. Você pode pensar na view como simplesmente uma projeção instantânea de seu modelo.

Como a view é apenas uma projeção do modelo, o controlador é completamente separado da view e não sabe disso. Isso facilita os testes unitários, porque é fácil testar o seu controlador de forma isolada, sem a view e a dependência com o DOM e o navegador.

(fonte-https://docs.angularjs.org/guide/databinding)

O mecanismo de tratamento da vinculação de dados no AngularJS funciona com a ajuda de 3 recursos poderosos :

  1. $watch - cria um observador para uma variável; Quando você registra um observador você passa duas funções como parâmetros para a função $watch() : uma função e um ouvinte;
  2. $digest - percorre todos os observadores em um objeto $scope e seus objetos filhos;
  3. $Apply - Toma uma função como parâmetro a qual é executada depois que $scope.$digest é chamada internamente;

Quando você cria uma vinculação de dados a partir de uma fonte de dados em sua view para uma variável no objeto $scope, o AngularJS cria um 'observador' internamente.  Um 'observador' significa que o angularJS acompanha as mudanças  na variável no objeto $scope. O Framework esta observando a variável e  observadores são criados usando a função $scope.$watch().

Em pontos chaves do seu aplicativo o AngularJS chama a função $scope.$digest, e , esta função itera através de todos os observadores e verifica se qualquer variável observada sofreu alguma alteração. Se uma variável observada sofre alguma mudança a função ouvinte(listener) correspondente é chamada.

A função ouvinte faz todo o trabalho que precisa ser feito, como por exemplo; alterar um texto HTML, para refletir o novo valor da variável observada.

Dessa forma a função $digest() é quem desencadeia a vinculação de atualizar os dados.

A maior parte do tempo o AngularJs irá chamar as funções $scope.$watch() e $scope.$digest() para você, mas em algumas situações você pode ter que chamar você mesmo essas funções.

A função $scope.$apply é usada para executar um código, e então chamar a função $scope.digest(), assim todos os observadores são verificados e as correspondentes funções ouvintes também são chamadas.

A função $apply é útil quando se integra uma aplicação AngularJS com outro código.

Exemplo de databinding simples:

Digite o código abaixo em um editor de texto ou editor HTML e salve com o nome angjs6.html :

<!DOCTYPE html>
<html>
<title>Angular DataBinding usando Diretivas - ng-int e ng-repeat</title>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head> 
<body ng-app> 
    <div ng-init="jogadores = [{nome:'Rooney', pais:'Inglaterra'}, 
                                         {nome:'Neymar', pais:'Brasil'},
                                         {nome:'Messy', pais:'Argentina'}]">
 
    <p>Nome : <input type="text" ng-model="nome"> {{nome}}</p>
 
    <ul>
        <li ng-repeat="jogador in jogadores">
         [{{$index}}] {{jogador.nome}} : {{jogador.pais}}
        </li>
    </ul>
    </div>
</body>
</html>

Abrindo o arquivo angjs6.html em um navegador iremos obter o seguinte resultado:

Neste exemplo a diretiva ng-init é usada para inicializar um array de objetos chamado jogadores.

A diretiva ng-repeat percorre esta coleção e para cada instância a variável jogador e atribuída com o item atual da coleção e este é exibido usando a expressão de vinculação {{jogador.nome}} e {{jogador.pais}}.

Também esta sendo exibido o índice de cada item usando a propriedade $index que é definida para o item atual.

Ao digitar um valor na caixa de texto o modelo  ng-model="nome"  e a expressão de vinculação {{nome}} permitem exibir o nome digitado.

Esse é o mecanismo do data binding no AngularJS.

Aguarde mais artigos sobre AngularJS em breve.

Porque também nós éramos noutro tempo insensatos, desobedientes, extraviados, servindo a várias concupiscências e deleites, vivendo em malícia e inveja, odiosos, odiando-nos uns aos outros.
Mas quando apareceu a benignidade e amor de Deus, nosso Salvador, para com os homens,
Não pelas obras de justiça que houvéssemos feito, mas segundo a sua misericórdia, nos salvou pela lavagem da regeneração e da renovação do Espírito Santo,
Que abundantemente ele derramou sobre nós por Jesus Cristo nosso Salvador;
Para que, sendo justificados pela sua graça, sejamos feitos herdeiros segundo a esperança da vida eterna.
Tito 3:3-7

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti