Wie Post-Methode in AngularJS zu verwenden

Question

Ich bin ziemlich neu in der angularen Welt, und ich habe einige Probleme bei der Verwendung von http Post-Methode. Bitte hilf mir dabei, danke!

Um meinen Code einfacher aussehen zu lassen, schneide ich das irrelevante Zeug aus.
Hintergrund: Ich benutze Express, um einen localhost: 8080 zu machen, und wenn Daten an diesen Host gesendet werden, protokolliert die Konsole 'Daten fangen'. Ich benutze 'Postman', um diesen Host zu testen, und es funktioniert. Wenn ich versuche, die Post-Methode in meinem Angular-Code zu verwenden, gibt es keine Antwort in der Konsole.

import {Component} from '@angular/core'; 
import {Headers, Http, Response, Request, RequestOptions} from '@angular/http'; 
import {User} from './user'; 
import {UserService} from './user.service'; 

import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Component({ 

    selector: 'my-app', 
    template: 
    ` 
     .... 
     <button type= "button" class="btn btn-primary btn-lg" 
     (click)= "addUser()">Login</button> 
     .... 

    ` 
}) 

export class AppComponent{ 
    user: User= { 
    UserId: "", 
    Password:"" 
    }; 

constructor(private userservice: UserService, private http: Http){}; 
hostUrl:string = "http://localhost:8080/SignIn"; 

addUser(){ 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({headers: headers}); 
let body:string = JSON.stringify({"UserId":"Jay","Password":"asfjghj123f"}); 

this.http.post(this.hostUrl, body, options) 
        .map((res:Response) => res.json()) 
        .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 

console.log('posting data...'); 
} 
} 

Hier ist mein NodeJS Code für localhost8080

'use strict'; 

var express= require('express'); 
var app = express(); 
var signService = require('./signService.js'); 
var sessionRepo = require('./sessionRepo.js'); 

var bodyParser= require('body-parser'); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({  
    extended: false 
})); 

app.post('/SignIn', function(req, res){ 
    console.log('catching data'); 
    res.send('hello'); 
}); 

Auch bin ich wirklich über die Verwendung von 'beobachtbar' verwechselt. Ich sehe den Beispielcode im offiziellen Tutorial, sie verwenden Observable für die Post-Methode. Warum geben wir Dinge über die Post-Methode zurück, schreiben wir nicht einfach direkt dort ein und das einzige, was wir zurückbekommen, ist der Status einer solchen Anfrage?

Source Code:

addHero (name: string): Observable<Hero> { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.heroesUrl, { name }, options) 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 

von https://angular.io/docs/ts/latest/guide/server-communication.html;

Answer 1

http-Methoden in angular sind "kalte" Methoden. Der Post wird nichts tun, bis Sie das zurückgegebene Observable abonnieren.

So Stick an den Helden Beispiel lässt:

addHero (name: string): Observable<Hero> { 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 

return this.http.post(this.heroesUrl, { name }, options) 
       .map(this.extractData) 
       .catch(this.handleError); 

}

Also, wenn Sie anrufen, dass addHero Funktion irgendwo wollen Sie tatsächlich etwas schreiben (können Taste a einreichen sagen), können Sie abonnieren das Observable. Und nur das Abonnement tatsächlich die Post-Methode starten:

Aufruf Komponente (Typoskript):

public submit():void{ 
    this.heroService.addHero 
    .subscribe(response -> console.log('My response: ' + response)); 
} 

entsprechende HTML-Vorlage

<button (ngSubmit)="submit()"/> 

Wenn Sie jetzt auf die Schaltfläche klicken, Die Funktion submit() wird aufgerufen und dann die Observable, die von Ihrer Funktion mit der Methode http.post() zurückgegeben wird, abonniert. Subscribe nimmt eine Schließung und stellt den beobachtbaren Inhalt zur Verfügung (in diesem Fall Ihre Serverantwort).