Angular: Minhas anotações

Olá pessoal,

Estou compartilhando minhas anotações sobre Angular com vocês. Espero que isso ajude!

Comandos essenciais

• ng new: Cria um novo projeto Angular.
• ng serve: Inicia um servidor de desenvolvimento para o seu projeto Angular.
• ng build: Compila seu projeto Angular para produção.
• ng test: Executa os testes do seu projeto Angular.

SITES QUE VALEM A PENA VISITAR

• Angular Material é uma biblioteca de componentes UI para Angular. https://material.angular.io/
• Angular Flex Layout é uma biblioteca de layout para Angular. https://github.com/angular/flex-layout
• Angular CDK é uma biblioteca de componentes de acessibilidade para Angular. https://material.angular.io/cdk/categories

Componentes

Os componentes são a base do Angular. Eles são blocos de construção reutilizáveis que podem ser usados para criar a interface do usuário e a lógica da aplicação.

Um componente é composto por dois arquivos:

• Um arquivo .ts, que contém o código TypeScript do componente.
• Um arquivo .html, que contém o código HTML do componente.

Diretivas

As diretivas são uma forma de adicionar funcionalidades adicionais ao HTML. Elas podem ser usadas para manipular o DOM, exibir dados dinâmicos ou adicionar comportamentos personalizados.

Existem dois tipos de diretivas: diretivas de atributo e diretivas estruturais.

As diretivas de atributo são usadas para adicionar funcionalidades ao HTML usando atributos. Por exemplo, a diretiva ngFor pode ser usada para exibir uma lista de itens.

As diretivas estruturais são usadas para alterar a estrutura do DOM. Por exemplo, a diretiva ngIf pode ser usada para exibir ou ocultar um elemento do DOM com base em uma condição.

Pipes

Os pipes são uma forma de formatar dados antes de exibi-los. Eles podem ser usados para converter dados de um formato para outro, aplicar filtros ou realizar outras transformações.

Por exemplo, o pipe uppercase pode ser usado para exibir uma string em maiúsculas.

Injeção de dependências

A injeção de dependências é um padrão de projeto que permite que os componentes solicitem as dependências de que precisam. Isso torna o código mais modular e reutilizável.

Por exemplo, um componente pode solicitar uma instância de um serviço para acessar dados externos.

Testes

Os testes são essenciais para garantir a qualidade das aplicações. O Angular oferece um conjunto de ferramentas de teste integradas que facilitam a escrita de testes para as aplicações.

Exemplo de aplicação Angular

Aqui está um exemplo de uma aplicação Angular simples que exibe o título da aplicação:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'Minha primeira aplicação Angular';

}

O código acima define o componente AppComponent com o seguinte:

• O selector é o nome que será usado para referenciar o componente no HTML.
• O templateUrl é o caminho para o arquivo HTML que renderizará o componente.
• O styleUrls é um array de caminhos para os arquivos CSS que serão usados para estilizar o componente.

O código HTML do componente AppComponent é o seguinte:

<h1>{{ title }}</h1>

Este código exibirá o título da aplicação no navegador.

Para executar a aplicação, execute o seguinte comando no terminal:

ng serve

Este comando irá iniciar um servidor de desenvolvimento e abrirá a aplicação no navegador.

Espero que essas anotações tenham sido úteis.