Services trong Angular4 là gì ?

I. Khái niệm về Services trong Angular 4

Mọi ứng dụng đều bao gồm rất nhiều hệ thống con với những nhiệm vụ khác nhau như: logging, truy cập dữ liệu, caching, ... Phụ thuộc vào kiểu ứng dụng bạn đang xây dựng hoặc framework bạn đang sử dụng, mà có những cách khác nhau để biểu diễn các hệ thống con này.

Angular 2 sử dụng khái niệm services, một service của Angular 2 là một class đóng gói một vài chức năng và cung cấp nó cho phần còn lại của ứng dụng.

Nếu bạn đã làm việc với Anguar 1, thì bạn sẽ thích sự đơn giản của Angular 2: không còn service/factory/constant/provicer. Trong Angular 2 chỉ có duy nhất services, và chúng chỉ là các class ES6.

Nguồn tham khảo techmaster : https://techmaster.vn/posts/34243/bat-dau-voi-angular-2-tung-buoc-mot-2-refactoring-thanh-services

II. Tạo Course Service

• Mình tạo thư mục services, trong thư mục services mình tạo file course.services.ts

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

@Injectable()
export class CourseService {
  courses: string[];

  constructor() {
    this.courses = ["angualar","typescript","php","nodejs","reactjs","vue.js"];
  }

  getRandomCourses(total:number): string[] {
    return this.getRandomArrayElements(this.courses,3);
  }

  getCourses(): string[] {
    return this.courses;
  }

  addCourse(name: string) {
    this.courses.push(name);
  }

  private getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
  }

}

III. Gọi Services vào trong component course.component.ts

import { CourseService } from './../services/course.service';

• Đây là file course.component.ts

import { Component , OnInit } from '@angular/core';
import { CourseService } from './../services/course.service';


@Component({
  moduleId: module.id,
  selector: 'zvn-course',
  templateUrl: './course.component.html',
  providers: [ CourseService ],
})
export class CourseComponent implements OnInit {
  coursesRandom: string[] = [];
  coursesFull: string[] = [];

  constructor(private _courseService: CourseService) {
  }

  ngOnInit() {
    this.coursesFull = this._courseService.getCourses();
    this.coursesRandom = this._courseService.getRandomCourses(3);
  }

  randomCourse() {
    this.coursesRandom = this._courseService.getRandomCourses(3);
  }

  addCourse(name: string ) {
    this._courseService.addCourse(name);
  }
}

• Các bạn chú ý mình giúp mình đoạn code này

providers: [ CourseService ],

Nếu không có dòng đó thì các bạn sẽ không gọi được course.service.ts

• Bước cuối cùng mình gọi course.component.html ra như sau

<form>
    <div class="form-group">
      <label class="sr-only" for="">Course</label>
      <input type="text" class="form-control"  placeholder="Course Name" #name>
    </div>
    <button type="button" class="btn btn-primary" (click)="addCourse(name.value)">Add Course</button>
    <button type="button" class="btn btn-danger" (click)="randomCourse()">Random Course</button>
</form>

<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>Random</h3>
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let course of coursesRandom">{{ course }}</li>
    </ul>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>Full Courses</h3>
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let course of coursesFull">{{ course }}</li>
    </ul>
  </div>
</div>

IV. Link github bài viết về Services trong Angular:

https://github.com/nguyennhuhaitrieu/my-project-app-youtube/