Aula 1

O que é um Framework?

Um framework é uma estrutura que fornece ferramentas, funcionalidades e padrões pré-definidos para o desenvolvimento de software. Ele:

• Define a arquitetura básica da aplicação.
• Controla o fluxo do desenvolvimento, onde o desenvolvedor preenche lacunas.
• Oferece suporte integrado para resolver problemas comuns, como gerenciamento de estado, manipulação de dados e construção de interfaces.

O que é uma Biblioteca?

Uma biblioteca é um conjunto de funções ou métodos reutilizáveis que ajudam a resolver problemas específicos. Diferentemente de frameworks:

• O desenvolvedor tem controle total sobre o fluxo da aplicação.
• A biblioteca é chamada pelo desenvolvedor quando necessário.

Diferença entre Framework e Biblioteca

A principal diferença está no controle:

• Framework: controla o fluxo do programa e chama o código do desenvolvedor (inversão de controle).
• Biblioteca: o desenvolvedor controla o fluxo e chama a biblioteca quando necessário.

Por que o Angular é um Framework?

O Angular é considerado um framework porque:

• Ele estabelece um padrão para a estrutura da aplicação.
• Gerencia o ciclo de vida da aplicação, componentes e módulos.
• Inclui soluções integradas para tarefas comuns como roteamento, manipulação de formulários, e injeção de dependências.
• Define como o código é escrito e como as funcionalidades são implementadas, garantindo consistência no desenvolvimento.

Uma SPA (Single-Page Application) é um tipo de aplicação web onde:

• Todo o conteúdo necessário é carregado de uma só vez ou dinamicamente, sem recarregar a página inteira.
• A navegação entre diferentes "páginas" é simulada por meio de atualizações no DOM e no URL (geralmente usando APIs de roteamento).

Vantagens das SPAs:

• Navegação mais rápida e suave.
• Melhor experiência do usuário (UX).
• Requisições otimizadas ao servidor, enviando apenas os dados necessários.

Desvantagens das SPAs:

• Maior complexidade no desenvolvimento inicial.
• Exige mais esforço para SEO, pois o conteúdo não está pronto no HTML inicial.

Angular é uma plataforma de desenvolvimento para a criação de aplicações web modernas e dinâmicas. Desenvolvido e mantido pelo Google, é baseado em TypeScript e utiliza o padrão MVC (Model-View-Controller) para estruturar a aplicação. Algumas características do Angular incluem:

• Framework Frontend Completo: Suporte para criação de componentes, rotas, formulários e integração com APIs.
• Data Binding Bidirecional: Sincronização automática entre a interface do usuário e os dados do modelo.
• Injeção de Dependência: Sistema integrado para melhorar a modularidade e reutilização de código.
• Ferramentas Modernas: Uso de RxJS para programação reativa e suporte nativo a PWA (Progressive Web Applications).

1. Pré-requisitos

Certifique-se de que você tenha o seguinte instalado no seu sistema:

• Node.js: Angular utiliza o npm (gerenciador de pacotes do Node.js).
• Angular CLI: Interface de linha de comando para facilitar a criação e gerenciamento de projetos Angular.

2. Instalar Node.js

Baixe e instale o Node.js. Durante a instalação, o npm é incluído automaticamente.

node -v
npm -v

3. Instalar o Angular CLI

Use o npm para instalar o Angular CLI globalmente:

npm install -g @angular/cli

Verifique a instalação:

ng version

4. Criar um Novo Projeto Angular

Crie um projeto com o Angular CLI:

ng new nome-do-projeto --standalone false

Escolha as opções conforme a imagem:

Navegue até a pasta do projeto:

cd nome-do-projeto

5. Executar o Servidor de Desenvolvimento

Inicie o servidor para ver a aplicação no navegador:

ng serve

Por padrão, o servidor estará disponível em http://localhost:4200.

6. Estrutura Básica do Projeto

Após a criação, a estrutura do projeto será algo como:

    src/
     ├── app/
     │    ├── app.component.html   // Arquivo HTML principal
     │    ├── app.component.css    // Estilos do componente principal
     │    ├── app.component.ts     // Lógica do componente principal
     │    └── app.module.ts        // Módulo principal da aplicação
     ├── assets/                   // Recursos estáticos
     ├── environments/             // Configurações de ambiente
     ├── index.html                // Ponto de entrada do HTML
     └── main.ts                   // Ponto de entrada do TypeScript
    

7. Adicionar Componentes

Crie novos componentes para a sua aplicação:

ng generate component nome-do-componente
# ou
ng g c nome-do-componente

8. Colocar os seus componentes na aplicação pai (AppComponent)

Delete todo códito dentro do app.component.html e coloque o seguinte código:

<app-nome-do-componente></app-nome-do-componente>

O Angular é projetado para resolver problemas comuns no desenvolvimento web moderno. Entre os seus principais objetivos e tarefas estão:

• Criação de SPAs: Angular é ideal para aplicações de página única.
• Organização do Código: Promove modularidade usando componentes e módulos.
• Data Binding: Sincroniza automaticamente os dados entre a interface do usuário e o modelo.
• Desempenho Otimizado: Inclui técnicas como divisão de código e carregamento sob demanda.
• Reutilização de Código: Facilita a criação de componentes reutilizáveis.
• Testabilidade: Oferece ferramentas integradas para realizar testes unitários e de integração.
• Programação Reativa: Usa RxJS para lidar com eventos e estados assíncronos.