// stack web · front end · frameworks

Angular: aplicação montada pela CLI

No Angular você não monta o projeto peça por peça. Um comando de terminal cria a pasta inteira, instala as dependências, configura o compilador e deixa um servidor pronto pra subir. O que em outros frameworks são cinco decisões suas, aqui já vem decidido.

O que Angular resolve

Uma aplicação de verdade precisa de muito mais que componentes na tela. Precisa de rotas, formulários, chamadas HTTP, testes, build de produção e uma forma de organizar tudo isso em pastas que o próximo desenvolvedor entenda. Em JavaScript puro, cada uma dessas peças é uma escolha, e cada equipe escolhe diferente.

O resultado disso aparece quando você troca de projeto: o código anterior não se parece com o novo, e você reaprende a estrutura do zero. O Angular ataca esse ponto entregando as peças já escolhidas e encaixadas, com uma ferramenta de linha de comando que gera o esqueleto sempre igual. Você paga com liberdade e recebe previsibilidade.

Os conceitos que você precisa antes da primeira linha

Componente. A unidade de tudo. Segundo a documentação, todo componente tem três partes obrigatórias: uma classe TypeScript com o comportamento, um template HTML que controla o que vai pro DOM, e um seletor CSS que diz como usar o componente no HTML. Uma aplicação Angular é uma árvore de componentes.
Decorador @Component. A linha que fica em cima da classe e passa a configuração pro Angular: qual o seletor, onde está o template, onde está o CSS. Sem ela, a classe é só uma classe qualquer.
Template com sintaxe própria. O HTML do componente aceita expressões entre chaves duplas, como {{ title() }}. O Angular avalia a expressão e joga o resultado na tela.
Signal. Um valor que o Angular observa. Você lê chamando como função, e quando ele muda, todo template que dependia dele se atualiza. O projeto gerado pela CLI já vem com um signal no primeiro componente.
Angular CLI. O comando ng, que gera o projeto, sobe o servidor de desenvolvimento, compila pra produção e roda os testes. É por ele que você conversa com o framework no dia a dia.

O framework por dentro: TypeScript, componente e injeção

Angular é o framework que traz a disciplina das linguagens compiladas pro front end. A começar pela linguagem: TypeScript, o JavaScript com tipos estáticos. Declarar total: number e receber o erro no build, não no usuário, é metade da proposta de valor do framework.

Componente é uma classe com decorator: @Component em cima da classe diz qual seletor ela atende e qual template renderiza. Os dados da classe aparecem no template com {{ }}, evento se escuta com (click) e propriedade se passa com [valor].
Injeção de dependência é nativa: lógica compartilhada mora num service, e o componente pede a instância com inject() em vez de construir. É o padrão que torna o código testável e é assunto certo de entrevista.
O framework vem completo: roteador, formulários e cliente HTTP são módulos oficiais, não escolhas da comunidade. Menos decisão, mais convenção. A CLI da seção anterior gera tudo já encaixado.

import { Component, inject } from "@angular/core";

@Component({
  selector: "app-contador",
  template: `
    <button (click)="somar()">Total: {{ total }}</button>
  `,
})
export class ContadorComponent {
  total: number = 0;              // tipo estático
  somar(): void { this.total++; }
}

Classe, tipo, decorator, template: o Angular pede mais vocabulário de partida que React e Vue, e paga em padronização. Em time grande, todo projeto Angular se parece.

Hello world: sua primeira aplicação

Aqui você instala coisas de verdade. Reserve alguns minutos pro download das dependências na primeira vez.

Confira o Node. A documentação pede uma versão LTS ativa ou em manutenção.
```
node --version
```
Instale o Angular CLI de forma global, pra ter o comando ng em qualquer pasta.
```
npm install -g @angular/cli
```
Gere o projeto. A CLI faz algumas perguntas (formato de CSS, renderização no servidor, ferramenta de teste). Aceitar os padrões funciona.
```
ng new ola-angular
```
Entre na pasta que acabou de nascer e suba o servidor. O script start chama ng serve por baixo.
```
cd ola-angular
npm start
```
Abra http://localhost:4200/ no navegador.
Abra o arquivo src/app/app.ts. Ele tem umas dez linhas. Troque o texto de dentro do signal e salve o arquivo, sem fechar o terminal.
```
export class App {
  protected readonly title = signal('minha primeira app Angular');
}
```

A prova de que funcionou. No terminal, depois do npm start, aparecem duas linhas: Application bundle generation complete e o endereço Local: http://localhost:4200/. No navegador, a página mostra um título grande escrito Hello, ola-angular e a frase Congratulations! Your app is running. com links pra documentação. Repare que você não escreveu nenhuma dessas linhas: um comando só gerou o projeto inteiro e ele já sobe.

O segundo teste é o que importa. Ao salvar o app.ts com o texto novo, o título na tela troca sozinho, sem você recarregar a página. E pra ver o TypeScript trabalhando, acrescente na classe uma propriedade tipada como número recebendo um texto, protected readonly total: number = 'dez', e salve. O build para na hora com ERROR TS2322: Type 'string' is not assignable to type 'number'. Nada disso foi configurado por você. Veio ligado no ng new.

O que Angular não é

O erro mais comum de quem chega agora: procurar tutorial de Angular e cair em material de AngularJS. São dois projetos diferentes com nomes parecidos. AngularJS é a linha 1.x, feita em JavaScript, com $scope, ng-app e ng-controller espalhados no HTML. O Angular da versão 2 em diante foi reescrito do zero, em TypeScript, com componentes e CLI. O suporte ao AngularJS acabou em janeiro de 2022, segundo a documentação do próprio projeto.

Na prática, se o tutorial mostra $scope ou ng-controller, ele descreve outra ferramenta. Feche a aba. O mesmo vale pro segundo mito, o de que Angular obriga a declarar tudo dentro de um NgModule. A opção --standalone do ng new vem ligada por padrão, e o projeto que a CLI gera hoje não tem nenhum NgModule dentro.

Fontes

Angular, Installation, de onde saíram npm install -g @angular/cli, ng new, npm start e a porta 4200. Conferida em 15/08/2026.
Angular CLI, referência do ng new, onde está a opção --standalone com padrão true. Conferida em 15/08/2026.
Angular CLI, referência do ng serve, host e porta padrão. Conferida em 15/08/2026.
Angular, Components, as três partes obrigatórias de um componente. Conferida em 15/08/2026.
Angular, Build your first Angular app, o requisito de Node LTS. Conferida em 15/08/2026.
Documentação do AngularJS, status de suporte, com a frase "AngularJS support has officially ended as of January 2022". Conferida em 15/08/2026.

Este hello world foi executado em 15/08/2026 numa máquina Linux com Node 22.23.0 e npm 10.9.8. Rodamos npm install -g @angular/cli (instalou a versão 22.1.4), ng new ola-angular e npm start. O terminal fechou o build em 1,3 segundo e serviu em http://localhost:4200/. O navegador mostrou Hello, ola-angular com a frase de parabéns. Trocamos o texto do signal e o título mudou na tela sem recarregar. Ao acrescentar total: number = 'dez' na classe, o build falhou com TS2322: Type 'string' is not assignable to type 'number', apontando o arquivo e a linha.

Para continuar

Vale conhecer os dois vizinhos antes de escolher onde investir tempo. O React te dá a peça e deixa o resto por sua conta. O Vue fica no meio do caminho, com estrutura própria e menos cerimônia. Os três resolvem o mesmo problema por caminhos diferentes, e o mapa mostra o que vem depois do front end.

// conteúdo exclusivo

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.