RETO: Tomando la aplicación realizada anteriormente, agregar la parte cliente y usar los

servicios:sudo npm install -g @angular/cli

Configurar proyecto Angular 10

Abramos cmd y usemos Angular CLI para crear un nuevo Proyecto Angular como el
siguiente comando:
ng new StudentsClient
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
También necesitamos generar algunos componentes y servicios:
- Ir a la carpeta del proyecto: cd StudentsClient
- Y dentro del proyecto:
ng g s services/student

ng g c components/add-student
ng g c components/student-details
ng g c components/students-list
Ahora puede ver que la estructura de directorio de nuestro proyecto se ve así.

Imagen de proyecto
Déjame explicarte brevemente.
- Hay 3 componentes: students-list, students-details, add-student.
- student.service tiene métodos para enviar solicitudes HTTP a las Apis.
- app-routing.module.ts define rutas para cada componente.
- el appcomponent contiene la vista del enrutador y la barra de navegación.
- app.module.ts declara los componentes de Angular e importa los módulos
necesarios.

Configurar el módulo de la aplicación

Abiertos app.module.ts y de importación FormsModule, HttpClientModule

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [ ... ],
imports: [
...
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Definir rutas para el módulo de enrutamiento de

aplicaciones angular
Hay 3 rutas principales:
- /students para students-listcomponente
- /students/:id para student-details componente
- /add para add-student componente
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentsListComponent } from './components/students-list/students-
list.component';
import { StudentDetailsComponent } from './components/student-
details/student-details.component';
import { AddStudentComponent } from './components/add-student/add-
student.component';

const routes: Routes = [

{ path: '', redirectTo: 'students', pathMatch: 'full' },
{ path: 'students', component: StudentsListComponent },
{ path: 'students/:id', component: StudentDetailsComponent },
{ path: 'add', component: AddStudentComponent }
];

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

Agregue Navbar y Router View a la aplicación Angular

10 CRUD
Vamos abierta src / app.component.html , este Appcomponente es el contenedor
raíz de nuestra aplicación, que contendrá un navelemento.

<div>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a href="#" class="navbar-brand">AppName</a>
<div class="navbar-nav mr-auto">
<li class="nav-item">
<a routerLink="students" class="nav-link">Students</a>
</li>
<li class="nav-item">
 <a routerLink="add" class="nav-link">Add</a>
</li>
</div>
</nav>

<div class="container mt-3">

<router-outlet></router-outlet>
</div>
</div>

Crear servicio de datos

Este servicio utilizará Angular HTTPClientpara enviar solicitudes HTTP.
Puede ver que sus funciones incluyen operaciones CRUD y método de búsqueda.
services / student.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseUrl = 'http://localhost:8080/api/students';

@Injectable({
providedIn: 'root'
})
export class StudentService {

constructor(private http: HttpClient) { }

getAll(): Observable<any> {
return this.http.get(baseUrl);
}

get(id): Observable<any> {
return this.http.get(`${baseUrl}/${id}`);
}
 create(data): Observable<any> {
return this.http.post(baseUrl, data);
}

update(id, data): Observable<any> {

return this.http.put(`${baseUrl}/${id}`, data);
}

delete(id): Observable<any> {
return this.http.delete(`${baseUrl}/${id}`);
}

deleteAll(): Observable<any> {
return this.http.delete(baseUrl);
}

findByTitle(title): Observable<any> {
return this.http.get(`${baseUrl}?title=${title}`);
}
}

Crear componentes angulares

Como ha sabido antes, hay 3 componentes correspondientes a 3 rutas definidas
en AppRoutingModule.

Agregar nuevo componente de artículo

Este componente tiene un formulario para enviar un nuevo student con 2
campos: title& description. Llama al StudentService.create()método.
componentes / add-student / add-student.component.ts
import { Component, OnInit } from '@angular/core';
import { StudentService } from 'src/app/services/student.service';

@Component({
selector: 'app-add-student',
templateUrl: './add-student.component.html',
 styleUrls: ['./add-student.component.css']
})
export class AddStudentComponent implements OnInit {
student = {
title: '',
description: '',
published: false
};
submitted = false;

constructor(private studentService: StudentService) { }

ngOnInit(): void {
}

saveStudent(): void {
const data = {
title: this.student.title,
description: this.student.description
};

this.studentService.create(data)
.subscribe(
response => {
console.log(response);
this.submitted = true;
},
error => {
console.log(error);
});
}

newStudent(): void {
this.submitted = false;
this.student = {
 title: '',
description: '',
published: false
};
}

}
componentes / add-student / add-student.component.html
<div style="width: 400px; margin: auto;">
<div class="submit-form">
<div *ngIf="!submitted">
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
class="form-control"
id="title"
required
[(ngModel)]="student.title"
name="title"
/>
</div>

<div class="form-group">
<label for="description">Description</label>
<input
class="form-control"
id="description"
required
[(ngModel)]="student.description"
name="description"
/>
</div>

<button (click)="saveStudent()" class="btn btn-

success">Submit</button>
 </div>

<div *ngIf="submitted">
<h4>You submitted successfully!</h4>
<button class="btn btn-success" (click)="newStudent()">Add</button>
</div>
</div>
</div>

Lista de elementos Componente

Este componente llama a 3 StudentService métodos:

 getAll()
 deleteAll()
 findByTitle()

componentes / lista -de -studentes / lista -de -studentes.component.ts
import { Component, OnInit } from '@angular/core';
import { StudentService } from 'src/app/services/student.service';

@Component({
selector: 'app-students-list',
templateUrl: './students-list.component.html',
styleUrls: ['./students-list.component.css']
})
export class StudentsListComponent implements OnInit {

students: any;
currentStudent = null;
currentIndex = -1;
title = '';

constructor(private studentService: StudentService) { }

ngOnInit(): void {
this.retrieveStudents();
}
retrieveStudents(): void {
this.studentService.getAll()
.subscribe(
data => {
this.students = data;
console.log(data);
},
error => {
console.log(error);
});
}

refreshList(): void {
this.retrieveStudents();
this.currentStudent = null;
this.currentIndex = -1;
}

setActiveStudent(student, index): void {

this.currentStudent = student;
this.currentIndex = index;
}

removeAllStudents(): void {
this.studentService.deleteAll()
.subscribe(
response => {
console.log(response);
this.retrieveStudents();
},
error => {
console.log(error);
});
}
 searchTitle(): void {
this.studentService.findByTitle(this.title)
.subscribe(
data => {
this.students = data;
console.log(data);
},
error => {
console.log(error);
});
}
}
components / students-list / students-list.component.html
<div class="list row">
<div class="col-md-8">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Search by title"
[(ngModel)]="title"
/>
<div class="input-group-append">
<button
class="btn btn-outline-secondary"
type="button"
(click)="searchTitle()"
>
Search
</button>
</div>
</div>
</div>
<div class="col-md-6">
 <h4>Students List</h4>
<ul class="list-group">
<li
class="list-group-item"
*ngFor="let student of students; let i = index"
[class.active]="i == currentIndex"
(click)="setActiveStudent(student, i)"
>
{{ student.title }}
</li>
</ul>

<button class="m-3 btn btn-sm btn-danger" (click)="removeAllStudents()">

Remove All
</button>
</div>
<div class="col-md-6">
<div *ngIf="currentStudent">
<h4>Student</h4>
<div>
<label><strong>Title:</strong></label> {{ currentStudent.title }}
</div>
<div>
<label><strong>Description:</strong></label>
{{ currentStudent.description }}
</div>
<div>
<label><strong>Status:</strong></label>
{{ currentStudent.published ? "Published" : "Pending" }}
</div>

<a class="badge badge-warning"

routerLink="/students/{{ currentStudent.id }}">
Edit
</a>
</div>
 <div *ngIf="!currentStudent">
<br />
<p>Please click on a Student...</p>
</div>
</div>
</div>
Si hace clic en Editar botón de cualquier student, será dirigido a Student de la
página con URL: /students/:id.
Puede agregar paginación a este componente, simplemente siga las instrucciones
en la publicación:
Ejemplo de paginación Angular 10 | ngx-paginación

Detalles del artículo Componente

Para obtener datos y actualizar, elimine el Student, este componente utilizará
3 StudentServicemétodos:

 get()
 update()
 delete()

components / student-details / student-details.component.ts
import { Component, OnInit } from '@angular/core';
import { StudentService } from 'src/app/services/student.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
selector: 'app-student-details',
templateUrl: './student-details.component.html',
styleUrls: ['./student-details.component.css']
})
export class StudentDetailsComponent implements OnInit {
currentStudent = null;
message = '';

constructor(
private studentService: StudentService,
private route: ActivatedRoute,
 private router: Router) { }

ngOnInit(): void {
this.message = '';
this.getStudent(this.route.snapshot.paramMap.get('id'));
}

getStudent(id): void {
this.studentService.get(id)
.subscribe(
data => {
this.currentStudent = data;
console.log(data);
},
error => {
console.log(error);
});
}

updatePublished(status): void {
const data = {
title: this.currentStudent.title,
description: this.currentStudent.description,
published: status
};

this.studentService.update(this.currentStudent.id, data)
.subscribe(
response => {
this.currentStudent.published = status;
console.log(response);
},
error => {
console.log(error);
});
 }

updateStudent(): void {
this.studentService.update(this.currentStudent.id, this.currentStudent)
.subscribe(
response => {
console.log(response);
this.message = 'The student was updated successfully!';
},
error => {
console.log(error);
});
}

deleteStudent(): void {
this.studentService.delete(this.currentStudent.id)
.subscribe(
response => {
console.log(response);
this.router.navigate(['/students']);
},
error => {
console.log(error);
});
}
}
components / student-details / student-details.component.html
<div style="width: 400px; margin: auto;">
<div *ngIf="currentStudent" class="edit-form">
<h4>Student</h4>
<form>
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
 class="form-control"
id="title"
[(ngModel)]="currentStudent.title"
name="title"
/>
</div>
<div class="form-group">
<label for="description">Description</label>
<input
type="text"
class="form-control"
id="description"
[(ngModel)]="currentStudent.description"
name="description"
/>
</div>

<div class="form-group">
<label><strong>Status:</strong></label>
{{ currentStudent.published ? "Published" : "Pending" }}
</div>
</form>

<button
class="badge badge-primary mr-2"
*ngIf="currentStudent.published"
(click)="updatePublished(false)"
>
UnPublish
</button>
<button
*ngIf="!currentStudent.published"
class="badge badge-primary mr-2"
(click)="updatePublished(true)"
>
 Publish
</button>

<button class="badge badge-danger mr-2" (click)="deleteStudent()">

Delete
</button>

<button
type="submit"
class="badge badge-success"
(click)="updateStudent()"
>
Update
</button>
<p>{{ message }}</p>
</div>

<div *ngIf="!currentStudent">
<br />
<p>Cannot access this Student...</p>
</div>
</div>

Ejecute la aplicación Angular 10

Puede ejecutar esta aplicación con el comando: ng serve