Acredita-se que no desenvolvimento front-end, o equivalente a "
Hello world " seja um aplicativo - uma lista de tarefas. Sim, isso permite que você cubra o aspecto CRUD da criação de um aplicativo, mas os recursos da estrutura ou biblioteca usada são frequentemente afetados superficialmente.
Angular está constantemente mudando e atualizando, mas algo permanece o mesmo. Vou falar sobre os conceitos angulares básicos que você precisa aprender se quiser usar essa estrutura JavaScript da melhor maneira.
Há muito o que aprender a trabalhar com a Angular, e os recém-chegados geralmente ficam paralisados no nível de entrada apenas porque não sabem onde e o que procurar. Por isso, escrevi um guia (que inclui um breve resumo dos conceitos básicos do Angular), que eu mesmo seria muito útil quando comecei a trabalhar com o Angular 2+.
Traduzido para Alconost1. A arquitetura modular do Angular
Teoricamente, você pode colocar todo o código Angular em uma página e em uma grande função, mas isso não é recomendado: essa é uma maneira ineficiente de estruturar o código que impede que você revele o objetivo do Angular.
Parte da arquitetura dessa estrutura é o uso ativo do conceito de módulos, que são códigos com um único objetivo. Um aplicativo Angular consiste basicamente em módulos, alguns dos quais isolados, enquanto outros são comuns.
Existem várias maneiras de organizar os módulos em um aplicativo. Ao explorar várias estruturas arquitetônicas, você pode determinar como o aplicativo será escalado à medida que se desenvolver e também aprender como isolar o código e reduzir a interdependência.
O que fazer no google:- Padrões arquitetônicos angulares,
- Arquitetura de aplicativo escalável angular.
2. Fluxo de dados unidirecional e imutabilidade
A ligação bilateral conquistou o coração de muitos desenvolvedores de front-end nos dias do Angular 1 - na verdade, esse era um dos principais recursos distintivos dessa estrutura. No entanto, conforme o aplicativo se desenvolveu, essa abordagem começou a criar problemas em termos de desempenho.
Verificou-se que a ligação bidirecional não é necessária em todos os lugares
O Angular 2+ ainda torna possível implementá-lo, mas para isso ele precisa ser explicitamente solicitado - portanto, o desenvolvedor precisa pensar nos fluxos de dados e em sua direção. Além disso, isso permite que o aplicativo manipule os dados com mais flexibilidade, pois você pode especificar como transferi-los.
O que fazer no google:- trabalhar com fluxos de dados em Angular,
- fluxo unidirecional em Angular,
- benefícios do encaixe unidirecional.
3. Diretivas atributivas e estruturais
Uma diretiva é uma extensão do HTML com elementos adicionais. As diretivas de atributo permitem alterar as propriedades de um elemento. As diretivas estruturais alteram o layout adicionando ou removendo elementos DOM.
Por exemplo,
ngSwitch e
ngIf são diretivas estruturais: eles avaliam parâmetros e determinam se partes específicas do DOM devem existir.
Diretivas de atributo são comportamentos personalizados anexados a um elemento, componente ou outras diretivas.
Ao aprender a usar as diretrizes desses dois tipos, você pode expandir os recursos de seu próprio aplicativo e reduzir a duplicação de código no projeto. As diretivas de atributo também ajudam a centralizar o comportamento específico usado em várias partes do aplicativo.
O que fazer no google:- Diretivas de atributo angular,
- Diretivas estruturais angulares,
- Modelos de diretiva estrutural angular.
4. Manipuladores de ciclo de vida de componentes
Cada aplicativo tem um ciclo de vida que determina como os objetos são criados, processados e excluídos. Na estrutura angular, o ciclo de vida do componente se parece com isso:
→ → → → → DOM
Temos a oportunidade de processar os pontos principais deste ciclo e focar em pontos específicos no tempo ou nos eventos. Isso permite criar respostas apropriadas e personalizar o comportamento de acordo com os vários estágios do componente.
Por exemplo, se você deseja carregar alguns dados antes de renderizar a página, isso pode ser feito via
ngOnInit() . E se você precisar se desconectar do banco de dados, isso pode ser feito no momento de
ngOnDestroy() .
O que fazer no google:- manipuladores de ciclo de vida de componentes em Angular;
- ciclo de vida dos componentes.
5. Serviços observados e HTTP
Os serviços observados não são um recurso exclusivo do Angular, mas algo do ES7. No entanto, essa funcionalidade foi implementada dentro da estrutura da estrutura, e as idéias correspondentes também são bem transferidas para o React, o Vue e outras bibliotecas e estruturas relacionadas ao JavaScript.
O que fazer no google:- Padrões de observadores JavaScript
- objetos observados e HTTP em Angular,
- Objetos observados no ES7.
6. A arquitetura de componentes inteligentes e estúpidos
Muitas vezes, ao escrever aplicativos no Angular, tudo é despejado em um componente, mas essa não é a melhor abordagem. O conceito de componentes inteligentes e burros no Angular definitivamente merece mais atenção, especialmente entre iniciantes.
O papel do componente no plano geral do aplicativo é determinado por ser "estúpido" ou "inteligente". Componentes "tolos" geralmente não rastreiam o estado e seu comportamento é fácil de prever e entender - se possível, os componentes devem ser feitos dessa maneira.
Componentes inteligentes são mais difíceis de entender porque envolvem entradas e saídas. Para tirar o máximo proveito dos recursos do Angular, você deve entender a arquitetura dos componentes inteligentes e estúpidos: dessa forma, você dominará padrões e maneiras de pensar que o ajudarão a escrever código mais produtivo e a criar a interação correta no aplicativo.
O que fazer no google:- componentes angulares inteligentes e estúpidos,
- componentes apátridas estúpidos
- componentes de apresentação
- componentes angulares inteligentes.
7. Estruturas de aplicação padrão
A capacidade de trabalhar com a linha de comando na determinação da estrutura do aplicativo é útil, mas não é uma panacéia. Criar um aplicativo no Angular (e qualquer aplicativo em geral) é semelhante à construção de uma casa: existem processos bem estabelecidos que foram otimizados pela comunidade por muitos anos e permitem que você escreva aplicativos mais eficientes e produtivos.
E Angular aqui não é exceção.
A maioria das reclamações sobre o Angular pode ser ouvida por quem tenta estudá-lo sem entender a estrutura. Uma sintaxe clara e concisa é capturada em tempo real, no entanto, para entender a estrutura do aplicativo, você precisa conhecer o contexto, os requisitos e como tudo se encaixa no nível conceitual e prático. Depois de estudar as várias estruturas possíveis das aplicações Angular e as recomendações para sua aplicação, você terá uma idéia de como escrever suas próprias.
O que fazer no google:- Aplicativos angulares com um repositório,
- Bibliotecas angulares, pacotes angulares,
- Pacotes angulares
- Micro-aplicações angulares.
- monorepositórios.
8. Sintaxe para ligação de modelos
O destaque da estrutura JavaScript em questão é a ligação e também se tornou um dos motivos de sua criação. A ligação de modelo combina HTML estático e JavaScript, e a sintaxe de ligação de modelo da Angular atua como um intermediário entre as duas tecnologias.
Se você aprender a usar esses recursos de maneira adequada e oportuna, transformar uma página estática em algo interativo se tornará muito mais fácil e agradável. Explore vários cenários de ligação: associação de propriedades, associação de eventos, interpolação e associação bidirecional.
O que fazer no google:- ligação a propriedades em Angular,
- ligação de evento em Angular,
- ligação bidirecional em Angular, interpolação em Angular,
- passando constantes para Angular.
9. Módulos de roteamento e função
No caso do Angular, os módulos funcionais geralmente são subestimados, embora essa seja realmente uma ótima maneira de otimizar e restringir um conjunto de requisitos de negócios. Eles ajudam a diferenciar responsabilidades e a evitar a poluição do código a longo prazo.
Existem cinco tipos de módulos funcionais (domínio, roteável, roteamento, serviço e widget) e cada um possui seu próprio conjunto de recursos. Ao aprender como usar módulos funcionais em combinação com o roteamento, você pode criar conjuntos separados de funções e fornecer uma separação compreensível e conveniente dos recursos do aplicativo.
O que fazer no google:- Módulos de função angular,
- estruturas funcionais comuns em Angular,
- provedores de módulos de função.
- carregamento lento com roteamento e módulos de função.
10. Formulários e validação de dados (formulários reativos e validadores)
Os formulários são parte integrante do desenvolvimento front-end.
E onde existem formulários, há verificação de dados.
Você pode criar formulários inteligentes que funcionam bem com dados na estrutura Angular de várias maneiras, e os formulários reativos são a abordagem mais comum. No entanto, existem outras opções, nomeadamente modelos e validadores personalizados.
Ao entender como validadores e CSS funcionam, você pode acelerar seu fluxo de trabalho e preparar seu aplicativo para tratamento de erros.
O que fazer no google:- validação de formulário em Angular,
- validação de dados baseada em modelo,
- validação de formas reativas,
- validadores síncronos e assíncronos em Angular,
- validadores embutidos
- validadores personalizados em Angular,
- campos de verificação cruzada.
11. Projeção de conteúdo
A estrutura Angular tem um conceito como projetar conteúdo, o que permite transferir efetivamente dados dos componentes pai para os filhos. No início, isso pode parecer complicado, mas, de fato, nesse caso, as visualizações são colocadas dentro de outras visualizações - isso cria a visualização principal.
Freqüentemente, a projeção do conteúdo é entendida superficialmente: como se estivéssemos incorporando visões filho na visão pai. No entanto, para uma compreensão mais profunda da estrutura, é necessário entender como os dados são transferidos entre diferentes representações - é aqui que o conhecimento do conceito de projetar conteúdo é útil.
Depois de estudar a projeção do conteúdo, você aprenderá a entender o fluxo de dados do aplicativo e a determinar onde ele sofre alterações.
O que fazer no google:- projetar conteúdo em Angular,
- relacionamento das visualizações pai e filho em Angular,
- relacionamentos entre dados em vistas angulares.
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, na qual os componentes são sempre verificados. Não há nada de errado em usar o comportamento padrão; no entanto, essa detecção de alterações pode ser ineficaz.
Para pequenas aplicações, velocidade e desempenho permanecem satisfatórios. Porém, assim que o aplicativo atinge um determinado tamanho, o lançamento de alguns elementos diminui, principalmente em navegadores mais antigos.
A
onPush detecção de alterações
onPush acelera significativamente o aplicativo porque não depende de verificação constante, mas depende da operação de gatilhos específicos.
O que fazer no google:- detectar alterações onPush em Angular.
13. Defensores de rota, carregamento pré e atrasado
Se o aplicativo tiver um login de conta, você precisará de defensores de rotas. A linha inferior é para proteger certas visualizações da visualização não autorizada, o que em muitos casos é um requisito obrigatório. Os defensores de rota agem como a interface entre o roteador e a rota solicitada: eles determinam se devem ou não permitir o acesso a uma rota específica. Este é um tópico bastante extenso: por exemplo, isso inclui a questão de tomar decisões sobre roteamento com base no período de validade de tokens, autenticação de funções de usuário e proteção de rotas.
Para acelerar o carregamento do aplicativo e facilitar o trabalho com ele, o carregamento preliminar e atrasado também ajudará. Também deve ser observado que essas ferramentas não apenas permitem decidir se é necessário fazer o download de um conjunto específico de imagens: elas ajudam a melhorar a arquitetura associada e a carregar diferentes partes do aplicativo que podem estar em diferentes domínios e áreas de definição.
O que fazer no google:- guardas de rota em Angular,
- padrões de autenticação em Angular,
- Módulos angulares de pré e pós-carregamento
- modelos de rota segura em Angular.
14. Canais personalizados
Os canais de estrutura angular simplificam bastante a formatação dos dados. Muitos tipos de formatação (datas, moedas, porcentagens e letras maiúsculas e minúsculas) já são cobertos por canais pré-configurados e prontos para uso, mas você provavelmente precisará de outra coisa.
E aqui os canais não padronizados são úteis, o que facilita a criação de seus próprios filtros e a conversão de formatos de dados da maneira desejada. É bem fácil - tente.
O que fazer no google:- canais não padrão em Angular.
15. Decoradores @ViewChild e @ContentChild
ViewChild e
ContentChild são usados para se comunicar entre componentes. A essência da estrutura angular é que vários componentes montados juntos, como um mosaico, são usados. No entanto, esse design não pode fazer nada se suas peças estiverem isoladas uma da outra.
Para isso, são necessários os decoradores
ViewChild e
ContentChild , depois de aprenderem a usá-los, você poderá acessar os componentes relacionados, o que simplifica a tarefa de troca de dados e também permite a transferência de dados e eventos causados por componentes relacionados.
O que fazer no google:- Decoradores angulares,
ViewChild e ContentChild em Angular,
- troca de dados entre componentes em Angular.
16. Componentes dinâmicos e "ng-template"
Na estrutura Angular, os aplicativos são construídos com base em componentes. No entanto, nem todos os componentes são estáticos - alguns devem ser criados em tempo real, não pré-compilados.
Os componentes criados pelo aplicativo em tempo real são chamados dinâmicos. Os componentes estáticos assumem certa imutabilidade: esperamos certos valores na entrada e na saída e o comportamento previsível correspondente.
Componentes dinâmicos são renderizados conforme necessário. É conveniente usar ao criar aplicativos que podem ouvir fontes externas, alterar seu estado ou representar reações às ações que ocorreram na página.
O que fazer no google:- componentes dinâmicos em Angular,
- componentes dinâmicos e ng-template.
17. Host , Vinculação de Host e “exportAs”
@Host ,
@HostBinding são decoradores e
exportAs é uma propriedade do decorador @Directive. Seu objetivo é estender o efeito dos parâmetros aos quais eles estão anexados. Eles também oferecem a capacidade de criar pequenos modelos de exportação para uso no aplicativo.
Se o exposto acima parece incompreensível, você deve estudar as diretrizes angulares e entender sua finalidade.
@Host ,
@HostBinding e
exportAs são elementos importantes do conceito de diretivas.
O que fazer no google:- Padrões de uso de diretivas angulares
@Host , @HostBinding e exportAs em Angular.
18. Gerenciamento de estado usando NgRx
O estado do aplicativo finalmente determina os dados exibidos para o usuário. E se o aplicativo é um monte de espaguete, há uma chance de que toda a estrutura de dados se torne não confiável e, no caso de qualquer alteração, travar.
Entender por que os estados são necessários no Angular permite entender como e por que os dados se comportam dessa maneira e não de outra forma.
A estrutura Angular possui seu próprio sistema de gerenciamento de estado, mas o NgRx faz um trabalho muito melhor de centralizar estados e dados associados. Os dados podem ser perdidos na cadeia de relacionamento pai-filho e o NgRx cria um repositório centralizado para eles e elimina esse problema.
O que fazer no google:- NgRx angular,
- Princípios de fluxo e redux
- Princípios angulares de gerenciamento de estado.
19. Zonas e injeção de dependência
A injeção de dependência geralmente é um conceito em larga escala; portanto, se você não estiver bem no tópico, deve entender mais. No Angular, existem várias maneiras de injetar cuidadosamente dependências, mas isso é feito principalmente usando o construtor. Portanto, você não pode baixar tudo em uma linha, mas importar o mais necessário - e, portanto, aumentar a eficiência do aplicativo.
Como a injeção de dependência, havia "zonas" antes do Angular. Eles permitem que o aplicativo detecte tarefas assíncronas. Isso é importante porque tarefas assíncronas podem alterar o estado interno do aplicativo - e, portanto, a apresentação. As zonas facilitam a detecção de alterações.
O que fazer no google:- zonas em Angular,
- injeção de dependência
- DI angular.
Conclusão
Angular é um tópico abrangente para explorar. Ao criar aplicativos nessa estrutura, você pode aprender muito, mas às vezes não está totalmente claro o que procurar e onde cavar. No início, pode ser difícil navegar em um ambiente desconhecido. Esperamos que este breve tutorial tenha fornecido algumas dicas sobre conceitos que vão além dos tutoriais angulares usuais e permitiu uma visão mais ampla dessa estrutura como um todo.
Sobre o tradutorO artigo foi traduzido por Alconost.
A Alconost
localiza jogos ,
aplicativos e sites em 70 idiomas. Tradutores em idioma nativo, teste linguístico, plataforma em nuvem com API, localização contínua, gerentes de projeto 24/7, qualquer formato de recursos de string.
Também criamos
vídeos de publicidade e treinamento - para sites que vendem, imagem, publicidade, treinamento, teasers, exploradores, trailers do Google Play e da App Store.
→
Leia mais