Service trong AngularJS là gì

Mục lục

  • 1. Service trong AngularJs là gì ?
  • 2.  Hướng dẫn sử dụng Service trong AngularJs
    • 2. a] Thiết kế form tính toán
    • 2.b] Viết Service AngularJs cho ứng dụng
    • 2.c ] Tạo controller calculatorController cho ứng dụng

1. Service trong AngularJs là gì ?

Trong AngularJs, Service là những đối tượng mà bản thân nó chưa môt hoặc một nhóm các chức năng nhằm thực hiện những task cụ thể nào đó. Service trong AngularJs chứa các business logic, được coi là quả tim của một ứng dụng AngularJs. Nói một cách đơn giản là Service trong AngularJs như một nhà máy, tại đây nó sẽ sản xuất ra các ‘nguyên liệu’ mà Controller sẽ sử dụng để chế biến thành ‘sản phẩm’.

Hình 1 : Service trong AngularJs

Chẳng hạn như ở Hình 1. Các bạn thấy rằng, lớp User Service chịu trách nhiệm cung cấp các ‘nguyên liệu’ cần thiết là thông tin người dùng bao gồm : tên, ngày sinh, sở thích, …cho 2 lớp Controller là Profile Controller và lớp Dashboard Controller. Tùy vào mục đích sử dụng mà 2 lớp Controller này sẽ sử dụng thông tin User vào các mục đích khác nhau như là Profile Controller sẽ hiển thị dữ liệu là danh sách người dùng, còn DashBoard Controller sẽ hiển thị thống kê biểu đồ người dùng,….

2.  Hướng dẫn sử dụng Service trong AngularJs

Đến đây chúng ta đã có thể phần nào hiểu được tổng quát về Service trong AngularJs, vậy thì cách xử dụng Service trong AngularJs như thế nào, có khó không? Câu trả lời là cách tạo ra 1 Service trong AngularJs vô cùng đơn giản.

Mình sẽ làm 1 ví dụ về service cung cấp các phương thức tính tổng, hiệu, tích, thương giữa 2 số a và b.

2. a] Thiết kế form tính toán

Đầu tiên mình sẽ thiết kế 1 form như sau cho phép người dùng nhập 2 số a và b. Khi ấn các nút Tính tổng, Tính hiệu, Tính tích, Tính thương sẽ lần lượt cho ra các kết quả là tổng, hiệu, tích hoặc thương tương ứng của 2 số a và b nhập vào. Form này sẽ được thiết kết như sau :



  
   


Ví dụ Service trong Angularjs

Nhập số a :
Nhập số b :
Kết quả là : {{result}}

Giải thích :

  • thẻ ng-app : chứa tên ứng dụng app của chúng ta là myApp
  • 2 input kiểu number đại diện cho 2 số a và b mà người dùng sẽ nhập vào để tính toán. 2 input này sẽ có thuộc tính ng-model lần lượt là a và b để làm nhiệm vụ truyền dữ liệu nhập từ textbox vào Controller thông qua biến phạm vi $scope
  • Các button lần lượt bao gồm Tính tổng, Tính hiệu, Tính tích, Tính thương có thuộc tính ng-click lần lượt là add[]. subtract[], multiply[], divide[]  chịu trách nhiệm gọi đến các function tương ứng khi người dùng click vào các button này
  • {{result}} chịu trách nhiệm hiển thị kết quả đã được tính toán của 2 số a và b khi người dùng lần lượt click vào các button trên.

2.b] Viết Service AngularJs cho ứng dụng

Ở bước này, mình sẽ thiết kế một Service đơn giản gọi là calculatorService cung cấp các phương thức tính toán như sau :


// Khởi tạo module myApp
var app = angular.module['myApp', []];

// Thiết lập 1 service tên là calculatorService
app.service['calculatorService', function[]{

  // Cung cấp chức năng tính tổng 2 số a và b
  this.add = function[a, b] { return a + b };

  // Cung cấp chức năng tính hiệu 2 số a và b
  this.subtract = function[a, b] { return a - b };

  // Cung cấp chức năng tính tích 2 số a và b
  this.multiply = function[a, b] { return a * b };

  // Cung cấp chức năng tính thương 2 số a và b
  this.divide = function[a, b] { return a / b };
}];

Giải thích : 

  • Để có thể tạo 1 service trong AngularJs, chúng ta sử dụng theo cú pháp:  tên_module.service[‘tên_service’, function[]{}];
  • Ở đoạn code trên, service calculator chứa các phương thức xây dựng sẵn là add, subtract, multiply, divide. những phương thức này sẽ được sử dụng trong Controller ở bước tiếp theo

2.c ] Tạo controller calculatorController cho ứng dụng

Tiếp theo, mình sẽ tạo 1 lớp Controller cho ứng dụng và sử dụng calculator đã được xây dựng sẵn ở bước 2.a]


// Khởi tạo module myApp
var app = angular.module['myApp', []];

// Controller đảm nhiệm tác vụ tính tổng 2 số a và b
app.controller['calculatorController', function[$scope, calculatorService]{// inject [tiêm] đối tượng calculatorService

  $scope.result = 0;

  $scope.add = function[]{
     $scope.result = calculatorService.add[$scope.a, $scope.b];
  }

  $scope.subtract = function[]{
     $scope.result = calculatorService.subtract[$scope.a, $scope.b];
  }

  $scope.multiply = function []{
     $scope.result = calculatorService.multiply[$scope.a, $scope.b];
  }

  $scope.divide = function[]{
     $scope.result = calculatorService.divide[$scope.a, $scope.b];
  }
}];

Giải thích :

  • Các bạn để ý là trong calculatorController ở đoạn code trên, mình đã inject [tiêm] vào 1 đối tượng  calculatorService để chúng ta có thể sử dụng các phương thức đã xây dựng sẵn của lớp Service này.
  • Trong controller này sẽ chứa các function add, subtract, multiply, divide. Trong mỗi function này sẽ sử dụng đối tượng calculatorService và truy xuất đến các phương thức tương ứng như calculatorService.add[], calculatorService.subtract[],… để tính toàn và trả ra kết quả. Đưa vào biến $scope.result để gửi kết quả ra view.

Toàn bộ code cho ứng dụng này như sau :



  
   


Ví dụ Service trong Angularjs

Nhập số a :
Nhập số b :
Kết quả là : {{result}}
// Khởi tạo module myApp var app = angular.module['myApp', []]; // Thiết lập 1 service tên là calculatorService app.service['calculatorService', function[]{ // Cung cấp chức năng tính tổng 2 số a và b this.add = function[a, b] { return a + b }; // Cung cấp chức năng tính hiệu 2 số a và b this.subtract = function[a, b] { return a - b }; // Cung cấp chức năng tính tích 2 số a và b this.multiply = function[a, b] { return a * b }; // Cung cấp chức năng tính thương 2 số a và b this.divide = function[a, b] { return a / b }; }]; // Controller đảm nhiệm tác vụ tính tổng 2 số a và b app.controller['calculatorController', function[$scope, calculatorService]{ $scope.result = 0; $scope.add = function[]{ $scope.result = calculatorService.add[$scope.a, $scope.b]; } $scope.subtract = function[]{ $scope.result = calculatorService.subtract[$scope.a, $scope.b]; } $scope.multiply = function []{ $scope.result = calculatorService.multiply[$scope.a, $scope.b]; } $scope.divide = function[]{ $scope.result = calculatorService.divide[$scope.a, $scope.b]; } }];

Các bạn lưu lại, chạy file bằng trình duyệt sẽ được như sau:

Form tính toán áp dụng service trong angularjs

. Sau đó nhập các số a và b, ấn lần lượt các nút Tính tổng, Tính hiệu, Tính tích, Tính nhân và nghiệm ra cho bản thân mình nhé. Đừng quên ấn Đăng ký nhận bài viết bên thành sidebar để nhận các bài viết mới nhé. Chúc các bạn học tốt 🙂

Nguồn : kungfuphp.com

Mình là Hiếu.
Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,…
Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”.
Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển.

►Nếu bạn thấy bài viết bạn đang đọc hữu ích, hãy mời mình một ly cafe nhé : //kungfuphp.com/donate

Chủ Đề