การใช้งาน HttpClient ติดต่อกับ backend service ใน Angular ตอนที่ 1

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { HomeComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    PagenofoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

{
    "results": [
      "Item 1",
      "Item 2",
      "Item 3",
      "Item 4",
      "Item 5"
    ]
  }

<p>  home works!</p>

<ul class="list-group">
  <li class="list-group-item active">Get json string data from File </li>
  <li class="list-group-item" *ngFor="let result of results">
    {{ result }}
  </li>
</ul>

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  // selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public results:string[];// กำหนดตัวแปร เพื่อรับค่า

  // Inject HttpClient มาใช้ใน component หรือ service.
  constructor(private http:HttpClient) { }

  ngOnInit() {
    // ทำการเรียกใช้ HTTP request ผ่าน get() method 
    // ซึ่งจะได้ข้อมูลกลับมาในรูปแบบ Observable เราต้อง subscibe ตัว observer จึงจะทำงาน
    // พอรอค่าที่จะถูกส่งกลับมาแล้วทำงาน
    this.http.get('/assets/data/data1.json').subscribe(data => {
      // อ่านค่า result จาก JSON response ที่ส่งออกมา
      this.results = data['results'];
    });    
  }

}

this.results = data.results;

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// กำหนดหน้าตาของข้อมูลที่ได้รับจาก response
interface ItemsResponse{
  results:string[]
}

@Component({
  // selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public results:string[];// กำหนดตัวแปร เพื่อรับค่า

  // Inject HttpClient มาใช้ใน component หรือ service.
  constructor(private http:HttpClient) { }

  ngOnInit() {
    // ทำการเรียกใช้ HTTP request ผ่าน get() method 
    // ซึ่งจะได้ข้อมูลกลับมาในรูปแบบ Observable เราต้อง subscibe ตัว observer จึงจะทำงาน
    // พอรอค่าที่จะถูกส่งกลับมาแล้วทำงาน
    this.http.get<ItemsResponse>('/assets/data/data1.json').subscribe(data => {
      // อ่านค่า result จาก JSON response ที่ส่งออกมา
      this.results = data.results;
      //this.results = data['results'];
    });    
  }

} 

[
	{
		"id": 1,
		"name": "โคมไฟตั้งโต๊ะ",
		"detail": "รายละเอียด โคมไฟตั้งโต๊ะ",
		"price": 300,
		"quantity": 20
	},
	{
		"id": 2,
		"name": "ไฟฉายพกพา",
		"detail": "รายละเอียด ไฟฉายพกพา",
		"price": 200,
		"quantity": 50
	},
	{
		"id": 3,
		"name": "แบตเตอรี่สำรอง",
		"detail": "รายละเอียด แบตเตอรี่สำรอง",
		"price": 600,
		"quantity": 30
	}
]

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  // selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public results:any;// กำหนดตัวแปร เพื่อรับค่า

  // Inject HttpClient มาใช้ใน component หรือ service.
  constructor(private http:HttpClient) { }

  ngOnInit() {
    // ทำการเรียกใช้ HTTP request ผ่าน get() method 
    // ซึ่งจะได้ข้อมูลกลับมาในรูปแบบ Observable เราต้อง subscibe ตัว observer จึงจะทำงาน
    // พอรอค่าที่จะถูกส่งกลับมาแล้วทำงาน
    this.http.get('/assets/data/data2.json').subscribe(data => {
      // อ่านค่า result จาก JSON response ที่ส่งออกมา
      this.results = data;
    });    
  }

}

<p>  home works!</p>

<ul class="list-group">
  <li class="list-group-item active">Get json string data from File </li>
  <li class="list-group-item" *ngFor="let result of results">
    {{ result.id }}
    {{ result.name }}
    ราคา {{ result.price }} บาท
  </li>
</ul>

export class HomeComponent implements OnInit {
  public results:any;// กำหนดตัวแปร เพื่อรับค่า
  public headerDatas:any;
  public jsonData:any;

  // Inject HttpClient มาใช้ใน component หรือ service.
  constructor(private http:HttpClient) { }

  ngOnInit() {
    // ทำการเรียกใช้ HTTP request ผ่าน get() method 
    // ซึ่งจะได้ข้อมูลกลับมาในรูปแบบ Observable เราต้อง subscibe ตัว observer จึงจะทำงาน
    // พอรอค่าที่จะถูกส่งกลับมาแล้วทำงาน
    this.http.get('/assets/data/data2.json', {observe: 'response'})
    .subscribe(resp => {
      console.log(resp);// ดูโครงสร้างของ json ทั้งหมดผ่าน console
      console.log(resp.status); // ดู status code ได้ค่า 200
      this.jsonData = resp;
      // this.headerDatas = resp.headers.get('ชื่อ property ส่วน header ที่ต้องการ');
      // ใช้ข้อมูลในส่วนของ response body  ที่ส่งออกมา
      this.results = resp.body;
    });    
  }

}

<p>  home works!</p>

<ul class="list-group">
  <li class="list-group-item active">Get json string data from File </li>
  <li class="list-group-item" *ngFor="let result of results">
    {{ result.id }}
    {{ result.name }}
    ราคา {{ result.price }} บาท
  </li>
</ul>
<pre>
  {{ jsonData | json }}
</pre>

    this.http.get('/assets/data/data2.json')
    .subscribe(
      data => {
        // กรณี resuponse success
        this.results = data;
      },
      err => {
        // กรณี error
        console.log('Something went wrong!');
      }
    );     

    this.http.get('/assets/data/data2.json')
    .subscribe(
      data => {
        // กรณี resuponse success
        this.results = data;
      },
      ( err:HttpErrorResponse ) => {
        // กรณี error
        if (err.error instanceof Error) {
          // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
          console.log('An error occurred:', err.error.message);
        }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }       
      }
    );        
  }

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

    this.http.get('/assets/data/data2-.json')
    .retry(3) // ทำการ subscribe ซ้ำได้ไม่เกิน 3 ครั้ง
    .subscribe(
      data => {
        // กรณี resuponse success
        this.results = data;
      },
      ( err:HttpErrorResponse ) => {
        // กรณี error
        if (err.error instanceof Error) {
          // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
          console.log('An error occurred:', err.error.message);
        }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }       
      }
    );   

import 'rxjs/add/operator/retry';

ข้อความของไฟล์ mytext.txt 
ข้อความของไฟล์ mytext.txt 
ข้อความของไฟล์ mytext.txt

export class HomeComponent implements OnInit {
  public results:any;// กำหนดตัวแปร เพื่อรับค่า
  public headerDatas:any;
  public jsonData:any;
  public textData:string;

  // Inject HttpClient มาใช้ใน component หรือ service.
  constructor(private http:HttpClient) { }

  ngOnInit() {
    // ทำการเรียกใช้ HTTP request ผ่าน get() method 
    // ซึ่งจะได้ข้อมูลกลับมาในรูปแบบ Observable เราต้อง subscibe ตัว observer จึงจะทำงาน
    // พอรอค่าที่จะถูกส่งกลับมาแล้วทำงาน

    this.http.get('/assets/data/mytext.txt', {responseType: 'text')
    .retry(3) // ทำการ subscribe ซ้ำได้ไม่เกิน 3 ครั้ง
    .subscribe(
      data => {
        // กรณี resuponse success
        this.textData = data;
      },
      ( err:HttpErrorResponse ) => {
        // กรณี error
        if (err.error instanceof Error) {
          // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
          console.log('An error occurred:', err.error.message);
        }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }       
      }
    );        
  }

}

<pre>
  {{ textData }}
</pre>

{responseType: 'text'}