Tiêm phụ thuộc AngularJS: Thành phần nào được tiêm

Bởi: James Hartman James Hartman
Hours cập nhật

Tiêm phụ thuộc trong AngularJS là gì?

Tiêm phụ thuộc trong AngularJS là một mẫu thiết kế phần mềm thực hiện đảo ngược điều khiển để giải quyết các phụ thuộc. Nó quyết định cách các thành phần giữ sự phụ thuộc của chúng. Nó có thể được sử dụng trong khi xác định các thành phần hoặc cung cấp các khối chạy và cấu hình của mô-đun. Nó cho phép bạn làm cho các thành phần có thể tái sử dụng, có thể kiểm tra và bảo trì.

Đảo ngược kiểm soát: Điều đó có nghĩa là các đối tượng không tạo ra các đối tượng khác mà chúng dựa vào đó để thực hiện công việc của mình. Thay vào đó, họ lấy những đồ vật này từ nguồn bên ngoài. Điều này tạo thành cơ sở của AngularJS Dependency Insert trong đó nếu một đối tượng phụ thuộc vào đối tượng khác; đối tượng chính không chịu trách nhiệm tạo đối tượng phụ thuộc và sau đó sử dụng các phương thức của nó. Thay vào đó, một nguồn bên ngoài (trong AngularJS, chính là khung AngularJS) tạo đối tượng phụ thuộc và đưa nó cho đối tượng nguồn để sử dụng tiếp.

Vì vậy, trước tiên hãy hiểu phụ thuộc là gì.

Tiêm phụ thuộc trong AngularJS

Sơ đồ trên cho thấy một ví dụ tiêm phụ thuộc AngularJS đơn giản về một nghi thức hàng ngày trong lập trình cơ sở dữ liệu.

  • Hộp 'Model' mô tả "Model class" thường được tạo ra để tương tác với cơ sở dữ liệu. Vì vậy, bây giờ cơ sở dữ liệu là một phụ thuộc để "Model class" hoạt động.
  • Bằng cách chèn phần phụ thuộc, chúng tôi tạo ra một dịch vụ để lấy tất cả thông tin từ cơ sở dữ liệu và đưa vào lớp mô hình.

Trong phần còn lại của hướng dẫn này, chúng ta sẽ xem xét kỹ hơn về việc chèn phụ thuộc và cách thực hiện việc này trong AngularJS.

Thành phần nào có thể được đưa vào dưới dạng phụ thuộc trong AngularJS?

Trong Angular.JS, các phần phụ thuộc được đưa vào bằng cách sử dụng “phương thức nhà máy có thể tiêm” hoặc “hàm xây dựng”.

Các thành phần này có thể được thêm vào các thành phần “dịch vụ” và “giá trị” làm phần phụ thuộc. Chúng ta đã thấy điều này trong chủ đề trước đó với dịch vụ $http.

Chúng ta đã thấy rằng dịch vụ $http có thể được sử dụng trong AngularJS để lấy dữ liệu từ một MySQL hoặc MS SQL Cơ sở dữ liệu máy chủ thông qua một PHP ứng dụng web.

Dịch vụ $http thường được định nghĩa từ bên trong bộ điều khiển theo cách sau.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Bây giờ khi dịch vụ $http được xác định trong bộ điều khiển như hiển thị ở trên. Điều đó có nghĩa là bộ điều khiển hiện có sự phụ thuộc vào dịch vụ $http.

Vì vậy, khi đoạn mã trên được thực thi, AngularJS sẽ thực hiện các bước sau;

  1. Kiểm tra xem “dịch vụ $http” đã được khởi tạo chưa. Vì “bộ điều khiển” của chúng tôi hiện phụ thuộc vào “dịch vụ $ http”, nên một đối tượng của dịch vụ này cần được cung cấp cho bộ điều khiển của chúng tôi.
  2. Nếu AngularJS phát hiện ra rằng dịch vụ $http không được khởi tạo, AngularJS sẽ sử dụng hàm 'factory' để xây dựng một đối tượng $http.
  3. Sau đó, bộ tiêm trong Angular.JS sẽ cung cấp một phiên bản của dịch vụ $http cho bộ điều khiển của chúng tôi để xử lý thêm.

Bây giờ, phần phụ thuộc đã được đưa vào bộ điều khiển của chúng ta, giờ đây chúng ta có thể gọi các hàm cần thiết trong dịch vụ $http để xử lý thêm.

Ví dụ về tiêm phụ thuộc

Trong ví dụ này, chúng ta sẽ tìm hiểu cách sử dụng tính năng nội xạ phụ thuộc trong AngularJS.

Việc tiêm phụ thuộc có thể được thực hiện theo 2 cách

  1. Một là thông qua “Thành phần giá trị”
  2. Một cách khác là thông qua “Dịch vụ”

Chúng ta hãy xem xét việc thực hiện cả hai cách chi tiết hơn.

1) Thành phần giá trị

Khái niệm này dựa trên thực tế là tạo ra một JavaScript đối tượng và chuyển nó đến bộ điều khiển để xử lý tiếp.

Điều này được thực hiện bằng hai bước dưới đây

Bước 1) Tạo ra một JavaĐối tượng Script bằng cách sử dụng thành phần giá trị và đính kèm nó vào mô-đun AngularJS.JS chính của bạn.

Thành phần giá trị có hai tham số; một là khóa và một là giá trị của đối tượng javascript được tạo.

Bước 2) truy cập JavaĐối tượng kịch bản từ Bộ điều khiển Angular.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

NHỮNG BÀI VIẾT LIÊN QUAN

Trong ví dụ mã trên, các bước chính bên dưới đang được thực hiện

  1. sampleApp.value("TutorialID", 5);

Hàm giá trị của mô-đun Angular.JS JS đang được sử dụng để tạo một cặp khóa-giá trị có tên là “TutorialID” và giá trị là “5”.

  1. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

Biến TutorialID hiện có thể truy cập được đối với bộ điều khiển dưới dạng tham số hàm.

  1.  $scope.ID =TutorialID;

Giá trị của TutorialID là 5, hiện đang được gán cho một biến khác gọi là ID trong đối tượng $scope. Điều này đang được thực hiện để giá trị 5 có thể được truyền từ bộ điều khiển sang dạng xem.

  1. {{ID}}

Tham số ID đang được hiển thị trong dạng xem dưới dạng biểu thức. Vì vậy, đầu ra của '5' sẽ được hiển thị trên trang.

Khi đoạn mã trên được thực thi, kết quả sẽ hiển thị như bên dưới

Thành phần giá trị trong Dependency Insert

2) Dịch vụ

Dịch vụ được định nghĩa là một đơn vị JavaĐối tượng tập lệnh bao gồm một tập hợp các hàm mà bạn muốn hiển thị và đưa vào bộ điều khiển của mình.

Ví dụ: “$http” là một dịch vụ trong Angular.JS mà khi được đưa vào bộ điều khiển của bạn sẽ cung cấp các chức năng cần thiết của

( get() , query() , save() , delete(), delete() ).

Sau đó, các chức năng này có thể được gọi từ bộ điều khiển của bạn.

Hãy xem một ví dụ đơn giản về cách bạn có thể tạo dịch vụ của riêng mình. Chúng ta sẽ tạo một dịch vụ cộng đơn giản để cộng hai số.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Trong ví dụ trên, các bước sau được thực hiện

  1.  mainApp.service('AdditionService', function()

Ở đây chúng tôi đang tạo một dịch vụ mới có tên 'AdditionService' bằng cách sử dụng tham số dịch vụ của mô-đun AngularJS JS chính của chúng tôi.

  1.  this.Addition = function(a,b)

Ở đây chúng tôi đang tạo một chức năng mới gọi là Bổ sung trong dịch vụ của mình. Điều này có nghĩa là khi AngularJS khởi tạo AdditionService bên trong bộ điều khiển của chúng tôi, thì chúng tôi sẽ có thể truy cập chức năng 'Addition'. Trong định nghĩa hàm này, chúng ta đang nói rằng hàm này chấp nhận hai tham số a và b.

  1.  return a+b;

Ở đây chúng ta đang xác định phần thân của hàm Addition, chức năng này chỉ đơn giản là thêm các tham số và trả về giá trị gia tăng.

  1.  mainApp.controller('DemoController', function($scope, AdditionService)

Đây là bước chính liên quan đến việc tiêm phụ thuộc. Trong định nghĩa bộ điều khiển của chúng tôi, chúng tôi hiện đang tham chiếu dịch vụ 'AdditionService' của mình. Khi AngularJS thấy điều này, nó sẽ khởi tạo một đối tượng thuộc loại 'AdditionService.'

  1.  $scope.result = AdditionService.Addition(5,6);

Chúng tôi hiện đang truy cập chức năng 'Bổ sung' được xác định trong dịch vụ của chúng tôi và gán nó cho đối tượng $scope của bộ điều khiển.

Vì vậy, đây là một ví dụ đơn giản về cách chúng tôi có thể xác định dịch vụ của mình và đưa chức năng của dịch vụ đó vào bên trong bộ điều khiển của chúng tôi.

Tổng kết

  • Dependency Insert đúng như tên gọi của nó là quá trình đưa chức năng phụ thuộc vào các mô-đun trong thời gian chạy.
  • Việc sử dụng tính năng nội xạ phụ thuộc giúp có mã dễ sử dụng lại hơn. Nếu bạn có chức năng chung được sử dụng trên nhiều mô-đun ứng dụng thì cách tốt nhất là xác định một dịch vụ trung tâm có chức năng đó rồi đưa dịch vụ đó làm phần phụ thuộc vào các mô-đun ứng dụng của bạn.
  • Đối tượng giá trị của AngularJS có thể được sử dụng để đưa vào các thao tác đơn giản JavaĐối tượng tập lệnh trong bộ điều khiển của bạn bằng cách sử dụng $inject trong AngularJS.
  • Mô-đun dịch vụ có thể được sử dụng để xác định các dịch vụ tùy chỉnh của bạn và có thể được sử dụng lại trên nhiều mô-đun AngularJS.

Bạn có thể thích: