การสร้าง Service

ใน workshop ที่ผ่านมาทั้งหมด ข้อมูลจะถูก Hardcode ไว้ ซึ่งในความเป็นจริงข้อมูลส่วนใหญ่จะต้องไปดึงมาจาก Webservice อื่นๆอีกที

ลองสร้าง Service ด้วยคำสั่ง

ng generate service friend-list/HardcodedFriendListService

จะเห็นว่ามีไฟล์ใหม่เกิดขึ้น 2 ไฟล์ คือ

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

ย้ายข้อมูลจากใน FriendListComponent มาไว้ที่ FriendListService

//friendlist.component.ts
import { Component, OnInit } from '@angular/core';

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

  friends: string[ ];

  constructor() {

   }

  ngOnInit() {
  }

}

//friendlist.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class FriendlistService {

  friends = [ "Jack", "Queen", "King" ];

  constructor() { }

  getAll(): string[] {
    return this.friends;
  }

}

ให้ FriendListComponent เรียกใช้ข้อมูลจาก FriendListService แทน

import { Component, OnInit } from '@angular/core';
import { FriendlistService } from './friendlist.service';

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

  friends: string[ ];

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

  ngOnInit() {
  }

}

ทุกครั้งที่มี Service เกิดขึ้นใหม่ จะต้องไป Register ใน ไฟล์ app.module.ts ด้วยเสมอ ( Angular ไม่ได้ทำตรงนี้ให้เรา ถึงแม้จะสร้าง Service ด้วย command ก็ตาม )

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

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

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

วิธีการนี้เรียกว่า Dependencies injection ศึกษาเพิ่มเติมได้ที่ https://angular.io/guide/dependency-injection