AngularFront-endComo instalar o Angular CLI passo a passoGuia de início rápido Angular CLIInstalar Angular

Seu primeiro projeto com Angular

Rocketseat

Rocketseat

2 min de leitura
angular-cli-primeiro-projeto

Navegação Rápida:

Começar com Angular CLI é um ótimo caminho pra quem quer dar um passo consistente na jornada com Angular. A ferramenta agiliza tarefas como instalar Angular, criar componentes e organizar a estrutura de pastas com TypeScript. Tudo de um jeito que conversa bem com o ecossistema e a comunidade. Se liga: com um ambiente simples (Node.js + npm), você já sai gerando um app funcional, entendendo onde cada arquivo vive e como evoluir na prática. A ideia aqui é impulsionar quem desenvolve a dar o “primeiro commit” com confiança, montar o esqueleto do projeto e visualizar o fluxo de desenvolvimento do dia a dia.
Bora codar e validar rápido?

Preparando o ambiente

Node.js e npm e versões e verificação

Antes de qualquer comando, confirme se Node.js e npm estão no caminho do sistema. Abra o terminal integrado:
node -v
npm -v
  • Se os comandos falharem, instale a versão LTS do Node.js no site oficial.
  • Dica rápida: use o Visual Studio Code com extensões de TypeScript e Angular para uma experiência fluida no explorador de arquivos e na paleta de comandos.

instalando a Angular CLI (global)

A Angular CLI automatiza tarefas de criação, build e teste. Instale globalmente:
npm install -g @angular/cli
Se já tinha versões antigas, a instalação acima atualiza a CLI. Em caso de conflito, rode ng version para checar o estado geral (Angular CLI, Angular, Node, package manager).

Criando o primeiro projeto

Opções e boas práticas de nomeação

Gerar um projeto base com SCSS e roteamento ativado:
ng new primeiro-projeto --style=scss --routing
Boas práticas rápidas:
  • Use kebab-case em nomes de projetos (primeiro-projeto), componentes e arquivos.
  • Evite caracteres especiais ou espaços.
  • Mantenha o nome do app curto e descritivo, pois isso facilita importações e paths.

Rodando o servidor de desenvolvimento (ng serve)

Entre na pasta e suba o dev server:
cd primeiro-projeto && ng serve -o
O -o já abre no navegador. Hot reload ativado: salvou, atualizou.
🚀
Curtiu começar na prática? Dá uma olhada em 📄 7 Habilidades que Diferenciam um Dev Front-end pra impulsionar sua jornada.

Entendendo a estrutura de pastas

Primeiro componente e app.module.ts

Ao criar o projeto, a CLI monta a base do app. Dois cenários comuns:
  • Projeto com NgModule: você verá app.module.ts declarando o AppComponent e importando módulos importantes (como BrowserModule e, se ativou, o módulo de rotas).
  • Projeto standalone (padrão nas versões recentes): em vez de app.module.ts, a inicialização acontece em main.ts (e opcionalmente app.config.ts) usando bootstrapApplication(AppComponent).
Em ambos, o AppComponent é o coração inicial da tela. É nele que você vai praticar templates e data binding logo de cara.

Styles, assets e environments

  • assets/: imagens, ícones e arquivos estáticos.
  • environments/: configurações distintas por ambiente (dev, prod).
  • styles.(css/scss): estilos globais do projeto.
      • Organizar esses diretórios desde cedo ajuda a manter previsibilidade conforme a aplicação cresce no ecossistema de front-end.

Ajustes rápidos no template

Interpolação de dados

Vamos deixar o app com um “olá, comunidade” personalizado. No AppComponent, defina algumas propriedades:
// app.component.ts
export class AppComponent {
  title = 'primeiro-projeto';
  dev = 'Laís'; 
}
Agora, exiba no template com interpolação:
<!-- app.component.html -->
<h1>Bem-vinda, {{ dev }}! Bora codar nosso {{ title }}?</h1>
Conceito-chave: interpolação ({{ }}) é one-way do componente para o template. Ideal para exibir valores simples. Em breve, você verá outras formas de binding na prática.

Estilos globais e componentizados

Customize o visual:
  • Globais em styles.scss: úteis pra tokens, reset e utilitários.
  • Por componente: estilize próximo do template pra manter coesão de contexto.
Dica: padronize fontes, cores e espaçamentos desde cedo. Isso acelera a produtividade e reduz retrabalho nos próximos componentes e páginas.

Próximos passos

Parabéns! Você configurou o ambiente, instalou a Angular CLI, gerou um app com ng new, rodou o servidor com ng serve e entendeu onde vivem os principais arquivos. Esse primeiro passo destrava a jornada: a partir daqui, você vai evoluir o template com interpolação, bindings e organização de componentes.
No próximo post de Angular, seguimos para templates no Angular: interpolação e property binding, conectando tudo que você iniciou hoje com práticas de exibição dinâmica de dados no HTML. 💜

Referência rápida: comandos usados

npm install -g @angular/cli
ng new primeiro-projeto --style=scss --routing
cd primeiro-projeto && ng serve -o
Quer sedimentar hábitos que aceleram seu crescimento? 📄 Metodologias e Processos de Desenvolvimento fecha bem este conteúdo com práticas de equipe e fluxo que combinam com Angular no dia a dia.
Qual foi o maior desafio prático até aqui: instalar Angular, criar o projeto ou entender a estrutura?
👉
Conta pra gente na comunidade! Bora aprender juntos e ajudar a impulsionar quem está chegando.
 
Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.