ANGULARJS 2 HTTP TEST

Öncelikle AngularJS 2 ile http testi için github linkni paylaşalım.  https://github.com/Gmotes/AngularJS2HttpTest.

/AngularJS2HttpTest/src/main/webapp klasörü altında “npm install” komutunu çalıştırıyoruz.

Maven projesini import edip devam ediyoruz.

Pom.xml

jersey-server 1.8 ve jersey-json 1.8 i kullanacağız.  Dolayısıyla dependency olarak ekliyoruz.

JerseyService

@Path("/angularJS2")

public class JerseyService {

@GET

@Path("/get")

@Produces(MediaType.APPLICATION_JSON)

public Student getStudentRecord(){

Student student = new Student();

student.setFirstName("Burak");

return student;

}

}

Student

public class Student {

String firstName;

public String getFirstName() {

return firstName;

}

public void setFirstName(String firstName) {

this.firstName = firstName;

}

}

Module.ts

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

import { HttpModule, JsonpModule }  from '@angular/http';

@NgModule({

  imports: [

    BrowserModule,

    FormsModule,

HttpModule,

JsonpModule

  ],

  declarations: [

    AppComponent

  ],

  bootstrap: [ AppComponent ]

})

export class AppModule { }

HttpModule ile JsonpModule modullerini ekliyoruz.

Component.ts

import { Component  } from '@angular/core';

import { Http, Response } from '@angular/http';

import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Component({

  selector: 'my-app',

  template: `

 

 

 

   

{{firstName}}

  `

})

export class AppComponent {

  title = '';

  firstName: any;

  

  constructor (private http: Http) {

  this.getStudent();

  }

  

    private heroesUrl = '/JerseyAngular2/rest/angularJS2/get';  // URL to web API

getStudent () {

 

 this.http.get(this.heroesUrl).map((res: Response) => res.json()).subscribe(res => this.firstName = res.firstName);

      

  console.log(this.firstName); 

 

}

 

private extractData(res: Response) {

let body = res.json();

return body.data || { };

}

 

 private handleError (error: any) {

    // In a real world app, we might use a remote logging infrastructure

    // We'd also dig deeper into the error to get a better message

    let errMsg = (error.message) ? error.message :

      error.status ? `${error.status} - ${error.statusText}` : 'Server error';

    console.error(errMsg); // log to console instead

    return Observable.throw(errMsg);

  }

}

Http modulunu import ediyoruz. 

this.http.get(url).map((res:Response) => res.json()) bu metod ile mesajı json olarak uygulamaya tanıtıyoruz. Subscribe ile json çözümlemesi yapıp firstName kolonuna erişiyoruz.

Map metoduna parametrik olarak fonksiyon gönderebiliyoruz. 

map(this.extractData) koduyla da response çözümlemesini genişletebilirdik. 

Sonuç olarak "Burak" görüyor olacağız.