Introdução

Instalação

Comece com Angular rapidamente com starters online ou localmente com seu terminal.

Experimente Online

Se você quer apenas experimentar o Angular no seu navegador sem configurar um projeto, você pode usar nossa sandbox online:

Configure um novo projeto localmente

Se você está iniciando um novo projeto, você provavelmente vai querer criar um projeto local para poder usar ferramentas como Git.

Pré-requisitos

Instruções

O guia a seguir vai orientá-lo na configuração de um projeto Angular local.

Instale o Angular CLI

Abra um terminal (se você está usando Visual Studio Code, você pode abrir um terminal integrado) e execute o seguinte comando:

npm

npm install -g @angular/cli

pnpm

pnpm install -g @angular/cli

yarn

yarn global add @angular/cli

bun

bun install -g @angular/cli

Se você está tendo problemas para executar este comando no Windows ou Unix, consulte a documentação do CLI para mais informações.

Crie um novo projeto

No seu terminal, execute o comando ng new do CLI com o nome desejado do projeto. Nos exemplos a seguir, usaremos o nome de projeto de exemplo my-first-angular-app.

ng new <project-name>

Você verá algumas opções de configuração para seu projeto. Use as teclas de seta e enter para navegar e selecionar as opções que você desejar.

Se você não tem preferências, apenas pressione a tecla enter para aceitar as opções padrão e continuar com a configuração.

Depois que você selecionar as opções de configuração e o CLI executar a configuração, você deverá ver a seguinte mensagem:

✔ Packages installed successfully.    Successfully initialized git.

Neste ponto, você está pronto para executar seu projeto localmente!

Executando seu novo projeto localmente

No seu terminal, mude para o seu novo projeto Angular.

cd my-first-angular-app

Todas as suas dependências devem estar instaladas neste ponto (o que você pode verificar checando a existência de uma pasta node_modules no seu projeto), então você pode iniciar seu projeto executando o comando:

npm start

Se tudo der certo, você deverá ver uma mensagem de confirmação similar no seu terminal:

Watch mode enabled. Watching for file changes...NOTE: Raw file sizes do not reflect development server per-request transformations.  ➜  Local:   http://localhost:4200/  ➜  press h + enter to show help

E agora você pode visitar o caminho em Local (por exemplo, http://localhost:4200) para ver sua aplicação. Bons códigos! 🎉

Usando IA para Desenvolvimento

Para começar a construir no seu IDE preferido com suporte a IA, confira as regras de prompt e boas práticas do Angular.

Próximos passos

Agora que você criou seu projeto Angular, você pode aprender mais sobre Angular no nosso guia Essentials ou escolher um tópico nos nossos guias detalhados!