Arquitetura de componentes Angular facilitada

Embora não houvesse nada necessariamente errado com a abordagem Angular JS adotou, a arquitetura baseada em componentes empregada pelo Angular provou ser um paradigma muito flexível que é facilmente compreendido e aplicado por desenvolvedores de várias origens. Uma vez que você reconhece o análogo entre "Componente" e "Controle do Usuário", a vasta gama de oportunidades de reutilização e composição, e o poder que elas fornecem, tornam-se aparentes.

Neste, exceto no Angular Essentials - um e-book da Infragistics que você pode baixar gratuitamente agora mesmo, você terá uma introdução de alto nível à arquitetura de componentes Angular e aos vários recursos disponíveis na plataforma para ajudá-lo a criar aplicativos complexos para a web moderna.

Angular Estrutura do aplicativo

Angular usa componentes extensivamente. Um aplicativo Angular típico consiste em componentes para definir cada parte da página. Os componentes são adicionados a Angular módulos.

Pense em um aplicativo Angular como uma árvore de componentes. Esses componentes estão interligados. O componente mais alto é o componente Root, que contém todos os outros componentes e é usado pelo bootstrapper Angular para iniciar o aplicativo.

Aqui está uma árvore de componentes típica em um aplicativo Angular:

 

Estrutura da árvore de componentes em um aplicativo Angular

Cada componente é uma parte autossuficiente da interface do usuário, tela ou rota. Um componente é uma combinação de uma vista e seu modelo de vista. Ele usa Serviços para obter os dados e exibe esses dados em exibições.

Quando o aplicativo é dividido em várias exibições e as exibições precisam ser carregadas com base na URL atual, cada rota é tratada com um componente. A rota invoca esse componente quando ele precisa ser carregado.

Angular aplicações são modulares. Angular faz uso de vários módulos ES6 para manter o código-fonte modularizado e usa seu próprio sistema de módulos para agrupar um conjunto de blocos de Angular relacionados. É importante entender que a finalidade dos sistemas modulares ES6 é diferente da do sistema de módulos Angular.

O sistema de módulos ES6 ajuda a manter os arquivos de origem o mais enxutos possível. Cada arquivo contém um componente, uma diretiva, um serviço ou qualquer outro bloco. Esses arquivos exportam seus objetos usando a palavra-chave export e são importados por outros módulos usando a palavra-chave import. As bibliotecas de terceiros usadas no aplicativo também são carregadas como módulos ES6. Por outro lado, os módulos Angular são usados para agrupar um conjunto de blocos Angular. Esses módulos podem ser usados para dividir um aplicativo em vários módulos com base na funcionalidade de um conjunto de blocos. Um módulo pode acessar outros módulos para usar sua funcionalidade.

Angular faz uso extensivo de DI (Injeção de Dependência) para carregar objetos necessários em qualquer bloco de código. Ele fornece uma única API para DI, que vem com toda a potência necessária para um aplicativo complexo. A combinação de modularidade e DI torna Angular código muito mais limpo para ler e testar.

Um aplicativo Angular é construído usando vários componentes, serviços, diretivas, tubos e outras peças. Vamos explorar o que cada um faz.

Directivas

As diretivas não são novas em Angular, mas foram aprimoradas desde Angular JS. A arquitetura das diretivas em Angular reduz a necessidade de manipulação direta do DOM, fornecendo um melhor sistema de ligação. Ao contrário Angular JS, em que uma diretiva deve ser nomeada em notação de maiúsculas e minúsculas e usada na interface do usuário com notação tracejada, Angular tem uma maneira unificada de nomear e usar a diretiva.

Angular 2 has three types of directives:

Componentes

Um aplicativo Angular começa com um componente; Cada rota é associada a um componente e usa componentes para definir diferentes níveis do aplicativo. Os componentes consistem em um modelo HTML, bem como a lógica para criar um modelo de exibição para esse modelo. Os modelos HTML usam a sintaxe de associação do Angular para vincular as propriedades e os métodos do modelo de exibição no modo de exibição. Um componente pode carregar outro componente em seu modelo e interagir com ele.

Os componentes têm ganchos de ciclo de vida como ngOnInit(), ngOnDestroy() que permitem que o aplicativo responda aos principais eventos do ciclo de vida do componente.

Decorator Directives

As diretivas Decorator estendem o comportamento de um elemento HTML existente ou de um componente existente. Este é o tipo mais simples de directivas. Eles executam pequenos conjuntos de ações, mas às vezes esses pequenos recursos são críticos para os negócios. Uma diretiva decoradora pode interagir com seu host por meio de eventos. O uso eficiente desses eventos reduz a quantidade de manipulação do DOM que é necessário executar.

Directivas estruturais

As diretivas estruturais lidam com o modelo renderizado dentro de um elemento. Eles podem manipular o modelo, dependendo da necessidade. Ele não manipula o DOM dentro do destino diretamente, em vez disso, usa o serviço ViewComponentRef fornecido pelo Angular para adicionar ou remover elementos dentro do destino. Esse comportamento torna a plataforma de diretiva agnóstica.

Change Detection

No centro de cada estrutura de front-end está uma técnica para detectar alterações feitas nos objetos. Sempre que os valores dos objetos são associados à alteração da interface do usuário, a estrutura precisa ser notificada para que possa atualizar a interface do usuário para refletir essas alterações. Essa técnica é chamada de Detecção de Alterações. Angular traz uma maneira muito mais poderosa e eficiente de detectar alterações nos objetos. Ele vem com um mecanismo de detecção de alterações integrado e permite que os aplicativos criados na estrutura também usem uma técnica de terceiros. A estrutura possui uma extremidade aberta que permite o uso de objetos que fornecem um mecanismo melhor para detectar alterações.

Serviços

Os serviços são classes ES6 ou TypeScript simples que executam uma operação como buscar dados de uma API, manter um WebSocket conectado para interagir com o servidor, lidar com lógica de negócios ou qualquer lógica reutilizável. Um serviço pode ser injetado em outro serviço, um componente, uma diretiva ou qualquer bloco de código Angular. Os serviços ajudam a alcançar o Princípio de Responsabilidade Única (SRP) e a manter o código mais limpo.

Formulários

Aceitar entradas do usuário é uma das partes mais essenciais de qualquer aplicativo. Às vezes, torna-se um desafio lidar com as entradas do usuário quando a empresa precisa que muitos campos sejam preenchidos pelo usuário e tem muitas validações a serem executadas. Angular fornece um bom suporte para formulários. Um formulário em um aplicativo Angular que pode ser controlado por um modelo ou por um modelo.

Roteamento

A estrutura que suporta o desenvolvimento de aplicativos de página única permite alternar as exibições no lado do cliente sem atualizar a página inteira. Ele atualiza uma parte da página e altera o URL para que se possa marcá-lo e voltar para a visualização específica em vez de iniciar a navegação novamente a partir da primeira página. Isso é chamado de roteamento do lado do cliente. Como toda estrutura de SPA, Angular oferece suporte ao roteamento. Angular tem um roteador chamado Component Router, que tem esse nome porque carrega componentes.

Modules

Como mencionado anteriormente, os módulos em Angular são usados para agrupar um conjunto de componentes, diretivas, pipes e serviços relacionados. O sistema de módulos da Angular é diferente do sistema de módulos ES6. O sistema de módulos ES6 encapsula o conteúdo de um arquivo e o sistema de módulos Angular 2 encapsula um conjunto de blocos de Angular. Aqui estão alguns recursos de um módulo:

• Os blocos adicionados a um módulo podem ser usados dentro do módulo.
• Um módulo pode importar um ou mais módulos para usar o código desse módulo.
• Uma biblioteca Angular pode usar um módulo para exportar sua funcionalidade para o resto do mundo.
• Um aplicativo Angular inicializa com um módulo.
• Um módulo pode declarar um ou mais de seus componentes como componentes de bootstrap.
• A execução do módulo começará com o componente inicializado.

Conclusão

Angular vem com uma série de novos recursos, bem como versões aprimoradas de alguns recursos Angular JS. Cada um desses recursos é projetado com facilidade de uso e facilidade de manutenção em mente. Vamos nos aprofundar em cada um desses conceitos à medida que avançamos.

Esperamos que você tenha gostado deste exemplo do e-book Angular Essentials. Você pode baixar o livro completo e não deixe de conferir nosso novo aplicativo de amostra e lições que demonstram como aplicar as informações que você acabou de aprender, bem como como Ignite UI para JavaScript Angular Components podem ajudá-lo a escrever aplicativos incríveis de alto desempenho para qualquer linha de aplicativos de negócios. E certifique-se de obter sua avaliação gratuita de 30 dias do Ignite UI para JavaScript!