Is Angular 2+ MVVM?
Dezembro 06, 2016
>
Leio sobre isso em vários lugares agora: “Angular é MVVM” ou “Angular é MVC”. Ai é? Acho que não.
Atualmente a pergunta não pode ser respondida com um simples sim ou não. Antes de mais nada, o angular 2+ não é MVC! Honestamente, eu não sei, como as pessoas surgem com essas coisas, às vezes.
Este é um link afiliado. Nós podemos receber uma comissão por compras feitas através deste link.
Em vez disso, segue uma arquitectura orientada a componentes. Portanto, também não é MVVM. No entanto, a angular implementa muitos dos conceitos de MVVM. Então, se você precisar, você pode dizer que o angular segue o princípio MVVM. Para ver as semelhanças, vamos dar uma olhada no princípio no contexto dos componentes angulares.
“Muito bom… mas o que é MVVM?”
MVVM significa Model, View, ViewModel. É um padrão de desenho de software e é suposto para aumentar a legibilidade e manutenção do código fonte, ao desenvolver o código nas 3 secções mencionadas anteriormente. Então como ele se parece em angular?
Model
A Model é um container que define a estrutura de uma entidade, seguindo o princípio de orientação a objetos. Ele é definido pelo seu conteúdo. Portanto, se você quiser usar um Modelo para um Usuário, ele pode se parecer com isto.
indefinido
class User { name:string; email:string; address:string;}
Em angular, normalmente usamos classes Typescript ou interfaces para definir o modelo. No entanto, modelos são apenas objetos Javascript antigos.
Nota que os modelos não devem conter nenhuma lógica. Toda sua lógica deve ser definida no ViewModel.
View
The View é a camada visual da aplicação, incluindo todos os elementos visuais mostrados na tela do usuário. No caso do Angular 2, a vista é definida em um template. Estes templates são escritos em HTML e CSS, mas também contêm elementos específicos angulares. Estes templates são conectados ao ViewModel via data-binding. Os templates são sempre parte de um componente.
ViewModel
O ViewModel é uma parte abstrata da View, gerenciando os modelos e propriedades a serem mostrados na tela. Ele contém toda a lógica para a página. ViewModel e ViewModel são frequentemente conectados através de ligação de dados. Isso significa, que as mudanças no ViewModel, por exemplo em uma propriedade, são aplicadas instantaneamente à View, alterando, por exemplo, o texto mostrado na tela. Em angular, o ViewModel é representado pela parte Typescript de um componente.
Então descobrimos, que um componente angular consiste em duas partes. Template (View) e uma Class (ViewModel). Aqui está uma visão geral dos componentes angulares.
Componentes Angulares
Um componente básico em angular consiste em duas partes. A primeira parte é a definição de Componente. Está rodeada por @Component({}). Dentro dessa definição você pode especificar propriedades desse componente como um seletor, o que nos permitirá colocar nosso componente via HTML.
Naquele bloco nós também definimos a vista. Você pode fazer isso adicionando html inline ou usando um arquivo extra. Eu normalmente prefiro a segunda opção para uma melhor legibilidade e uma separação clara destes dois elementos. Então esta parte poderia ser assim:
indefinida
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
A segunda parte é a classe correspondente para implementar a lógica. Esta classe é colocada no mesmo arquivo logo abaixo da definição. É basicamente uma classe typescript normal, por isso você pode fazer o que quiser lá.
undefined
export class NavBar{}
Para mostrar nosso componente na tela precisamos anexá-lo a uma visualização html, que já é mostrada. O ponto de partida é o app.component.html. Assim, escrevendo
indefinido
<nav-bar></nav-bar>
o nosso componente é adicionado à vista. Em Angular, os componentes não podem estar lá por eles próprios, mas têm sempre de ser adicionados a um módulo. Para fazer isso, basta adicionar o nosso componente à secção de declarações do módulo pai. O módulo raiz está dentro do app.module.ts
indefinido
@NgModule({ declarations: })
Qualquer coisa definida no ficheiro html dos componentes será colocada dentro do selector-tag do componente e portanto mostrada na tela.
Este é um link afiliado. Podemos receber uma comissão por compras feitas através deste link.
Para saber mais sobre componentes, veja o meu guia detalhado sobre componentes em angular.