Esta é a primeira lição do Curso de Angular Moderno , uma série de vídeos gratuita que ensina Angular da maneira como deve ser escrito hoje em dia. Se a última vez que você usou Angular seriamente foi há alguns anos, o Angular v21+ pode te surpreender. Esta não é apenas mais uma atualização de versão — ela muda a forma como você pensa sobre a construção de aplicações Angular.

Neste post, abordaremos:

• A quem se destina este curso?
• Conteúdo do curso
• A grande mudança: Angular prioriza sinais.
• O fluxo de controle integrado substitui as diretrizes estruturais.
• O Vitest agora é o executor de testes padrão.
• Por que o Angular v21+ parece diferente das versões anteriores?

A quem se destina este curso?

Este curso foi desenvolvido para três tipos de desenvolvedores:

• Desenvolvedores iniciantes em Angular que desejam aprendê-lo da maneira moderna desde o primeiro dia.
• Desenvolvedores que estão atualizando do Angular v16 para a v20 e percebem que o Angular repentinamente mudou sua aparência e comportamento.
• Desenvolvedores frontend vindos de React ou Vue que desejam um modelo mental reativo, claro e explícito

Independentemente do grupo em que você se encaixa, o Angular v21+ oferece uma maneira muito mais previsível e explícita de criar aplicativos — e este curso foi desenvolvido em torno dessa ideia.

Conteúdo deste curso

Este não é um curso de Angular tradicional. Construímos aplicações Angular da maneira que o Angular v21+ espera que você as escreva.

Ao longo do curso, você aprenderá:

• Gerenciamento de estado orientado a sinais — reatividade refinada com sinais graváveis, sinais computados e efeitos.
• Fluxo de controle integrado — usando @if, @for, e @switchdiretamente em modelos
• Componentes independentes — criando aplicações sem NgModules, com injeção de dependências moderna.
• Roteamento — guardas funcionais e carregamento lento
• Formulários e validação — usando padrões modernos do Angular
• Desempenho — vistas adiáveis ​​e hidratação
• Testes modernos — Vitest e Playwright
• Migração — migrando aplicativos Angular antigos para o Angular v21+

Ao final, você se sentirá confortável em criar, testar e implantar aplicativos Angular modernos.

A Grande Mudança: Angular Prioriza Sinais

A maior mudança no Angular v21+ é esta: o Angular agora prioriza os sinais.

Os sinais deixaram de ser um experimento ou um recurso opcional. Eles são a maneira padrão que o Angular espera que você use para gerenciar o estado da interface do usuário. Em vez de depender de mágicas de detecção de mudanças ou de usar o RxJS para tudo, o Angular agora oferece reatividade granular integrada diretamente ao framework.

const count = signal(0);
const doubled = computed(() => count() * 2);

Isso torna os aplicativos Angular mais fáceis de entender, mais fáceis de otimizar e muito mais fáceis de testar.

Fluxo de controle integrado (adeus *ngIf)

Outra grande mudança é a forma como os modelos funcionam.

No Angular v21, o fluxo de controle integrado é o padrão. Diretivas estruturais como `@control` *ngIfe `@control` *ngForsão substituídas por `@ @ifcontrol`, @for`@control` e ` @switch@control`.

@if (items().length) {
  <app-list [items]="items()" />
} @else {
  <p>No items</p>
}

O resultado são modelos mais claros, melhor desempenho e cobertura de modelos mais precisa nos testes. Essa mudança, por si só, é um dos motivos pelos quais muitos desenvolvedores notam falhas nos testes após a atualização para a versão 21 ou superior — e abordaremos como lidar com isso mais adiante no curso.

Teste: Vitest agora é o padrão

Os testes são outra área em que o Angular v21+ traça uma linha clara entre o Angular antigo e o moderno.

O Angular agora vem com o Vitest como executor de testes padrão, substituindo o Jasmine e o Karma. Isso significa testes mais rápidos, uma melhor experiência para o desenvolvedor e ferramentas modernas prontas para uso.

Mas isso também significa que o Angular é mais rigoroso quanto à cobertura de templates — especialmente ao usar a nova sintaxe de fluxo de controle.

Por que o Angular v21+ parece diferente?

Ao combinar tudo isso — sinais, fluxo de controle integrado e testes modernos — o Angular v21+ se diferencia bastante das versões anteriores.

Você escreve menos código repetitivo. Você pensa de forma mais explícita sobre o estado. E o Angular se torna mais previsível em vez de mágico.

Para desenvolvedores que vêm do React ou do Vue, isso geralmente faz com que o Angular pareça muito mais familiar — e muito mais fácil de entender.

Código-fonte

O código-fonte completo do curso está disponível no GitHub: loiane/modern-angular .

Próximo passo

Na próxima lição, configuraremos um ambiente de desenvolvimento Angular v21+ moderno e criaremos nosso primeiro aplicativo — totalmente independente e pronto para sinais.