AngularJS에서 post 메서드를 사용하는 방법

Question

저는 Angular 세계에서 상당히 새롭고 http post 메서드를 사용할 때 몇 가지 문제가 있습니다. 이걸 도와주세요, 고마워요!

내 코드를 좀 더 쉽게 보이게하기 위해 관련없는 것들을 잘라 냈습니다.
배경 : 익스프레스를 사용하여 localhost : 8080을 만들고 데이터가 상기 호스트에 게시되면 콘솔에 '캐치 데이터'가 기록됩니다. 나는이 호스트를 테스트하기 위해 '우편 배달부'를 사용하고 작동한다. 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 코드입니다. 공식 튜토리얼에서 샘플 코드를 볼 수 있으며, post 메소드에서 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 기능 어딘가에 당신이 실제로 뭔가를 게시 할 것을 호출하면

을, 당신이 구독 할 수 있습니다 (제출 버튼을 말할 수) 관찰 할 수있는.

호출 구성 요소 (타이프) : 만이 가입 실제로 포스트 방법으로 시작됩니다 이제 버튼을 클릭하면

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

해당 HTML 템플릿

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

을, submit() 함수가 호출되고 http.post() .. 메소드를 포함하는 함수에 의해 리턴 된 관찰 가능 (observable)에 등록됩니다. Subscribe는 Closure를 가져와 Observable content (이 경우 서버 응답)를 제공합니다.