O aplicativo TODO de front-end é o mesmo que o "Hello world" na programação normal. Ao criar aplicativos TODO, você pode estudar a implementação de operações CRUD usando uma ou outra estrutura. Mas muitas vezes esses projetos se relacionam apenas superficialmente com o que a estrutura realmente conhece.
Se você olhar para o Angular, terá a sensação de que essa estrutura está constantemente mudando e atualizando. De fato, em relação à Angular, podemos destacar algumas idéias que permanecem inalteradas. O material, cuja tradução publicamos hoje, fornece uma visão geral dos conceitos angulares básicos que você precisa entender para usar correta e eficientemente os recursos dessa estrutura.
Para aprender Angular, você precisa aprender muito. Muitos desenvolvedores ficam presos nos estágios iniciais do desenvolvimento do Angular. Isso ocorre porque eles não sabem para onde ir ou não sabem quais palavras-chave devem procurar informações que lhes permitam dar um passo à frente. A autora deste material diz que, quando começou a aprender Angular 2+, gostaria que ela se deparasse com um guia para essa estrutura semelhante a esta.
1. A arquitetura modular do Angular
Em teoria, aplicativos angulares podem ser criados colocando todo o código em uma página, em uma grande função. Mas fazê-lo, por um lado, não é recomendado e, por outro, essa abordagem não pode ser chamada de eficaz do ponto de vista da estruturação do código. Além disso, isso faz sentido da própria existência do Angular.
Angular, como parte de sua arquitetura de estrutura, faz uso extensivo do conceito de módulos. Um módulo é um pedaço de código cuja existência tem apenas um motivo. Em geral, podemos dizer que as aplicações angulares são montadas a partir de módulos. Alguns módulos são usados apenas em um local do aplicativo, outros em locais diferentes.
Existem várias maneiras de estruturar os módulos em um aplicativo. Além disso, o estudo de vários padrões arquiteturais ajuda a entender como organizar a estrutura do aplicativo com o objetivo de escalá-lo durante seu crescimento. Além disso, o uso prudente de módulos ajuda a isolar o código e evitar a duplicação de código em um projeto.
A subseção a seguir fornecerá exemplos de consultas pelas quais você pode procurar materiais adicionais sobre este tópico. Tais subseções serão encontradas em outras seções deste material.
▍Pesquisar consultas
- Padrões de arquitetura angular.
- Arquitetura de aplicativo angular escalável.
2. Fluxo de dados unidirecional e imutabilidade
Muitos desenvolvedores que usam o Angular 1 gostaram do conceito de ligação bidirecional. Essa, de fato, era uma das qualidades atraentes da Angular. Mas com o tempo, à medida que os aplicativos Angular se tornaram mais complexos, ficou claro que a ligação bidirecional cria problemas de desempenho.
Verificou-se que a ligação de mão dupla, de fato, não é necessária com tanta frequência.
No Angular 2+, você ainda pode usar a ligação bidirecional, mas somente quando o desenvolvedor expressar explicitamente sua intenção de usar esse recurso. Essa abordagem faz com que quem escreve código de aplicativo pense na direção dos fluxos de dados. Além disso, isso permite um trabalho mais flexível com os dados. A flexibilidade é alcançada através da capacidade de personalizar exatamente como os dados devem ser movidos no aplicativo.
▍Pesquisar consultas
- Práticas recomendadas para fluxo de dados angulares.
- Fluxo unidirecional em Angular.
- Vantagens da ligação unidirecional.
3. Atributos e diretrizes estruturais da Angular
Uma diretiva é uma extensão do HTML através de elementos personalizados. Diretivas de atributo, ou atributos, permitem alterar as propriedades dos elementos. As diretivas estruturais permitem influenciar o conteúdo das páginas removendo itens do DOM ou adicionando-os ao DOM.
Por exemplo,
ngSwitch e
ngIf são diretivas estruturais, uma vez que avaliam os parâmetros passados para eles e determinam se certas partes do DOM devem ou não estar presentes no documento.
Atributos são mecanismos para alterar o comportamento padrão dos elementos, personalizáveis pelo programador.
Aprender a usar esses dois tipos de diretivas ajudará a expandir os recursos do seu aplicativo e reduzir a quantidade de código duplicado. As diretivas de atributo, além disso, podem ajudar a destacar alguns modelos para alterar elementos usados em diferentes locais do aplicativo.
▍Pesquisar consultas
- Diretivas de atributo angular (Diretivas de atributo angular).
- Diretivas estruturais angulares.
- Padrões diretivos estruturais angulares.
4. Métodos de ciclo de vida dos componentes
Cada parte do código tem seu próprio ciclo de vida, que determina como algo é criado, exibido na tela e depois desaparece. Angular tem um conceito chamado ciclo de vida de um componente. Parece algo como isto:
- Criação.
- Renderização
- Renderizando componentes filho.
- Verifique se há alterações nas propriedades relacionadas aos dados.
- Destruição.
- Removendo do DOM.
O programador tem a oportunidade de intervir no componente em momentos importantes deste ciclo, concentrando-se, por exemplo, em determinados eventos. Isso permite que você personalize como o programa se comporta em vários pontos do ciclo de vida do componente.
Por exemplo, pode ser necessário carregar alguns dados antes que a página seja exibida. Você pode fazer isso no método de ciclo de vida do componente
ngOnInit() . Ou, talvez em algum momento do aplicativo, você precise se desconectar do banco de dados. Você pode fazer isso no método
ngOnDestroy() .
▍Pesquisar consultas
- Ganchos angulares do ciclo de vida.
- Ciclo de vida dos componentes.
5. Serviços HTTP e objetos observáveis
O que estamos falando aqui provavelmente não está relacionado aos recursos especiais do Angular, mas ao ES7. Aconteceu que no Angular, o trabalho com objetos Observáveis é implementado no nível da estrutura. Mecanismos semelhantes existem no React, no Vue e em outras bibliotecas e estruturas baseadas em JavaScript.
Objetos observáveis são padrões que ajudam você a trabalhar eficientemente com dados em sistemas baseados em eventos. Para desenvolver efetivamente aplicativos Angular, você precisa saber como usar serviços HTTP e objetos Observáveis.
▍Pesquisar consultas
- Padrões observáveis em JavaScript (Modelos de objetos observáveis em JavaScript).
- HTTP angular e observáveis (objetos HTTP e observáveis em Angular).
- Recurso observável do ES7 (objetos observáveis no ES7).
6. Componentes inteligentes e estúpidos
Muitos, desenvolvendo aplicativos Angular, esforçam-se para colocar tudo o que é necessário para a operação desses componentes. É verdade que isso não é algo que possa ser recomendado para uso prático. A idéia de usar componentes "inteligentes" e "estúpidos" no Angular é um conceito que, talvez, deva ser discutido com mais frequência do que está falando agora, especialmente nos círculos de desenvolvedores iniciantes.
Se o componente é inteligente ou estúpido, determina seu papel no design geral do dispositivo de aplicação. Os componentes "tolos" geralmente não têm estado, diferem no comportamento simples, previsível e compreensível. É recomendável, sempre que possível, focar na criação e uso de componentes "estúpidos".
É mais difícil trabalhar com componentes "inteligentes", pois eles, no decorrer do trabalho, recebem alguns dados de entrada e geram alguns dados de saída. Para usar o Angular efetivamente, familiarize-se com o conceito de componentes inteligentes e burros. Esse conhecido fornecerá padrões e idéias sobre como organizar fragmentos do código do aplicativo e como construir relacionamentos entre esses fragmentos.
▍Pesquisar consultas
- Componentes angulares inteligentes / mudos.
- Componentes mudos sem estado.
- Componentes de apresentação.
- Componentes inteligentes em Angular.
7. Estrutura da aplicação e recomendações práticas para sua formação
Se falarmos sobre a estrutura do aplicativo e a aplicação de recomendações práticas ao criá-lo, as ferramentas de linha de comando Angular podem fornecer pelo menos alguma ajuda ao programador. Desenvolver um aplicativo Angular (ou qualquer outro aplicativo) é como construir uma casa. Ou seja, estamos falando de métodos práticos que foram desenvolvidos e otimizados pela comunidade de desenvolvedores há anos. O uso de tais técnicas para estruturar aplicativos leva ao surgimento de projetos de alta qualidade. Na verdade, isso se aplica ao Angular.
Quando programadores iniciantes que tentam aprender Angular reclamam dessa estrutura, o motivo de tais reclamações geralmente é a falta de conhecimento sobre a estrutura dos aplicativos. Iniciantes compreendem facilmente a sintaxe, aqui eles não têm problemas. Mas encontrar a abordagem correta para estruturar aplicativos é muito mais difícil para eles. Aqui você precisa entender a área de assunto para a qual o aplicativo está sendo criado, conhecer os requisitos para o aplicativo e como a realidade e as expectativas estão relacionadas nos níveis conceitual e prático.
Estudar as opções possíveis para as estruturas de aplicações Angular e recomendações práticas para o uso dessas estruturas dará ao programador uma visão de como criar seus próprios projetos.
▍Pesquisar consultas
- Aplicativos angulares de repositório único (aplicativos angulares hospedados em um único repositório).
- Bibliotecas angulares (bibliotecas angulares).
- Pacotes angulares.
- Pacotes angulares (pacotes angulares).
- Micro aplicativos angulares.
- Monorepo (Monorepositórios).
8. Sintaxe e padrões de ligação de dados
A associação, ou associação de dados, é talvez o recurso mais notável das estruturas JavaScript. Além disso, essa é uma das razões pelas quais as estruturas geralmente existem. A ligação de dados em modelos é a ponte entre HTML estático e JavaScript. A sintaxe de ligação de dados nos modelos Angular desempenha o papel de intermediário para ajudar a comunicar entidades HTML e JavaScript.
Depois de aprender como e quando usar âncoras, você pode facilmente transformar páginas estáticas em algo interativo. Nesta área, é recomendável prestar atenção a vários cenários de ligação de dados. Por exemplo, essa é uma ligação de propriedades, eventos, interpolação de dados e ligação bidirecional.
▍Pesquisar consultas
- Ligação de propriedade angular.
- Associação de evento angular.
- Ligação bidirecional angular (ligação de dados bidirecional angular).
- Interpolação angular (interpolação em angular).
- Constantes de passagem angular (constantes de passagem angulares).
9. Módulos de recursos e roteamento
Os módulos de recursos do Angular são uma tecnologia subestimada. Esses módulos, de fato, fornecem ao desenvolvedor uma maneira fantástica de organizar e isolar conjuntos de requisitos de negócios para aplicativos. Eles ajudam a limitar a responsabilidade dos fragmentos de código e a evitar, a longo prazo, a poluição do código.
Existem cinco tipos de módulos de recursos (domínio, roteado, roteamento, serviço, widget), cada um deles responsável pela implementação de uma certa funcionalidade. Aprender a usar os módulos de recursos em conjunto com o roteamento pode ajudar na criação de blocos separados de funcionalidade. Isso ajudará e implementará nas aplicações um esquema claro e de alta qualidade de separação de responsabilidades.
▍Pesquisar consultas
- Módulos de recurso angular (Módulos de recurso em Angular).
- Estruturas de recursos compartilhados em Angular.
- Provedores de módulos de recursos.
- Carregamento lento com módulos de roteamento e recursos (Carregamento lento com módulos de roteamento e recursos).
10. Formulários e validação de dados (formulários reativos e validadores)
Os formulários são uma parte inevitável de qualquer desenvolvimento front-end. E onde os formulários são usados, a validação de dados também é necessária.
Angular tem várias maneiras de construir formulários inteligentes orientados a dados. As formas reativas são especialmente populares. No entanto, existem outras opções, em particular - são formulários cuja validação é baseada em modelos, bem como o uso de validadores personalizados.
Aprender como validadores e CSS trabalham juntos ajudará a acelerar o desenvolvimento de aplicativos e facilitará o tratamento de erros nos formulários.
▍Pesquisar consultas
- Validação de forma angular.
- Validação orientada a modelo
- Validação de formulário reativo.
- Validadores de sincronização e assíncrona em Angular (validadores síncronos e assíncronos em Angular).
- Validadores incorporados.
- Validadores personalizados angulares.
- Validação entre campos.
11. Projeção de conteúdo
Angular tem um mecanismo chamado projeção de conteúdo. Ele permite que você organize a transferência eficiente de dados dos componentes pai para os componentes filhos. Embora a idéia de projetar conteúdo possa parecer complicada, sua essência está no fato de que, para construir algum elemento exibido na tela, alguns elementos são colocados em outros.
Os desenvolvedores costumam estudar a projeção de conteúdo em um nível superficial, por exemplo, acostumando-se ao esquema no qual um componente filho está incorporado no componente pai. Mas, para ampliar nossa compreensão desse conceito, também precisamos entender como os dados são transferidos entre diferentes componentes visuais. É aqui que a compreensão dos recursos da projeção de conteúdo será muito útil.
A compreensão desse conceito ajuda a entender os recursos do movimento dos fluxos de dados no aplicativo e onde ocorrem exatamente as mutações desses dados.
▍Pesquisar consultas
- Projeção de conteúdo angular.
- Relação de visão pai-filho angular (relacionamento pai-filho angular e componentes visuais de Angular).
- Relações de dados de vista angular.
12. Estratégia de Detecção de Alterações onPush
Por padrão, o Angular usa uma estratégia padrão de detecção de alterações. Com essa abordagem, as verificações de componentes estão em andamento. Embora não haja nada de errado nisso, essa abordagem para detectar alterações pode não ser eficaz.
Se estamos falando de aplicativos pequenos, o desempenho deles não é particularmente afetado. Mas depois que o aplicativo cresce para um determinado tamanho, sua velocidade, principalmente quando iniciada em navegadores antigos, pode se deteriorar.
A
onPush detecção de alterações
onPush pode acelerar drasticamente o aplicativo. O fato é que, quando usado, as verificações são executadas apenas quando determinados eventos ocorrem. Isso é muito melhor do que verificações constantes.
▍Pesquisar consultas
- Detecção angular de alteração onPush (estratégia de detecção angular de alteração onPush).
13. Restringindo o acesso às rotas, pré-carregamento, carregamento lento
Se o seu projeto possui mecanismos que fornecem acesso do usuário ao sistema, isso significa que você precisa usar a restrição de acesso às rotas. Muitos aplicativos exigem a capacidade de proteger determinadas páginas da visualização não autorizada. As restrições de acesso à rota funcionam como uma interface entre o roteador e a rota solicitada. Eles tomam decisões sobre se o acesso a uma rota específica é permitido em uma determinada situação. Na área de proteção de rota, há muito que será útil aprender. Em particular, trata-se de tomada de decisão com base na análise do período de validade do token, no uso de funções de autenticação e no fornecimento de trabalho seguro com rotas.
O pré-carregamento e o carregamento lento de dados podem melhorar a experiência do usuário em trabalhar com o site, reduzindo o tempo de carregamento do aplicativo. Seria útil dizer que as tecnologias de carregamento pré-preguiçoso não estão relacionadas apenas às imagens. Essas tecnologias são usadas ao dividir os pacotes de aplicativos em partes e ao carregar diferentes partes desses pacotes em diferentes condições.
▍Pesquisar consultas
- Protetores de rota angular (Restringindo o acesso às rotas em Angular).
- Padrões de autenticação angular.
- Módulos de pré-carregamento angular e carregamento lento (módulos de pré-carregamento e carregamento lento em Angular).
- Padrões angulares de rota segura.
14. Transportadores personalizados
Pipelines angulares facilitam muito a formatação de dados. Existem muitos transportadores embutidos que permitem resolver uma ampla variedade de tarefas padrão. Entre elas estão as tarefas de formatação de datas, valores monetários, valores percentuais, além de, por exemplo, trabalhar com o caso de caracteres. No entanto, sempre há uma tarefa para a qual não há transportador padrão.
É nesses casos que são necessários pipelines personalizados. Esse mecanismo permite ao programador criar seus próprios filtros e descrever as transformações de dados necessárias. Usar tudo isso não é difícil, portanto, esse conceito pode ser recomendado para estudo.
▍Pesquisar consultas
- Tubos angulares personalizados.
15. Decoradores @ViewChild e @ContentChild
Os componentes podem se comunicar graças aos
@ContentChild e
@ContentChild . A essência do Angular é fazer com que aplicativos de múltiplos componentes criados usando essa estrutura pareçam um quebra-cabeça. Mas esse quebra-cabeça não será muito útil se seus fragmentos forem isolados um do outro.
Para conectar peças do quebra-cabeça, os decoradores
@ViewChild e
@ContentChild . Estudar os recursos de seu uso dará a você a oportunidade de trabalhar com componentes associados a outros componentes. Isso simplifica a tarefa de organizar o compartilhamento de dados entre vários componentes. Isso permite transferir dados e informações sobre eventos que ocorrem nesses componentes entre componentes.
▍Pesquisar consultas
- Decoradores angulares (decoradores em angular).
- Viewchild e contentchild em Angular (Decorators
@ViewChild e @ContentChild em Angular). - Compartilhamento de dados de componentes angulares.
16. Componentes dinâmicos e a diretiva ng-template
Componentes são os blocos de construção de aplicativos angulares. No entanto, nem todos os componentes precisam ser criados com antecedência. Alguns deles precisam ser criados enquanto o programa está sendo executado.
Componentes dinâmicos permitem que um aplicativo crie o que precisa enquanto está em execução.
Componentes estáticos, diferentemente dos dinâmicos, são criados com antecedência. Isso é feito nos casos em que não é esperado que os componentes possam ser afetados. Eles são previsíveis, de maneira predeterminada, executando conversões dos dados que os inserem.
Componentes dinâmicos, por outro lado, são criados conforme a necessidade deles. Eles se mostram muito úteis no desenvolvimento de aplicativos que funcionam com fontes de dados externas. Eles são úteis mesmo quando você precisa organizar a reação do aplicativo às ações que ocorrem na página.
▍Pesquisar consultas
- Componentes dinâmicos em Angular.
- Componentes dinâmicos e modelos de ng (Diretiva de componentes dinâmicos e modelos de ng).
17. Decoradores @Host , @HostBinding e exportAs Directiva
Os
@HostBinding ,
@HostBinding e a diretiva
@HostBinding exportAs usados no Angular para controlar o que eles se aplicam. Além disso, possibilitam criar modelos concisos para entidades exportadoras que podem ser usadas no aplicativo.
Se o exposto acima não lhe parecer particularmente claro, recomendamos que você se familiarize com as diretrizes e descubra por que elas são necessárias. Os
@HostBinding ,
@HostBinding e a diretiva
@HostBinding são o que ajuda o Angular a ser o que é.
▍Pesquisar consultas
- Padrões de diretivas angulares (padrões de diretivas angulares).
@Host , @HostBinding e exportAs in Angular (decoradores @Host , @HostBinding e a diretiva exportAs em Angular).
18. Gerenciamento de estado de aplicativo usando NgRx
O estado do aplicativo é determinado pelo que o usuário vê. Se a confusão reinar no estado do aplicativo, isso pode indicar que as estruturas de dados usadas nele estão mal adaptadas às mudanças. Tais mudanças podem precisar ser feitas nas estruturas de dados à medida que o aplicativo cresce e se desenvolve.
Quando alguém começa a entender as especificidades de trabalhar com o estado no Angular, ele também aborda a compreensão das especificidades do comportamento dos dados em seus aplicativos.
A Angular possui seu próprio sistema de gerenciamento de estado. No entanto, existe uma tecnologia, NgRx, que permite elevar o gerenciamento do estado do aplicativo a um nível superior. Em particular, por exemplo, os dados podem ser perdidos ao serem transferidos entre uma pluralidade de componentes pai e componentes filhos. E o NgRx permite criar um repositório centralizado e se livrar desse problema.
▍Pesquisar consultas
- NgRx angular (usando RxJS em angular).
- Princípios de fluxo / redux.
- Princípios angulares de gerenciamento de estado.
19. Injeção de dependência e zona
Injeção de dependência é um conceito massivo e universal. Se você não conhece muito bem, deve estudá-lo. Angular tem muitas maneiras de injetar dependências com precisão. Isto é conseguido principalmente através do uso de construtores. Trata-se de importar para o código apenas o que é realmente necessário. Isso ajuda a melhorar o desempenho do aplicativo.
O conceito de zonas, como a idéia de injeção de dependência, não é exclusivo da Angular. Este é um mecanismo que permite que um aplicativo monitore o status de tarefas assíncronas ao longo de seu ciclo de vida. — , , — , . .
▍
- Angular zones ( Angular).
- Dependency injections ( ).
- Angular DI ( Angular).
Sumário
Angular- — . — - , , , . . , , Angular, .
Caros leitores! Angular-?
