Spring Boot , Angular 7 REST
códigohttps://github.com/jalbertomr/springbootRestCross
https://github.com/jalbertomr/Angular7RestCross
Probando spring boot desde el browser
bext@bext-G3-3779:~$ npm -v 6.9.0 bext@bext-G3-3779:~$ node -v v10.16.3
Instalamos angular cli
bext@bext-G3-3779:~$ npm install -g @angular/cli /home/bext/.nvm/versions/node/v10.16.3/bin/ng -> /home/bext/.nvm/versions/node/v10.16.3/lib/node_modules/@angular/cli/bin/ng > @angular/cli@8.3.8 postinstall /home/bext/.nvm/versions/node/v10.16.3/lib/node_modules/@angular/cli > node ./bin/postinstall/script.js ? Would you like to share anonymous usage data with the Angular Team at Google u nder Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. No + @angular/cli@8.3.8 added 244 packages from 185 contributors in 47.928s ╭────────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.9.0 → 6.12.0 │ │ Changelog: https://github.com/npm/cli/releases/tag/v6.12.0 │ │ Run npm install -g npm to update! │ │ │ ╰────────────────────────────────────────────────────────────────╯ bext@bext-G3-3779:~$
bext@bext-G3-3779:~$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 8.3.8 Node: 10.16.3 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.8 @angular-devkit/core 8.3.8 @angular-devkit/schematics 8.3.8 @schematics/angular 8.3.8 @schematics/update 0.803.8 rxjs 6.4.0 bext@bext-G3-3779:~$
Creamos el proyecto angular con angular cli
bext@bext-G3-3779:~/nodeWorkspace$ ng new person-management ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE person-management/README.md (1033 bytes) CREATE person-management/.editorconfig (246 bytes) CREATE person-management/.gitignore (631 bytes) CREATE person-management/angular.json (3681 bytes) CREATE person-management/package.json (1291 bytes) CREATE person-management/tsconfig.json (543 bytes) CREATE person-management/tslint.json (1953 bytes) CREATE person-management/browserslist (429 bytes) CREATE person-management/karma.conf.js (1029 bytes) CREATE person-management/tsconfig.app.json (270 bytes) CREATE person-management/tsconfig.spec.json (270 bytes) CREATE person-management/src/favicon.ico (948 bytes) CREATE person-management/src/index.html (302 bytes) CREATE person-management/src/main.ts (372 bytes) CREATE person-management/src/polyfills.ts (2838 bytes) CREATE person-management/src/styles.css (80 bytes) CREATE person-management/src/test.ts (642 bytes) CREATE person-management/src/assets/.gitkeep (0 bytes) CREATE person-management/src/environments/environment.prod.ts (51 bytes) CREATE person-management/src/environments/environment.ts (662 bytes) CREATE person-management/src/app/app-routing.module.ts (246 bytes) CREATE person-management/src/app/app.module.ts (393 bytes) CREATE person-management/src/app/app.component.css (0 bytes) CREATE person-management/src/app/app.component.html (25530 bytes) CREATE person-management/src/app/app.component.spec.ts (1131 bytes) CREATE person-management/src/app/app.component.ts (221 bytes) CREATE person-management/e2e/protractor.conf.js (810 bytes) CREATE person-management/e2e/tsconfig.json (214 bytes) CREATE person-management/e2e/src/app.e2e-spec.ts (650 bytes) CREATE person-management/e2e/src/app.po.ts (262 bytes) > core-js@2.6.9 postinstall /home/bext/nodeWorkspace/person-management/node_modules/babel-runtime/node_modules/core-js > node scripts/postinstall || echo "ignore" > core-js@3.2.1 postinstall /home/bext/nodeWorkspace/person-management/node_modules/core-js > node scripts/postinstall || echo "ignore" > core-js@2.6.9 postinstall /home/bext/nodeWorkspace/person-management/node_modules/karma/node_modules/core-js > node scripts/postinstall || echo "ignore" > @angular/cli@8.3.8 postinstall /home/bext/nodeWorkspace/person-management/node_modules/@angular/cli > node ./bin/postinstall/script.js npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack-dev-server/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/watchpack/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/karma/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/@angular/compiler-cli/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.0 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) added 1189 packages from 1051 contributors and audited 18849 packages in 17.955s found 0 vulnerabilities Successfully initialized git. bext@bext-G3-3779:~/nodeWorkspace$ dir person-management simpleRestYa creado el proyecto en angular lo probamos
bext@bext-G3-3779:~/nodeWorkspace/person-management$ ng serve 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 52.4 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 9.72 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered] Date: 2019-10-08T22:59:43.145Z - Hash: 3b04a273cad2461b798c - Time: 5347ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ℹ ｢wdm｣: Compiled successfully.
Lo probamos en el browser
Ahora editamos el proyecto angular con Visual Studio Code, y le creamos el componente person
bext@bext-G3-3779:~/nodeWorkspace/person-management$ ng generate component person CREATE src/app/person/person.component.css (0 bytes) CREATE src/app/person/person.component.html (21 bytes) CREATE src/app/person/person.component.spec.ts (628 bytes) CREATE src/app/person/person.component.ts (269 bytes) UPDATE src/app/app.module.ts (475 bytes)
ya creado el componente person, modificamos app-routing.module.ts para integrar PersonComponent en el ruteador.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonComponent } from './person/person.component';
const routes: Routes = [
{ path:'', component: PersonComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Al ejecutar nuevamente la aplicación en angular, aparece la página inicial más un texto persona works!, quitamos el código extra en app.component.html que genera la página inicial y solo dejamos la última linea. quedando...
<router-outlet></router-outlet>
creamos un servicio que llamará a spring boot
bext@bext-G3-3779:~/nodeWorkspace/person-management$ ng generate service service/httpClient CREATE src/app/service/http-client.service.spec.ts (354 bytes) CREATE src/app/service/http-client.service.ts (139 bytes)
Ahora modificamos http-client.service.ts para que llame al servicio rest en spring boot, para eso importamos el llamado http. creamos una clase Person compatible a la de regreso del servicio spring boot la cual es capturada en un array. exportamos la clase que contiene la respuesta HttpClientService, la cual posteriormente la importamos en los modulos de la app.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export class Person {
constructor(
id:string,
nombre:string,
email:string,
peso:string
) {}
}
@Injectable({
providedIn: 'root'
})
export class HttpClientService {
constructor( private httpClient:HttpClient) { }
getPersonas() {
console.log('llamando al servicio spring boot...');
return this.httpClient.get<Person[]>('http://localhost:8080/personas');
}
}
app.module.ts
...
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
PersonComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
en el componente person.component.ts integramos la respuesta del servicio que creamos.
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../service/http-client.service';
@Component({
selector: 'app-person',
templateUrl: './person.component.html',
styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {
personas:string[];
constructor( private httpClientService:HttpClientService ) { }
ngOnInit() {
this.httpClientService.getPersonas().subscribe(
response => this.handleSuccessfulResponse( response ));
}
handleSuccessfulResponse(response)
{
this.personas=response;
}
}
Ahora adaptamos el html del componente person para que los datos los despliegue en una tabla.
<div>
<table border="1">
<thead></thead>
<tr>
<th>id</th><th>nombre</th><th>email</th><th>peso</th>
</tr>
<tbody>
<tr *ngFor="let persona of personas">
<td>{{persona.id}}</td>
<td>{{persona.nombre}}</td>
<td>{{persona.email}}</td>
<td>{{persona.peso}}</td>
</tr>
</tbody>
</table>
</div>
Ahora ejecutamos la aplicación spting boot para tener disponible los datos de persona, y también ejecutamos la aplicación en angular que llamará al servicio spring boot.
Y llamamos en el browser la app de angular
eot
No hay comentarios:
Publicar un comentario