A versão mais recente do Angular foi lançada em novembro. Minko Gechev resume os novos recursos mais importantes em seu anúncio de lançamento.

Neste artigo, compartilho recursos que ensinarão como funcionam esses novos recursos do Angular:

• APIs independentes (agora estão estáveis)
• API autônoma do roteador que pode ser abalada em árvore e protetores de roteador funcionais
• API autônoma HttpClient que pode ser sacudida em árvore
• API de composição de diretivas
• diretiva de imagem

APIs independentes

A equipe Angular introduziu APIs autônomas no Angular v14 como um recurso de visualização do desenvolvedor. No Angular v15, eles não estão mais na visualização do desenvolvedor e fazem parte da superfície estável da API.

Componentes, diretivas e pipes agora podem ser marcados como autônomos: true. Classes angulares marcadas como autônomas não precisam ser declaradas em um NgModule.

O guia “Introdução aos componentes autônomos” na documentação do Angular explica como criar e usar componentes autônomos.

API autônoma do roteador que pode ser abalada em árvore e protetores de roteador funcionais

Andrew Scott explica como podemos criar roteadores sem um RouterModulee como usar protetores de roteador funcionais:

Para obter detalhes adicionais sobre como reduzir o tamanho do pacote com roteadores e componentes autônomos, leia o artigo de Kevin Kreuzer :

API autônoma HttpClient que pode ser sacudida em árvore

Agora podemos usar a API do cliente HTTP sem o arquivo HttpClientModule. Netanel Basal nos mostra como aplicar esse novo recurso e demonstra como podemos definir interceptores em módulos carregados preguiçosamente:

API de composição de diretivas

Da documentação oficial:

As diretivas angulares oferecem uma ótima maneira de encapsular comportamentos reutilizáveis ​​— as diretivas podem aplicar atributos, classes CSS e ouvintes de eventos a um elemento.

A API de composição de diretivas permite aplicar diretivas ao elemento host de um componente de dentro do componente.

Cédric Exbrayat explica por que precisamos dessa nova API:

Henrique Custódia ilustra com um ótimo exemplo como funciona a API de composição de diretivas:

Angular 15: usando a API de composição de diretivas

diretiva de imagem

O guia "Introdução ao NgOptimizedImage" na documentação do Angular explica como a nova NgOptimizedImagediretiva autônoma nos ajuda a adotar práticas recomendadas de otimização de desempenho para carregar imagens.

Fábio Englert Moutinho testa a NgOptimizedImagediretriz em um aplicativo de e-commerce de exemplo e obtém pontuações do Lighthouse até 50% melhores:

➕ Você viu algum outro recurso que eu deveria adicionar a este Guia de estudo do Angular 15? Por favor, envie-me para que eu possa apresentá-lo no artigo!

‍Sobre o autor

Meu nome é Gergely Szerovay , trabalho como líder de capítulo de desenvolvimento de front-end. Ensinar (e aprender) Angular é uma das minhas paixões. Eu consumo conteúdo relacionado ao Angular diariamente - artigos, podcasts, palestras em conferências, o que você quiser.

Se você estiver interessado em minha coleção mensal de ótimos recursos Angular, assine minha publicação chamada Angular Addicts. Você pode ler as edições anteriores aqui .

E se você viu um bom artigo, tweet ou outro recurso relacionado ao Angular ultimamente, por favor, deixe-me saber aqui nos comentários ou envie-me um DM no Twitter ! Posso apresentá-lo na próxima edição da Angular Addicts!

Além disso, informe-me em quais outros tópicos do Angular você está interessado. Tenho muitos rascunhos de artigos aqui no Medium esperando para serem publicados.

Siga-me no Medium , Twitter ou LinkedIn para saber mais sobre o Angular!