Angular 20

1 - Introdução 2 - Conceitos 3 - Configurar ambiente 4 - Criar e executar projeto 5 - Componente 6 - Interpolação de texto 7 - Data bindings 8 - FormsModule 9 - Controle de fluxo 10 - Diretivas 11 - Diretiva ngStyle 12 - Diretiva ngClass 13 - Diretivas customizadas 14 - Formulário reativo 15 - Validar formulário reativo 16 - Bootstrap 17 - Projeto 18 - Estruturar formulário 19 - Estruturar tabela 20 - Visibilidade dos botões 21 - Formulário Reativo 22 - Validar formulário 23 - Modelo 24 - Vetor 25 - Cadastro e listagem 26 - Seleção 27 - Cancelar 28 - Alteração 29 - Remoção 30 - Considerações

4 - Criando componente

Olá pessoal, na quarta aula do treinamento de Angular 20, iremos criar e executar nosso primeiro projeto.

Siga os passos abaixo, você pode usar o Terminal do VSCode ou o Prompt de Comando/Terminal.

1º Abra o Prompt de Comando (Windows) ou Terminal (MacOS ou Linux).

Selecione um diretório qualquer para criar o projeto.

3º Utilize o seguinte comando: ng new curso-angular. O comando ng new serve para criarmos um novo projeto.

Agora precisamos realizar algumas configurações:

  • Time Zone: Não
  • Estilo do projeto: CSS
  • Server-side rendering: Não

4º Abra o Visual Studio Code (caso não esteja aberto), selecione o projeto gerado.

5º No VSCode abra o terminal e digite o comando: ng s, fazendo com que o projeto seja executado e disponbilizado no endereço: localhost:4200

Pronto! Agora você aprendeu a criar e executar projetos Angular, abaixo algumas dicas importantes.

Sobre o Time Zone, no Angular 20, a questão de gerenciamento de fusos horários (Time Zone) tem se tornado cada vez mais importante, especialmente com o aumento do uso de aplicativos globais que precisam lidar com horários de diferentes regiões. O Angular, por padrão, utiliza o Date do JavaScript para lidar com datas e horários, mas tem algumas melhorias e práticas recomendadas que ajudam a gerenciar fusos horários de forma mais eficiente, além de integrar com outras bibliotecas populares, como o Moment.js ou date-fns.

Sobre o server-side rendering, ele está disponível na criação de projetos a partir da versão 17 do Angular, algumas vantagens ao utilizar:

  • Garante uma melhor performance
  • Melhora o uso de SEO

Importante saber que utilizando o server-side rendering, o servidor terá mais uma funcionalidade para realizar, já que ele será responsável por renderizar os projetos em Angular. Vale a pena utilizar essa técnica, caso o navegador tenha dificuldades para renderizar a aplicação.

Vimos que para executar um projeto utilizamos o comando ng s, mas temos outras opções:

  • ng serve: maneira padrão para executar um projeto Angular
  • ng s: faz o mesmo que o ng serve, porém encurtamos o termo serve para s
  • ng server --open: assim que terminar de renderizar a aplicação, automaticamente o navegador é aberto
  • ng s -o: faz o mesmo que o ng server --open, porém encurtamos os termos server e --open

A estrutura de um projeto Angular é composta por:

  • .angular: Local com todas as informações do framework para realizar a execução de maneira correta
  • .vscode: Possui as configurações base do Visual Studio Code (talvez esteja oculta, não há problema, pois não iremos modificar)
  • node_modules: Estrutura de dependências do Node e do Vue
  • src: Estrutura de componentes da aplicação
  • .gitignore: Arquivos que não serão enviados para repositórios
  • angular.json: Arquivo contendo todas as dependências que o Angular utiliza
  • package-lock.json: Estrutura detalhada de pacotes do Node
  • package.json: Estrutura de pacotes utilizadas pelo Vue, além de informações básicas do projeto, como: nome do projeto e versão
  • README.md: Arquivo contendo as instruções de uso e estrutura do projeto
  • tsconfig.json: Configurações da linguagem TypeScript

Acompanhe abaixo nossa quart aula do treinamento de Angular 20 no YouTube: