Curso Angular 2 – Aula 2: Arquitetura

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 2 é apresentar a arquitetura do Angular 2, e entender como ele é composto e como está organizado.

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

1. Definição

O Angular 2 é um framework utilizado para criação de aplicações do lado cliente utilizando HTML e JavaScript.

Ele é composto por uma série de bibliotecas, sendo uma delas o core, que contém todo o código base do framework, e algumas opcionais, que podem ser adicionadas no sistema caso necessário.

O Angular 2 utiliza tags próprias no HTML da página, que são utilizadas para referenciar os componentes que contém a lógica de negócio da aplicação, e uma vez inicializado, o Angular 2 manipula os elementos HTML para aplicar a lógica relativa a cada componente.

Este é o fluxo básico do Angular 2, agora veremos em detalhes seus principais componentes.

2. Módulo

O Angular 2 é todo estruturado em módulos, o que significa que blocos de código com um determinado propósito compõem um módulo, e um conjunto desses módulos irão compor a aplicação.

Um módulo é responsável por expor para a aplicação algum código específico, que pode ser uma classe, uma função, ou mesmo uma constante.

O grande benefício dos módulos é desmembrar a aplicação em partes pequenas, onde cada uma terá sua responsabilidade, poderá ser facilmente testada, além de permitir uma manutenção mais simples.

Por convenção, cada módulo deve ter seu próprio arquivo, assim como seu nome deve ser baseado no nome do módulo, por exemplo:

Repare que o nome do arquivo possui as palavras separadas por ‘-‘, enquanto que o nome do módulo possui a notação de caixa alta separando as palavras. Utilizando esse padrão fica muito simples e intuitivo encontrar qualquer arquivo na aplicação.

As definições ‘export’ e ‘class’ pertencem ao TypeScript, e quando o arquivo for compilado será gerado um código JavaScript que criará objetos públicos e acessíveis por outros módulos da aplicação.

Quando temos um segundo arquivo ou módulo que depende de outro módulo, usamos a seguinte instrução TypeScript:

No exemplo acima estamos referenciando o módulo criado no exemplo anterior. Repare que entre chaves temos o nome da classe, e após o ‘from’ utilizamos o nome do arquivo, sem a extensão.

Note como a utilizar convenção para os nomes dos arquivos e módulos ajuda a manter o código bastante claro.

O próprio Angular 2 é um agregado de módulos, e o ‘core’ será o mais utilizado em todo o desenvolvimento. Ele contém todos os recursos básicos que necessitaremos para desenvolver uma aplicação, e constantemente teremos que utilizar o comando ‘import’ para referenciar os recursos a serem utilizados, assim como fizemos com nosso componente criado no exemplo anterior.

No exemplo abaixo podemos ver como ocorre a importação do módulo ‘Component’ encontrado no ‘core’ do Angular 2:

3. Componente

Um componente é um recurso utilizado para criar uma classe responsável por controlar e manter o estado de uma view.

Em um modelo MVC (Model View Controller) ele se assemelha muito a um controller, pois contém as ações e controles da view, porém não deve conter a lógica de negócio em si, que para uma melhor organização e testabilidade devem ficar em um Serviço, recurso que veremos em breve.

Abaixo segue um exemplo de um componente de listagem de clientes:

No exemplo acima criamos uma classe com um construtor e um método.

A classe foi criada com o comando ‘export class’ para torná-lo visível para outros componentes.

A seguir temos um construtor para inicializar a nossa classe. Tal construtor recebe um serviço como parâmetro, o que significa que o Angular 2 irá injetar (estudaremos em outra aula o que é injeção de dependência) esse serviço para nós e torná-lo disponível para uso. Conforme citado anteriormente, o serviço que deverá conter as regras de negócio da aplicação.

A seguir declaramos uma variável ‘clientes’, que conterá a lista de clientes retornada pelo serviço. Repare que ‘clientes’ é do tipo ‘Cliente’, que seria um outro componente criado para representar um cliente, ele certamente teria atributos como nome, cpf, data de nascimento, entre outros.

E por fim temos um método chamado ‘listar’, que popula o atributo ‘clientes’ chamando o metodo ‘listar’ do serviço clienteService.

Mais abaixo você aprenderá a associar o componente a uma view utilizando a anotação ‘@Component’ na classe criada.

4. Template

Um template é a view de um determinado componente, utilizada pelo Angular 2 para renderizar um código HTML na página.

Ela basicamente contém código HTML e algumas marcações extras do Angular 2, que após processadas são exibidas no navegador.

Abaixo temos um exemplo de template:

No exemplo acima podemos ver que a maioria do código é simplesmente HTML, porém temos algumas marcações desconhecidas que são do Angular 2, como o ‘*ngFor’, ‘*ngIf’, ‘(click)’, assim como o uso das chaves duplas ‘{{ }}’.

Todos os comandos do Angular 2 listados acima serão estudados em aulas futuras.

5. Metadata

Metadata diz ao Angular 2 como processar uma classe.

Nos exemplos anteriores criamos um componente para listagem de clientes, assim como um template para exibição deles, mas como o Angular 2 saberá qual template pertence a qual componente?

A resposta está na metadata, que é uma anotação responsável por fazer o mapeamento entre componente e template.

O código a seguir seria adicionado ao componente criado anteriormente:

No exemplo acima temos três atributos de configuração que irão relacionar o componente com o template.

O atributo ‘selector’ é o nome dado a tag HTML utilizada para exibir um componente na tela. Imagine que desejamos exibir a listagem de cliente em determinada página HTML, para isso seria necessário acrescentar a tag ‘<cliente-listar></cliente-listar>’ no código HTML.

Já o atributo ‘templateURL’ indica o caminho de onde o Angular 2 deverá buscar o template a ser utilizado para renderizar a página HTML.

Por fim temos o atributo ‘providers’, que é opcional visto que nem sempre precisamos injetar um serviço externo em um componente. Assim como ele podemos ter mais atributos, como o ‘directives’, usado para referenciar as diretivas usadas pelo componentes, que veremos mais adiante.

A anotação ‘@Component’ não é a única metadata existente, existem outras como a ‘@Injectable’, ‘@RouterConfig’, que serão abordadas nas próximas aulas.

6. Data Binding

Data Binding é como o Angular 2 faz para manter sincronizado os dados da tela com os dados do componente.

Existem três tipos de Data Binding, exibidos no exemplo abaixo:

O primeiro é o chamado de interpolação (interpolation), e apenas exibe na tela os dados do atributo contido entre chaves duplas ‘{{ }}’.

O segundo chamamos de bind por propriedade (property binding), que associa um valor para uma variável visível no escopo do Angular 2.

O terceiro é chamado de bind de evento (event binding), que é usado para adicionar uma ação a um elemento. No caso acima ao clicar no botão o método ‘listar’ e’ chamado.

Combinando os binds de evento e propriedade conseguimos ainda formar um quarto tipo de Data Binding, conforme o exemplo a seguir:

No caso acima usamos ambos para sincronizar o valor em ambos os lados, chamado Two-way data binding, assim sempre que o valor for alterado tanto no componente quando no template ele será o mesmo em ambos os lados. O two-way data binding será muito usado na construção de formulários.

7. Serviço

Um serviço no Angular 2 nada mais é do que uma classe, função ou valor que pode ser utilizado por outro componente.

Abaixo segue um exemplo de um serviço de log:

Como podemos ver acima, o código do serviço não contém nada de diferente do que utilizamos na criação do nosso componente no de listagem de clientes.

Um segundo exemplo seria o ClienteService que injetamos em nosso componente de listagem de clientes. Ele poderia ser algo parecido com o código exibido a seguir:

No exemplo acima vemos também um exemplo de como serviços podem utilizar outros serviços, pois nosso serviço de listagem de clientes utiliza o serviço de log para escrever uma mensagem no console sempre que o método ‘listar’ for chamado.

Serviços deverão ser usados com muita frequência em nossas aplicações, e nunca esqueça de limitar o seu escopo a uma funcionalidade específica, pois assim ele será de fácil testabilidade, utilização e manutenção.

8. Diretiva

Pelo fato dos templates no Angular 2 serem dinâmicos, eles necessitam de instruções que ficam armazenadas em metadatas de diretivas.

O componente que criamos é um tipo de diretiva já conhecido por nós, agora iremos falar de mais dois tipos de diretivas.

A primeira delas é a diretiva estrutural, como o ‘*ngFor’ e o ‘*ngIf’, que permitem iterar sobre um objeto ou exibí-lo ou não na tela respectivamente.

O segundo tipo é a diretiva de atributo, como o ‘ngModel’, que modifica o comportamento de um elemento, como gerenciar o seu valor.

Existem muitas diretivas no core do Angular 2, como o ‘ngSwitch’, ‘ngClass’, ‘ngStyle’, e também temos a anotação ‘@Directive’ que nos permitirá criar nossas próprias diretivas.

9. Injeção de dependência

Injeção de dependência é o mecanismo utilizado para prover instâncias de serviços e componentes para outros serviços e componentes.

Basicamente o Angular 2 busca por tipo nos construtores de serviços e componentes por tipos que ele pode instanciar e fornecer no momento da utilização do mesmo. Como os serviços são instanciados apenas uma vez, eles são armazenados e fornecidos para mais de um componente sempre que necessário.

O Angular 2 usa muito a injeção de dependência para prover todos os recursos necessários para os componentes, e por hora o importante é termos uma noção de como ela funciona pois a usaremos bastante em nossas próximas aulas.

Clique para fazer o download dos arquivos do template base da aula 2.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 2.

17 comentários em “Curso Angular 2 – Aula 2: Arquitetura

  1. Muito importante sua iniciativa, pois é um conteúdo de excelente qualidade, e melhor, por um brasileiro. Obrigado por compartilhar seu conhecimento!

  2. Seu curso é muito bom, estou aprendendo bastante, boa didática também, confesso que estou um tanto ansioso pelas outras aulas que faltam, a aula sobre os serviços por exemplo.

    Parabéns.

    1. Olá Daniel,

      é simples sim, basta utilizar uma Api RestFul em Java para isso. Quanto a consumir os serviços com o Angular 2 basta seguir o conteúdo da aula 10.

  3. Opa!! Boa Tarde, Kazale!!

    Cara, estou começando com Angular agora e estou tentando acompanhar tudo com seu material. Acontece que como eu sou leigo, algumas coisas acabam dando erro e não sei identificar o melhor meio de resolver. E algumas vezes, nem dá o erro, mas não resulta como deveria, e também não consigo identificar o erro facilmente.
    No caso dessa segunda aula, eu fiz todo o procedimento como você fez. Por duas vezes! E mesmo assim, ao dar o START, não dava erro algum, porém a aplicação não funcionava como deveria. Funcionava de forma incompleta. Resolvi fazer o download do seu pacote e bater arquivo por arquivo, pra tentar identificar onde poderia estar o erro e verifiquei que o erro estava no app/app-component.js, no template. No arquivo gerado no meu computador estava bastante diferente do que estava declarado no seu, todavia não mexemos nesse arquivo, correto?

    Você saberia me dizer se é algum problema de versão, de erro em compilação, de configuração ou sei lá o quê? No primeiro APP tive esse mesmo problema, de apresentação na tela, mas não fiz a varredura como na aula 2…

    Desde já eu te agradeço pela ajuda!!

    Abraço!

    1. Olá Saulo,

      problemas de versão não afetam o código dessa forma, talvez você tenha somente acompanhado os passos pelo artigo e não pelo vídeo.

      O artigo contém os principais tópicos abordados, mas o passo a passo é feito mesmo no vídeo, se você seguir todos os passos dos vídeos você conseguirá gerar todos os códigos das aulas.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

3 + nove =