Parametros GET en NodeJS y Angular

ver: https://scotch.io/tutorials/use-expressjs-to-get-url-and-post-parameters

Servidor:

var express = require("express"),
    app = express(),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override"); 
 
  app.use(function (req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
  });

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());

var router = express.Router();

router.get('/', function(req, res) {
   res.send("Hello World!");
});

router.get('/abc/:id/:id2/:id3', function(req, res) {
    var datos1 = req.params.id;
    var datos2 = req.params.id2;
    var datos3 = req.params.id3;

    console.log(datos1);
    console.log(datos2);
    console.log(datos3);

    res.send(JSON.stringify("ok")); 
});

app.use(router);

app.listen(8080, function() {
    console.log("Node server running on http://localhost:8080");
});


Cliente:

datos.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DatosService {

  constructor(public http: Http) { }

  result:any;

  abc(id1: string, id2: string, id3: string) {         
    return this.http.get("http://localhost:8080/abc/" + id1 + "/" + id2 + "/" + id3)     
    .map(res => res.json());       
  }   
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { DatosService } from './datos.service';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ContenidoComponent } from './contenido/contenido.component';

@NgModule({
  declarations: [
    AppComponent,    
    ContenidoComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot([
      {path: 'prueba/:id1/:id2/:id3', component: ContenidoComponent}
    ])          
  ],
  providers: [DatosService],
  bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import { DatosService } from './datos.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  datos : any;
  servidor: string;
  idmantis: number;
  archivos: any;

  constructor(private data : DatosService) {}

  abc(id1:string, id2:string, id3:string) {                
    this.data.abc(id1, id2, id3).subscribe((datos) => {    
      
      console.log(datos);              
    });
}


app.component.html

<h1>Pagina principal</h1>

<button (click)='abc(22, 33, 44)'>Prueba parametros</button>

<router-outlet></router-outlet>







No hay comentarios:

Publicar un comentario