Đăng ký AngularJS Service: 4 cách tiếp cận hiệu quả

AngularJS không chỉ cho phép tạo controllers và directives mà còn hỗ trợ các “singleton” services. Giống như trên server-side, services trong AngularJS cung cấp một cách tuyệt vời để tách logic khỏi controllers, giúp code dễ bảo trì và kiểm thử hơn. Bài viết này sẽ hướng dẫn bạn 4 cách đăng ký AngularJS service, bao gồm ví dụ cụ thể và phân tích khi nào nên sử dụng phương pháp nào.

Các phương pháp đăng ký AngularJS Service

AngularJS cung cấp bốn cách khác nhau để Angularjs Register Service:

• Đăng ký một giá trị có sẵn như một service.
• Đăng ký một hàm factory để tạo một service instance.
• Đăng ký một hàm constructor để tạo một service instance.
• Đăng ký một service factory có thể được cấu hình.

Mỗi phương pháp đều có ưu điểm riêng, và việc lựa chọn phương pháp phù hợp phụ thuộc vào nhu cầu cụ thể của dự án.

1. Đăng ký giá trị có sẵn làm service

Bạn có thể đăng ký một giá trị có sẵn (primitive, function hoặc object) làm service bằng phương thức constant hoặc value của module:

var app = angular.module('myApp', []);

app.constant('magicNumber', 42);
app.constant('bookTitle', "Hitchhiker's Guide");

function UsingConstantServiceCtrl(magicNumber, bookTitle) {
  $scope.magicNumber = magicNumber;
  $scope.bookTitle = bookTitle;
}

var existingServiceInstance = {
  getMagicNumber: function() {
    return 42;
  }
};

app.value('magicNumberService', existingServiceInstance);

function UsingValueServiceCtrl(magicNumberService) {
  $scope.magicNumberFromService = magicNumberService.getMagicNumber();
}

2. Đăng ký hàm Factory

Phương thức factory cho phép bạn đăng ký một hàm sẽ được gọi một lần duy nhất để trả về instance của service. Hàm factory có thể nhận các tham số được inject bởi AngularJS.

app.factory('magicNumberService', function(magicNumber) {
  return {
    getMagicNumber: function() {
      return magicNumber;
    }
  };
});

3. Đăng ký hàm Constructor

Phương thức service đăng ký một hàm constructor để tạo instance của service. AngularJS sẽ gọi new trên hàm constructor này.

var MyService = function(magicNumber) {
  this.getMagicNumber = function() {
    return magicNumber;
  };
};

app.service('magicNumberService', MyService);

4. Đăng ký Service Factory có thể cấu hình

Phương thức provider cho phép đăng ký một service factory có thể cấu hình trước khi được khởi tạo, sử dụng phương thức config của module. provider bao gồm một hàm $get (giống factory) và các phương thức cấu hình khác.

app.provider('magicNumberService', {
  magicNumber: null,
  setMagicNumber: function(magicNumber) {
    this.magicNumber = magicNumber;
  },
  $get: function(magicNumber) {
    var toBeReturnedMagicNumber = this.magicNumber || magicNumber;
    return {
      getMagicNumber: function() {
        return toBeReturnedMagicNumber;
      }
    };
  }
});

app.config(function(magicNumberServiceProvider) {
  magicNumberServiceProvider.setMagicNumber(99);
});

Lựa chọn phương pháp phù hợp

factory thường được ưu tiên vì tính linh hoạt và được ghi chép đầy đủ. value phù hợp cho việc đăng ký các giá trị đơn giản. service hữu ích khi cần sử dụng prototype trong service. provider được dùng khi cần cấu hình service trước khi khởi tạo.

Kết luận

Việc hiểu rõ các cách angularjs register service sẽ giúp bạn viết code AngularJS hiệu quả và dễ bảo trì hơn. Lựa chọn phương pháp phù hợp dựa trên độ phức tạp và yêu cầu cấu hình của service.