Spring Boot , Angular 7 REST
código
https://github.com/jalbertomr/springbootRestCross
https://github.com/jalbertomr/Angular7RestCross
Probando spring boot desde el browser
Pasamos a la Parte de Angular
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 simpleRest
Ya 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
listo.
eot
