Todos os dias, postamos conselhos, truques ou apenas alguma peça útil de nossa experiência com o Angular. Este movimento foi calorosamente recebido e apoiado pela comunidade de desenvolvedores.
Resolvi escrever um artigo sobre os dez truques mais curtidos e explicar os conceitos neles mostrados com mais detalhes.
Vamos começar!
Tokenize objetos globais!
O tweet mais popular fala sobre tokens DI de objetos globais.
No frontend, estamos acostumados com o fato de que existem muitos objetos no ambiente global. Usamos objetos como janela, documento, método de busca, localização e nunca esperamos que existam.
Mas, por exemplo, no Angular Universal ou no ambiente de teste no Jest, não há navegador, objeto de janela e DOM. E, ao passar essas entidades pelo aplicativo por meio de tokens, você nunca terá problemas para usá-las, substituí-las ou testar seu código.
Herdando de Observável ou Assunto
Conheço muitos desenvolvedores que criam bons serviços em seus aplicativos. Esses serviços fazem bem uma coisa. E, como usamos RxJS no ecossistema Angular, tais serviços podem conter apenas um campo com um Observável ou Assunto dentro deles para transformar os dados.
Tais situações podem ser simplificadas herdando serviços de Observable ou Assunto:
Valor de controle como ReplaySubject
Pode haver situações em que seja necessário inscrever-se em valueChanges do controle reativo, iniciando o fluxo a partir de seu valor atual. Agora você não precisa reinventar a roda, mas simplesmente adicione este invólucro a você:
Tornando o aplicativo melhor para telas de alto DPI
Você sabia que pode rastrear usuários facilmente com telas de alto DPI?
Além disso, você pode até fornecer elementos de mídia de resolução adequada para esses monitores usando a tag de mídia nativa e sem esforço adicional:
Não se esqueça dos canos
Pipes são uma ótima ferramenta para trabalhar no estilo da estrutura Angular. Eles nos permitem permanecer declarativos dentro de nossos modelos de componentes. É triste que alguns desenvolvedores Angular evitem criar seus próprios canais: com eles, você pode transformar dados de forma organizada em quase qualquer situação.
E aqui está um exemplo de um tubo universal para conversão de dados:
Faça sua caixa de banana
Esse recurso angular tem muitos nomes: banana-in-a-box, ligação bidirecional ou apenas entrada-saída. Esta abordagem é geralmente encontrada em formulários ao trabalhar com [(ngModel)]. Mas você sabe como implementar isso para seus próprios componentes?
RxJS - o mundo desconhecido
Sempre tento verificar todos os parâmetros e sobrecargas dos operadores RxJS que uso. Motivo: muitos deles têm opções ocultas, aprendendo que você pode escrever alguns fluxos mais rápido e fácil.
Além disso, também existem operadores impopulares. Eles raramente aparecem, mas podem resolver alguns problemas específicos em uma linha de código em vez de um fluxo enorme e complicado.
Por exemplo, uma dessas descobertas para mim foi a função de comparação no operador distintoUntilChanged:
E também houve um tweet muito popular sobre RxJS. Um pequeno truque para tornar seus componentes um pouco mais fáceis de expandir:
Ou o operador defaultIfEmpty, que permite adicionar uma lógica útil ao fluxo em uma linha de código:
Você pode até escrever sua própria alternativa ao ngFor
E uma última coisa: Angular tem uma sintaxe especial para seletores de diretiva como for ... of ... Você pode usá-lo para criar seu próprio ngFor para qualquer uma de suas tarefas.
Por exemplo, você pode fazer um ngFor rápido para iterar sobre o objeto Map. Ou uma forma simples de iterar sobre um índice de um número para outro:
Conclusão
O Angular é grande e tem muito mais recursos. Tenho várias ideias para novos truques e truques de nossas melhores práticas que pretendo compartilhar com a comunidade. Se você estiver interessado em novos tweets como este, siga-me no Twitter . E tenha um ótimo dia!