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’.

service trong angularjs
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 :

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 :

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)

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 :

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
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


Nếu bạn thấy bài viết có ích và muốn cảm ơn mình thì bạn có thể donate mời mình 1 lý cà phê nhé
Địa chỉ ví BTC của mình : 1NWVkBYnd5iSZ5BsAg4fbr4bYWC7hn9Vcz
Cám ơn và chúc bạn nhiều niềm vui trong cuộc sống !