การใช้งาน HTTP Module

Angular ได้เตรียมเครื่องที่จะช่วยให้เราเชื่อมต่อ API จาก Web service ไว้แล้ว

เริ่มจากเพิ่ม Http module ไปที่ app.module.ts ก่อน

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http'; //Added

import { AppComponent } from './app.component';
import { FriendlistComponent } from './friendlist/friendlist.component';
import { FriendlistService } from './friendlist/friendlist.service';

@NgModule({
  declarations: [
    AppComponent,
    FriendlistComponent
  ],
  imports: [
    BrowserModule,
    HttpModule //Added
  ],
  providers: [
    FriendlistService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

สร้าง Service ใหม่ ชื่อ HTTPFriendlist

ng generate service friendlist/HTTPfriendlist

จะเกิดไฟล์ใหม่ขึ้น 2 ไฟล์

• src/app/friendlist/httpfriendlist.service.spec.ts
• src/app/friendlist/httpfriendlist.service.ts

เปิดไปที่ไฟล์ httpfriendlist.service.ts นำ http มาใช้งาน

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

@Injectable()
export class HttpfriendlistService {

  constructor(private http: Http) { }

  getAll() {
    return this.http.get('http://localhost:8882/friends');
  }

}

กลับไปที่ FriendlistComponent เปลี่ยนจาก FriendListService มาเป็น HttpfriendListService แทน

import { Component, OnInit } from '@angular/core';
import { HttpfriendlistService } from './httpfriendlist.service';

@Component({
  selector: 'friendlist',
  templateUrl: './friendlist.component.html',
  styleUrls: ['./friendlist.component.css']
})
export class FriendlistComponent implements OnInit {

  friends: string[ ];

  constructor(friendListService: HttpfriendlistService) {
    this.friends = friendListService.getAll();
   }

  ngOnInit() {
  }

}

ตรงบรรทัดที่ 15 จะ error อยู่ ให้เปลี่ยนเป็น

import { Component, OnInit } from '@angular/core';
import { HttpfriendlistService } from './httpfriendlist.service';
import { Response } from '@angular/http';

@Component({
  selector: 'friendlist',
  templateUrl: './friendlist.component.html',
  styleUrls: ['./friendlist.component.css']
})
export class FriendlistComponent implements OnInit {

  friends: string[ ];

  constructor(friendListService: HttpfriendlistService) {
    friendListService.getAll().subscribe((value: Response) => {
      this.friends
    })
   }

  ngOnInit() {
  }

}

ลองทดสอบดุว่าจะทำการเชื่อมต่อได้หรือไม่