JavaScript

AngularJS Dependency Injection: Giới thiệu và Các tính năng

Posted on by Dục Đoàn Trình
Rate this post

AngularJS Dependency Injection (DI) là một tính năng quan trọng của AngularJS, nó giúp tăng tính tái sử dụng và bảo trì mã của ứng dụng. Dependency Injection là một kiểu thiết kế phần mềm cho phép chúng ta cung cấp các đối tượng phụ thuộc (dependencies) cho một đối tượng khác mà không cần phải tạo các đối tượng đó trực tiếp.

Trong AngularJS, DI cho phép các đối tượng (object) được tạo và quản lý bởi AngularJS, và chúng có thể được truyền cho các đối tượng khác trong ứng dụng thông qua constructor hoặc thông qua các hàm hoạt động như các service hoặc controller. Điều này giúp giảm sự phụ thuộc cứng giữa các thành phần trong ứng dụng, giúp chúng ta dễ dàng thay đổi và bảo trì mã.

Các tính năng chính của AngularJS DI bao gồm:

  • Các đối tượng (object) có thể được tạo và quản lý bởi AngularJS.
  • Các đối tượng phụ thuộc có thể được truyền vào một đối tượng khác thông qua constructor hoặc các hàm hoạt động như các service hoặc controller.
  • Các đối tượng phụ thuộc có thể được định nghĩa bằng cách sử dụng tên của chúng hoặc bằng cách sử dụng các đối tượng khác như các factory hoặc provider.
  • AngularJS cung cấp các đối tượng phụ thuộc bên trong như $http, $q, $timeout, … để sử dụng trong ứng dụng.

Với những tính năng trên, AngularJS Dependency Injection là một công cụ mạnh mẽ giúp các lập trình viên dễ dàng phát triển các ứng dụng web phức tạp mà không gặp phải các vấn đề liên quan đến sự phụ thuộc cứng và khó bảo trì.

Xem thêm design pattern trong java

Tìm hiểu về Dependency Injection trong AngularJS

Dependency Injection (DI) là một kiểu thiết kế phần mềm cho phép chúng ta cung cấp các đối tượng phụ thuộc (dependencies) cho một đối tượng khác mà không cần phải tạo các đối tượng đó trực tiếp. Trong AngularJS, DI cho phép các đối tượng được tạo và quản lý bởi AngularJS, và chúng có thể được truyền cho các đối tượng khác trong ứng dụng thông qua constructor hoặc thông qua các hàm hoạt động như các service hoặc controller.

Các đối tượng trong AngularJS có thể là các service, factory, controller, directive, component, filter, … Các đối tượng này có thể phụ thuộc vào nhau để hoạt động. Ví dụ, một controller cần phải sử dụng một service để lấy dữ liệu từ server, hoặc một directive cần phải sử dụng một service để xử lý sự kiện người dùng.

Với DI, chúng ta không cần phải tạo các đối tượng phụ thuộc này trực tiếp. Thay vào đó, chúng ta chỉ cần định nghĩa các đối tượng này trong AngularJS và truyền chúng vào các đối tượng khác thông qua constructor hoặc các hàm hoạt động.

Ví dụ, để sử dụng một service trong một controller, chúng ta có thể định nghĩa service này trong AngularJS:

angular.module('myApp').service('myService', function() {
  // code của service
});

Sau đó, chúng ta có thể sử dụng service này trong controller thông qua constructor:

angular.module('myApp').controller('myController', function(myService) {
  // sử dụng myService trong controller
});

AngularJS cung cấp một số đối tượng phụ thuộc bên trong như $http, $q, $timeout, … để sử dụng trong ứng dụng. Chúng ta cũng có thể định nghĩa các đối tượng phụ thuộc bằng cách sử dụng tên của chúng hoặc bằng cách sử dụng các đối tượng khác như các factory hoặc provider.

Điều này giúp giảm sự phụ thuộc cứng giữa các thành phần trong ứng dụng, giúp chúng ta dễ dàng thay đổi và bảo trì mã.

Xem thêm Value Proposition

Cách sử dụng Dependency Injection trong AngularJS để tăng tính tái sử dụng và bảo trì mã

Trong AngularJS, việc sử dụng Dependency Injection (DI) giúp tăng tính tái sử dụng và bảo trì mã. Để sử dụng DI trong AngularJS, ta sẽ cần đăng ký các đối tượng (objects) hoặc các thực thể (entities) với AngularJS’s dependency injection system, được gọi là Injector. Các đối tượng này sẽ được sử dụng trong các service, directive, controller, và các thành phần khác trong ứng dụng của bạn.

Dưới đây là một số cách sử dụng DI trong AngularJS:

  1. Đăng ký một Service: Để đăng ký một Service trong AngularJS, ta sử dụng phương thức factory() của module để trả về một đối tượng. Đối tượng này có thể là một hàm hoặc một đối tượng. Ta cũng có thể định nghĩa các dependency (các đối tượng phụ thuộc) cho Service bằng cách truyền các đối tượng vào hàm hoặc trường (property) của đối tượng.

Ví dụ:

angular.module('myApp', [])
.factory('myService', ['dependency1', 'dependency2', function(dependency1, dependency2) {
    var service = {};

    service.doSomething = function() {
        // do something using dependency1 and dependency2
    };

    return service;
}]);

Trong ví dụ trên, Service được đăng ký với tên là “myService”. Nó có hai dependency là “dependency1” và “dependency2”. Đối tượng Service sẽ được trả về bởi hàm factory().

  1. Sử dụng Dependency Injection trong Controller: Để sử dụng Dependency Injection trong Controller, ta có thể sử dụng các dependency như các tham số của hàm constructor của Controller.

Ví dụ:

angular.module('myApp', [])
.controller('myController', ['dependency1', 'dependency2', function(dependency1, dependency2) {
    // use dependency1 and dependency2 in the controller
}]);

Trong ví dụ trên, Controller được đăng ký với tên là “myController”. Nó có hai dependency là “dependency1” và “dependency2”.

  1. Sử dụng Dependency Injection trong Directive: Ta có thể sử dụng Dependency Injection trong Directive bằng cách truyền các dependency như các tham số vào hàm link().

Ví dụ:

angular.module('myApp', [])
.directive('myDirective', ['dependency1', 'dependency2', function(dependency1, dependency2) {
    return {
        link: function(scope, element, attrs) {
            // use dependency1 and dependency2 in the directive
        }
    };
}]);

Trong ví dụ trên, Directive được đăng ký với tên là “myDirective”. Nó có hai dependency là “dependency1” và “dependency2”.

Với việc sử dụng Dependency Injection trong AngularJS, ta có thể tăng tính tái sử dụng và bảo trì mã, gi

Xem thêm Controller là gì?

Các lợi ích của việc sử dụng Dependency Injection trong AngularJS

Việc sử dụng Dependency Injection (DI) trong AngularJS mang lại nhiều lợi ích cho quá trình phát triển ứng dụng, bao gồm:

  1. Tăng tính tái sử dụng: Bằng cách phân tách các thành phần của ứng dụng và xây dựng chúng thành các service và factory, chúng ta có thể sử dụng lại chúng ở nhiều nơi khác nhau trong ứng dụng. Việc sử dụng lại các thành phần này giúp giảm thiểu việc viết lại code và tăng tính tái sử dụng của ứng dụng.
  2. Dễ dàng kiểm tra và bảo trì: Dependency Injection giúp tách biệt các thành phần của ứng dụng, giúp cho việc kiểm tra và bảo trì dễ dàng hơn. Các thành phần có thể được kiểm tra một cách độc lập và chúng ta có thể thay thế các thành phần bằng các mock object trong quá trình kiểm tra.
  3. Tăng khả năng mở rộng: Khi cấu trúc ứng dụng phức tạp lên, việc quản lý các thành phần trở nên khó khăn hơn. Tuy nhiên, Dependency Injection giúp ta quản lý các thành phần này một cách dễ dàng hơn, đặc biệt là khi thêm hoặc loại bỏ các thành phần của ứng dụng.
  4. Giảm thiểu sự phụ thuộc giữa các thành phần: Dependency Injection giúp giảm thiểu sự phụ thuộc giữa các thành phần của ứng dụng. Các thành phần có thể được thiết kế để không cần biết về nhau, giúp cho việc thay đổi một thành phần không ảnh hưởng đến các thành phần khác.
  5. Tăng tính linh hoạt: Dependency Injection giúp cho việc sử dụng các thành phần của ứng dụng trở nên linh hoạt hơn. Chúng ta có thể dễ dàng thay đổi các thành phần bằng cách sử dụng các service và factory mà không cần thay đổi code của ứng dụng.

Xem thêm Hướng dẫn AngularJS

Hướng dẫn cách tạo và sử dụng Dependency Injection trong AngularJS

Để tạo và sử dụng Dependency Injection trong AngularJS, chúng ta cần thực hiện các bước sau:

Bước 1: Định nghĩa Service Trước khi sử dụng Dependency Injection, chúng ta cần định nghĩa một service để sử dụng trong ứng dụng của mình. Service có thể được định nghĩa bằng cách sử dụng phương thức factory() hoặc service().

Bước 2: Đăng ký Service với Module Sau khi đã định nghĩa service, chúng ta cần đăng ký service này với module bằng cách sử dụng phương thức factory() hoặc service().

Bước 3: Sử dụng Service trong Controller Để sử dụng service trong controller, chúng ta cần truyền service đó vào controller bằng cách sử dụng Dependency Injection. Để làm điều này, chúng ta chỉ cần khai báo tên của service trong danh sách các tham số của controller. AngularJS sẽ tự động tìm và chèn service vào đối số của controller.

Ví dụ:

myApp.factory('userService', function() {
  return {
    getName: function() {
      return 'John Doe';
    }
  };
});

// Đăng ký service với module
myApp.controller('myController', ['$scope', 'userService', function($scope, userService) {
  $scope.userName = userService.getName();
}]);

Trong ví dụ trên, chúng ta đã định nghĩa một service có tên là userService và sử dụng nó trong controller có tên là myController. Chúng ta đã truyền userService vào danh sách các tham số của controller để sử dụng nó trong controller.

Điều quan trọng cần lưu ý là trong danh sách các tham số của controller, chúng ta cần sử dụng cú pháp $inject để đặt tên cho các service. Điều này giúp tránh lỗi khi minify mã AngularJS.

Ví dụ:

// Khai báo tên của service trong danh sách các tham số của controller
myApp.controller('myController', ['$scope', 'userService', function($scope, userService) {
  // Sử dụng userService trong controller
}]);

Trong ví dụ trên, chúng ta đã sử dụng cú pháp $inject để đặt tên cho service userService trong danh sách các tham số của controller. Khi mã của chúng ta được minify, tên của các tham số sẽ được thay đổi. Tuy nhiên, AngularJS sẽ vẫn định nghĩa đúng các dependency của controller nhờ vào tên của các service được định nghĩa bên trong danh sách các tham số của controller.

Xem thêm HashMap trong Java

Value

Trong AngularJS, value là một đối tượng đơn giản. Nó có thể là một số, chuỗi hoặc đối tượng JavaScript. Nó được sử dụng để chuyển các Value trong Factory, Service hoặc bộ điều khiển trong giai đoạn chạy và cấu hình.

// xác định một mô-đun  
var myModule = angular.module("myModule", []);  
// tạo một đối tượng Value và chuyển cho nó một dữ liệu.   
myModule.value("numberValue", 100);  
myModule.value("stringValue", "abc");  
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

Ở đây, các Value được xác định bằng cách sử dụng hàm value () trên mô-đun. Tham số đầu tiên chỉ định tên của Value và tham số thứ hai là chính Value đó. Các Factory, Service và bộ điều khiển hiện có thể tham chiếu các Value này theo tên của chúng.

Injection một Value

Để đưa một Value vào hàm bộ điều khiển AngularJS, hãy thêm một tham số với cùng một tham số khi Value được xác định.

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});

Factory

Factory là một hàm được sử dụng để trả về Value. Khi một Service hoặc bộ điều khiển cần một Value được đưa vào từ Factory, nó sẽ tạo ra Value theo yêu cầu. Nó thường sử dụng một hàm gốc để tính toán và trả về Value.

Hãy lấy một ví dụ xác định một Factory sản xuất trên một mô-đun và một bộ điều khiển nhận Value được tạo ra từ Factory được đưa vào:

var myModule = angular.module("myModule", []);  
myModule.factory("myFactory", function() {  
    return "a value";  
});  
myModule.controller("MyController", function($scope, myFactory) {  
console.log(myFactory);  
});

Đưa các Value vào Factory

Để đưa một Value vào hàm bộ điều khiển AngularJS, hãy thêm một tham số với cùng một tham số khi Value được xác định.

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});

Lưu ý: Nó không phải là hàm Factory được đưa vào, mà là Value được tạo ra bởi hàm Factory.

Service

Trong AngularJS, service là một đối tượng JavaScript chứa một tập hợp các hàm để thực hiện các tác vụ nhất định. Các Service được tạo bằng cách sử dụng hàm service () trên một mô-đun và sau đó được đưa vào bộ điều khiển.

//Xác định một mô-db8
var mainApp = angular.module("mainApp", []);  
...  

mainApp.service('CalcService', function(MathService){  
   this.square = function(a) {  
      return MathService.multiply(a,a);   
   }  
});  

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
   $scope.number = defaultInput;  
   $scope.result = CalcService.square($scope.number);  
    $scope.square = function() {  
      $scope.result = CalcService.square($scope.number);  
   }  
});

Provider

Trong AngularJS, Provider được sử dụng nội bộ để tạo các Service, Factory, v.v. trong giai đoạn cấu hình (giai đoạn trong đó AngularJS tự khởi động). Đây là hình thức Factory linh hoạt nhất mà bạn có thể tạo ra. Provider là một phương thức Factory đặc biệt với một hàm get () được sử dụng để trả về Value / Service / Factory.

// xác định một mô-đun  
var mainApp = angular.module("mainApp", []);  
...  
// tạo một Service bằng cách sử dụng Provider để xác định một phương thức bình phương để trả về bình phương của một số.  
mainApp.config(function($provide) {  
   $provide.provider('MathService', function() {  
      this.$get = function() {  
         var factory = {};    
         factory.multiply = function(a, b) {  
            return a * b;   
         }  
         return factory;  
      };  
   });  
});

Constant

Bạn không thể đưa các Value vào hàm module.config (). Thay vào đó, các Constant được sử dụng để chuyển các Value ở giai đoạn cấu hình.

mainApp.constant(“configParam”, “constant value”);   

Hãy lấy một ví dụ để triển khai tất cả các chỉ thị đã đề cập ở trên.

<!DOCTYPE html>  
<html>  
   <head>  
      <title>AngularJS Dependency Injection</title>  
   </head>  
   <body>  
      <h2>Mẫu ứng dụng AngularJS  </h2>  
        
      <div ng-app = "mainApp" ng-controller = "CalcController">  
         <p>Nhập vào 1 số: 
<input type = "number" ng-model = "number" /></p>  
         <button ng-click = "square()">X<sup>2</sup></button>  
         <p>Kết quả: {{result}}</p>  
      </div>  
        
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
        
      <script>  
         var mainApp = angular.module("mainApp", []);  
           
         mainApp.config(function($provide) {  
            $provide.provider('MathService', function() {  
               this.$get = function() {  
                  var factory = {};  
                    
                  factory.multiply = function(a, b) {  
                     return a * b;  
                  }  
                  return factory;  
               };  
            });  
         });  
              
         mainApp.value("defaultInput", 10);  
           
         mainApp.factory('MathService', function() {  
            var factory = {};  
              
            factory.multiply = function(a, b) {  
               return a * b;  
            }  
            return factory;  
         });  
           
         mainApp.service('CalcService', function(MathService){  
            this.square = function(a) {  
               return MathService.multiply(a,a);  
            }  
         });  
           
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
            $scope.number = defaultInput;  
            $scope.result = CalcService.square($scope.number);  
  
            $scope.square = function() {  
               $scope.result = CalcService.square($scope.number);  
            }  
         });  
          </script>  
      </body>  
</html>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now