Pular para conteúdo

Aula 01: Introdução ao Angular e Ecossistema 🅰️

Nesta aula, vamos mergulhar no universo do Angular, entender o conceito de Single Page Applications (SPA) e preparar nosso ambiente para criar a primeira aplicação profissional.

🌐 O que é SPA (Single Page Application)?

Uma SPA é uma aplicação web que carrega apenas uma única página HTML e atualiza dinamicamente o conteúdo à medida que o usuário interage. Diferente dos sites tradicionais, não há recarregamento total da página (refresh).

Conceito Chave

Em uma SPA, a navegação entre visualizações ocorre no lado do cliente (browser), o que proporciona uma experiência de usuário muito mais fluida e rápida, similar a um aplicativo mobile.

🏛️ Arquitetura do Angular

O Angular segue uma arquitetura baseada em Componentes, onde cada parte da interface é uma peça independente.

graph TD
    A[Aplicação Angular] --> B[Componente Raiz]
    B --> C[Home Component]
    B --> D[Navbar Component]
    B --> E[Footer Component]
    C --> F[Card Component]
    C --> G[List Component]

🛠️ Preparando o Ambiente

Para começar, precisamos instalar o Node.js e o Angular CLI.

1. Instalação com Termynal

# Instalando o Angular CLI globalmente
$ npm install -g @angular/cli

# Verificando a instalação
$ ng version

🚀 Prática: Primeiro Projeto

Vamos criar e rodar nosso primeiro projeto Angular utilizando o terminal.

Dica de Produtividade

Use o comando ng new seguido pelo nome do projeto. O Angular CLI cuidará de toda a estrutura inicial para você.

# 1. Criar projeto
$ ng new meu-primeiro-angular

# 2. Entrar na pasta
$ cd meu-primeiro-angular

# 3. Executar o servidor
$ ng serve --open

📑 Estrutura do Projeto

Ao abrir o projeto no VS Code, você verá uma estrutura organizada:

  • src/: Onde fica o código fonte da aplicação.
  • app/: Contém os componentes e lógica principal.
  • assets/: Imagens e arquivos estáticos.
  • angular.json: Configurações globais do CLI.

Atenção

Não altere arquivos na pasta node_modules manualmente. Todas as dependências devem ser gerenciadas via package.json.

🏁 Mini-Projeto da Aula

Crie uma nova aplicação Angular chamada projeto-aula-01, execute-a no seu navegador e altere o texto "Hello" no arquivo app.component.html.