Simplificando Angular associação de dados para desenvolvedores do .NET

No meu trabalho, tenho a oportunidade de conversar com muitos desenvolvedores .NET que desejam aprender Angular. Muitas vezes, vi que eles trazem suas habilidades .NET e trabalham para mapear isso no aprendizado de Angular. Embora o esforço e a motivação para aprender estejam lá Angular não é o .NET.

Como Angular é uma biblioteca JavaScript pura, simplificarei conceitos básicos, mas importantes, de Angular para desenvolvedores .NET nesta série de postagens.

Neste artigo, aprenderemos sobre associações de dados no Angular. Felizmente, a vinculação de dados no Angular é muito mais simples do que no .NET.

Primeiro, vamos revisar algumas das técnicas de associação de dados no .NET. Por exemplo, no ASP.NET MVC, você faz a vinculação de dados usando um modelo. A visualização está vinculada

1. Para um objeto
2. Para um objeto complexo
3. Para uma coleção de objetos

Essencialmente, em ASP.NET MVC, você faz a ligação de dados a uma classe de modelo. Por outro lado, no WPF, você tem modos de associação de dados disponíveis. Você pode definir o modo de associação de dados em XAML, da seguinte maneira:

1. One-way data binding
2. Two-way data binding
3. Vinculação de dados única
4. One-way to source data binding

Se você estiver seguindo padrões MVVM, poderá estar usando a interface INotifyPropertyChanged para obter a associação de dados bidirecional. Portanto, há muitas maneiras pelas quais as associações de dados são alcançadas no mundo do .NET.

A vinculação de dados no Angular, no entanto, é muito mais simples.

Se você é extremamente novo em Angular, deixe-me apresentá-lo aos componentes. Em Angular aplicativos, o que você vê no navegador (ou em outro lugar) é um componente. Um componente consiste nas seguintes partes:

1. A TypeScript class called Component class
2. Um arquivo HTML chamado Template do componente
3. Um arquivo CSS opcional para o estilo do componente

Em Angular, a vinculação de dados determina como os dados fluirão entre a classe Component e o Component Template.

Angular nos fornece três tipos de ligações de dados. Eles são os seguintes:

1. Interpolação
2. Vinculação de propriedade
3. Vinculação de evento

Vamos ver cada um por um.

Interpolação

Angular interpolação é uma ligação de dados unidirecional. Ele é usado para passar dados da classe do componente para o modelo. A sintaxe da interpolação é {{propertyname}}.

Digamos que temos a classe de componente, conforme mostrado abaixo:

export class AppComponent {
 
      product = {
          title: 'Cricket Bat',
          price: 500
      };
 
  }

Precisamos passar o produto da classe component para o template. Lembre-se de que, para manter o exemplo simples, estou codificando o valor do objeto do produto, no entanto, em um cenário real, os dados podem ser buscados no banco de dados usando a API.  Podemos exibir o valor do objeto do produto usando interpolação, conforme mostrado na listagem abaixo:

<h1>Product</h1>
<h2>Title : {{product.title}}</h2>
<h2>Price : {{product.price}}</h2>

Usando interpolação, os dados são passados da classe de componente para o template. Idealmente, sempre que o valor do objeto do produto for alterado, o template será atualizado com o valor atualizado do objeto do produto.

No Angular, há algo chamado ChangeDetector Service, que garante que o valor da propriedade na classe do componente e o modelo estejam sincronizados entre si.

Portanto, se você deseja exibir dados em Angular, deve usar a vinculação de dados de interpolação.

Vinculação de propriedade

Angular fornece um segundo tipo de associação chamado "Associação de Propriedade". A sintaxe da vinculação de propriedade é o colchete []. Ele permite definir a propriedade dos elementos HTML em um modelo com a propriedade da classe do componente. 

Então, digamos que você tenha uma classe de componente como a abaixo:

export class AppComponent {
   btnHeight = 100;
   btnWidth = 100;
}

Agora, você pode definir as propriedades de altura e largura de um botão no modelo com as propriedades da classe de componente usando a vinculação de propriedade.

<button 
  [style.height.px] = 'btnHeight'
  [style.width.px] = 'btnWidth' >
        Add Product
</button >

Angular Vinculação de propriedade é usada para definir a propriedade de elementos HTML com as propriedades da classe de componente. Você também pode definir propriedades de outros elementos HTML, como imagem, lista, tabela, etc.  Sempre que o valor da propriedade na classe do componente for alterado, a propriedade do elemento HTML será atualizada na vinculação da propriedade.

Vinculação de evento

Angular fornece um terceiro tipo de associação para capturar eventos gerados no modelo em uma classe de componente. Por exemplo, há um botão no modelo de componente e, ao clicar no botão, você deseja chamar uma função na classe de componente. Você pode fazer isso usando a Associação de Eventos. A sintaxe por trás da associação de eventos é (eventname).

Para este exemplo, você pode ter uma classe de componente como esta:

export class AppComponent {
     addProduct() {
         console.log('add product');
     }
 }

Você deseja chamar a função addProduct com o clique do botão no modelo. Você pode fazer isso usando a associação de eventos:

<h1>Product</h1>
<button (click)='addProduct()'>
    Add Product
</button>

Você pode fazer a vinculação de eventos com todos os eventos de um elemento HTML que faz parte do Angular ngZone. Você pode aprender mais sobre isso aqui.

Angular fornece essas três ligações. Na associação de eventos, os dados fluem do modelo para a classe e, na associação e interpolação de propriedades, os dados fluem da classe para o modelo.

Vinculação de dados bidirecional

Angular não tem associação de dados bidirecional interna, no entanto, combinando a associação de propriedade e a associação de eventos, você pode obter a associação de dados bidirecional.

Angular nos fornece uma diretiva,ngModel,para obter ligação de dados bidirecional e é muito fácil de usar. Primeiro, importe FormsModule e, em seguida, você pode criar uma ligação de dados bidirecional:

export class AppComponent {
     name = 'foo';
 }

Podemos vincular dados bidirecionais à propriedade name com uma caixa de entrada:

<input type="text" [(ngModel)]='name' />

<h2>{{name}}</h2>

Como você pode ver, estamos usando [(ngModel)] para criar uma ligação de dados bidirecional entre o controle de entrada e a propriedade name. Sempre que um usuário alterar o valor da caixa de entrada, a propriedade name será atualizada e vice-versa.

Como desenvolvedor do .NET, agora você deve ter percebido que a vinculação de dados no Angular é muito mais simples e tudo o que você precisa saber são quatro sintaxes. Espero que você ache este post útil e, em outros posts, abordaremos outros tópicos de Angular.

 Se você gostou deste post, por favor, compartilhe-o. Além disso, se você não tiver feito check-outInfragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 30+ componentes de Angular baseados em materiais para ajudá-lo a codificar aplicativos da web mais rapidamente.