Projeto Final do Curso de Angular

ng new projeto-final-angular
cd projeto-final-angular
ng serve
          

Copiar Código

// src/app/services/funcionario.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FuncionarioService {
  private apiUrl = 'https://node-vercel-app-rho.vercel.app/api/funcionarios';

  constructor(private http: HttpClient) {}

  getFuncionarios(): Observable {
    return this.http.get(this.apiUrl);
  }

  // Faça agora para os métodos PUT, POST e DELETE

}
          

Copiar Código

// src/app/components/funcionario-list/funcionario-list.component.ts
import { Component, OnInit } from '@angular/core';
import { FuncionarioService } from '../../services/funcionario.service';

@Component({
  selector: 'app-funcionario-list',
  templateUrl: './funcionario-list.component.html'
})
export class FuncionarioListComponent implements OnInit {
  funcionarios: any[] = [];
  funcionarioSelecionado: any;

  constructor(private service: FuncionarioService) {}

  ngOnInit(): void {
    this.service.getFuncionarios().subscribe(data => this.funcionarios = data);
  }

  selecionarFuncionario(func: any) {
    this.funcionarioSelecionado = func;
  }
}
          

// src/app/components/funcionario-detail/funcionario-detail.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-funcionario-detail',
  template: `
    

      
{{ funcionario.funcionario.nome }} {{ funcionario.funcionario.sobrenome }}
      
Salário: {{ funcionario.funcionario.salarioAtual | salario }}
    
  `
})
export class FuncionarioDetailComponent {
  @Input() funcionario: any;
}
          

        

          O roteamento no Angular permite navegar entre diferentes componentes
          sem recarregar a página. No nosso CRUD, vamos ter:
        
        

          
/funcionarios → Lista de funcionários
          
/funcionarios/novo → Formulário de criação
          
/funcionarios/:id → Detalhe/Edição
        
        

          

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FuncionarioListComponent } from './components/funcionario-list/funcionario-list.component';
import { FuncionarioFormComponent } from './components/funcionario-form/funcionario-form.component';
import { FuncionarioDetailComponent } from './components/funcionario-detail/funcionario-detail.component';

const routes: Routes = [
  //crie as rotas aqui
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
          
          Copiar Código
        
      
          

// src/app/components/funcionario-form-reactive/funcionario-form-reactive.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuncionarioService } from '../../services/funcionario.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-funcionario-form-reactive',
  templateUrl: './funcionario-form-reactive.component.html'
})
export class FuncionarioFormReactiveComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder, private service: FuncionarioService, private router: Router) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      nome: ['', Validators.required],
      sobrenome: ['', Validators.required],
      salarioAtual: [0, [Validators.required, Validators.min(1000)]]
      // faça os outros campos e seus validadores aqui
    });
  }

  salvarFuncionario() {
    if (this.form.valid) {
      this.service.addFuncionario(this.form.value).subscribe(() => {
        this.router.navigate(['/funcionarios']);
      });
    }
  }
}