AngularJSのpostメソッドの使い方

Question

私はAngularの世界ではかなり新しいですが、http postメソッドの使用に関するいくつかの問題があります。これで助けてください、ありがとう！

私のコードを見やすくするために、私は無関係のものを切り捨てました。
背景：expressを使用してlocalhost：8080を作成し、データが前記ホストに送信されると、コンソールは「キャッチデータ」を記録します。私はこのホストをテストするために 'Postman'を使用し、それは動作します。 Angularコードでpostメソッドを使用しようとすると、コンソールで応答が得られません。

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...'); 
} 
} 

はここで、私は本当に '観察可能' の使用に混乱しています。また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'); 
}); 

のための私のnodejsコードです。私は公式のチュートリアルでサンプルコードを見て、彼らはポストメソッドでObservableを使用します。私たちはポストメソッドで物事を返すのはなぜですか？物事をそこに直接投稿するだけではなく、返された唯一のものはそのような要求のステータスですか？

ソースコード：https://angular.io/docs/ts/latest/guide/server-communication.htmlから

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); 
    } 

。

Answer 1

角度のあるhttpメソッドは「コールド」メソッドです。あなたが返されたObservableを購読するまで、投稿は何もしません。

だから、英雄の一例に固執することができます：

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); 

}

ですから、どこかでそのaddHero関数を呼び出すあなたが実際に何か（送信ボタンを言うことができます）を投稿したい場合は、あなたが購読することができます観察可能な。

呼び出すコンポーネント（typescriptです）：そして、これだけのサブスクリプションは、実際にpostメソッドが開始されます、あなたが今、ボタンをクリックした場合

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

対応するHTMLテンプレート

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

を、 submit（）関数が呼び出され、http.post（）..メソッドを含む関数から返されたobservableにサブスクライブします。 Subscribeはクロージャを取り、Observableコンテンツ（この場合はサーバーレスポンス）を提供します。