มือใหม่หัดใช้ Angular ตอนที่ 5: การสร้าง Service และการเก็บข้อมูลของ user ลงใน localstorage

ตอนก่อนหน้า – มือใหม่หัดใช้ Angular ตอนที่ 4: สร้างหน้า register และ login กับ Firebase(AngularFire) [2/2]

ผ่านไปแปปเดียวเราก็มาถึงตอนที่ 5 กันแล้ว หลังจากที่เราทำหน้า register กับ login เรียบร้อย แต่เราสงสัยไหมว่า สมมุติว่าเราอยากจะทำให้ฟังก์ชัน login (หรือ logout) สามารถเรียกได้จากหลายๆหน้า ถ้าใช้วิธีแบบปัจจุบัน เราต้องไปเขียนฟังก์ชันนี้ไว้ในทุกๆ component ที่เราต้องใช้แน่ๆ ซึ่งหากเราจะแก้อะไรซักอย่าง คงต้องวุ่นวายแน่เลย

มาในวันนี้เราเลยจะมาทำความรู้จักกับ…

Service

Service มันคืออะไรอ่ะ?

“In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application…”

– W3Schools

จากเว็บ W3Schools เราสามารถสรุปได้คร่าวๆว่า service มันคือฟังก์ชันหรือ object หนึ่งๆที่เราสามารถใช้ในแอพ Angular ของเรา หรือแปลได้สั้นๆคือ service คือการแชร์ฟังก์ชันและ object ระหว่าง component นั่นเอง

มาถึงตอนนี้เราก็จะนำระบบ register กับ login มาทำเป็น service กัน 🙂

เริ่มจากการสร้าง service กันก่อน จะสร้างโดยการรันคำสั่งผ่าน Angular CLI หรือว่าจะสร้างไฟล์เองก็ได้

หากรันคำสั่งผ่าน Angular CLI จะใช้คำสั่ง

ng generate service [ชื่อของ service]

ในที่นี้เราก็จะตั้งชื่อ service ว่า ‘auth’ เราก็จะรันคำสั่ง ‘ng generate service auth’

และเหมือนกับทุกๆครั้ง เราสามารถย่อคำสั่งเหลือเป็น ‘ng g s auth’ ได้

โดย Angular CLI จะเข้าไปสร้างไฟล์ขึ้นมา 2 ไฟล์

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

จากครั้งที่แล้ว เวลาสร้าง component ใหม่จาก Angular CLI ตัว CLI จะเข้าไป import ให้โดยอัตโนมัติ แต่หากเป็น service แล้ว เราจะต้องเข้าไป import เอง

1. ในไฟล์ app.module.ts

import { AuthService } from ‘./auth.service’;

@NgModule({

…

providers: [AuthService],

});

หลังจากนั้น เข้าไปที่ไฟล์ src/app/auth.service.ts แล้วย้ายฟังก์ชัน register กับ login มาไว้ในนี้ได้เลย

หน้าตาก็จะเป็นอะไรประมาณนี้ >>> https://pastebin.com/LXLe4jRG

*โค้ดค่อนข้างยาว ขออนุญาตไปแปะใน pastebin นะครับ 🙂

และในส่วนของ register และ login ก็สามารถเรียก service ได้ง่ายๆแบบนี้

• register.component.ts

import { AuthService } from ‘../auth.service’;

export class RegisterComponent implements OnInit {
displayName: string;
email: string;
password: string;
rePassword: string;

constructor(public authService: AuthService) { }

ngOnInit() {
}

signup() {
if (this.password === this.rePassword) {
this.authService.signup(this.email, this.password, this.displayName);
}
}
}

• login.component.ts

import { AuthService } from ‘../auth.service’;

export class LoginComponent implements OnInit {
email: string;
password: string;

constructor(public authService: AuthService) {
}

ngOnInit() {
}

login() {
this.authService.login(this.email, this.password);
}
}

เพียงเท่านี้เวลาเราต้องการเรียกใช้ฟังก์ชันที่เกี่ยวกับการ verify user ต่างๆก็ไม่ยากแล้ว

แต่ถ้าหากใครสังเกตดีๆ จะเห็นว่ามีฟังก์ชัน ‘setUserDateToLocalStorage(userData)‘ โผล่เข้ามาในตัวอย่างโค้ดบนเว็บ pastebin

แล้วฟังก์ชันนี้ทำอะไรหล่ะ?

หลักๆเลยก็คือเป็นการเก็บค่าเฉพาะตัวของ user เช่น username displayname ไว้ใน localstorage เพื่อให้ง่ายต่อการเรียกใช้ในหน้าอื่นๆ ซึ่งในตอนหน้าเราจะมาพูดถึง router กัน แล้วเราจะมาดูกันว่าจะเอาข้อมูลจาก local storage มาใช้ประโยชน์ได้ยังไงบ้าง อย่าลืมติดตามกันนะครับ 🙂

ปล. ช่วงนี้อาจจะลงรายละเอียดไม่เยอะ แต่หากใครมีคำถามสามารถคอมเม้นต์ทิ้งไว้ได้เลยนะครับ (จะพยายามตอบเท่าที่จะตอบได้นะ > <)