Introdução

Se você está começando com Angular, pode se sentir perdido ao configurar e usar conceitos como services. Services são usados para centralizar a lógica de negócios e compartilhar dados entre componentes. Neste artigo, vamos criar um service do zero, desde a criação do projeto Angular até a integração com componentes. Vamos explicar o que é o arquivo app.module.ts, onde encontrar os arquivos gerados, e como testar sua aplicação.

Passo a Passo Completo

1. Instalar o Angular CLI

Antes de tudo, precisamos do Angular CLI, uma ferramenta de linha de comando que facilita a criação e gerenciamento de projetos Angular.

  • No terminal, execute:
npm install -g @angular/cli
  • Verifique se foi instalado corretamente: 
ng version

2. Criar o Projeto Angular

Para criar o projeto, use o comando:

ng new meu-projeto

O CLI pedirá algumas configurações:

  • Would you like to add Angular routing?: Escolha Yes para habilitar o roteamento.
  • Which stylesheet format would you like to use?: Escolha CSS ou qualquer outro formato que prefira (SCSS, por exemplo).

Depois que o projeto for criado, entre no diretório:

cd meu-projeto

Inicie o servidor de desenvolvimento:

ng serve

Abra o navegador e acesse: http://localhost:4200. Você verá a página inicial do Angular.

3. Estrutura do Projeto Angular

Aqui estão os principais diretórios e arquivos que usaremos:

  • src/app/: Onde ficam os componentes, serviços e módulos.
  • app.module.ts: O “coração” da aplicação Angular. É o arquivo onde registramos componentes, serviços e módulos.
  • app.component.html: O arquivo principal onde testaremos as mudanças no frontend.

4. Criar o Service

Agora que temos o projeto, vamos criar um service usando o Angular CLI. No terminal, digite:

ng generate service services/produto

Este comando cria dois arquivos:

  • src/app/services/produto.service.ts: Contém a lógica do serviço.
  • src/app/services/produto.service.spec.ts: Arquivo de teste para o serviço.

5. Adicionar Funcionalidades ao Service

Abra o arquivo src/app/services/produto.service.ts. Atualize o serviço para gerenciar uma lista de produtos:

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

export interface Produto {
  id: number;
  nome: string;
  preco: number;
}


@Injectable({
  providedIn: 'root', // Disponível para toda a aplicação
})
export class ProdutoService {
  private produtos = [
    { id: 1, nome: 'Produto A', preco: 100 },
    { id: 2, nome: 'Produto B', preco: 200 },
  ];

  constructor() {}

  // Retorna a lista de produtos
  getProdutos() {
    return this.produtos;
  }

  // Adiciona um produto à lista
  addProduto(produto: { id: number; nome: string; preco: number }) {
    this.produtos.push(produto);
  }
}

6. Consumir o Service em um Componente

Agora, vamos usar o serviço em um componente.

Passo 1: Criar um Componente

No terminal, crie um componente chamado produto-list:

ng generate component produto-list

Este comando cria:

  • src/app/produto-list/produto-list.component.ts: Lógica do componente.
  • src/app/produto-list/produto-list.component.html: Template HTML do componente.
  • src/app/produto-list/produto-list.component.scss: Estilos do componente.
Passo 2: Modificar o Componente

Abra o arquivo src/app/produto-list/produto-list.component.ts e injete o serviço:

import { Component, OnInit } from '@angular/core';
import { Produto, ProdutoService } from '../services/produto.service';

@Component({
  selector: 'app-produto-list',
  templateUrl: './produto-list.component.html',
  styleUrls: ['./produto-list.component.scss'],
})
export class ProdutoListComponent implements OnInit {
  produtos: Produto[] = [];

  constructor(private produtoService: ProdutoService) {}

  ngOnInit(): void {
    // Obtém os produtos do serviço
    this.produtos = this.produtoService.getProdutos();
  }
}
Passo 3: Atualizar o Template

Abra o arquivo src/app/produto-list/produto-list.component.html e exiba a lista de produtos:

<h2>Lista de Produtos</h2>
<ul>
  <li *ngFor="let produto of produtos">
    {{ produto.nome }} - R$ {{ produto.preco }}
  </li>
</ul>

7. Registrar o Componente no app.module.ts

O arquivo app.module.ts é onde registramos os componentes e módulos usados na aplicação. Ele fica em src/app/app.module.ts.

Certifique-se de que o ProdutoListComponent está registrado:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProdutoListComponent } from './produto-list/produto-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ProdutoListComponent, // Componente adicionado aqui
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

8. Testar a Aplicação

  1. No arquivo src/app/app.component.html, substitua o conteúdo pelo seletor do componente ProdutoListComponent:
    • <app-produto-list></app-produto-list>
  2. No terminal, inicie o servidor novamente:
    • ng serve
  3. Acesse http://localhost:4200. Você verá a lista de produtos renderizada na página.
  4. Você irá visualizar a página listando os produtos.

Resumo

  1. Criamos um projeto Angular com o Angular CLI.
  2. Criamos um service para gerenciar uma lista de produtos.
  3. Injetamos o service em um componente para exibir os produtos.
  4. Testamos o funcionamento do componente integrando com o service.

Conclusão

Seguindo este guia, você pode criar services e componentes no Angular com confiança. Serviços são fundamentais para centralizar a lógica de negócios e garantir que a aplicação seja organizada e escalável. Se você é um desenvolvedor iniciante, agora tem as ferramentas para criar e testar seus próprios serviços no Angular.

Se gostou deste artigo ou tem dúvidas, deixe seu comentário! 🚀

Categorized in:

Angular,