Các thành phần tiêm phụ thuộc AngularJS

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.

⚠️ Lưu ý về phiên bản: Việc hỗ trợ AngularJS đã kết thúc vào tháng 1 năm 2022., không có bản vá bảo mật. Angular hiện đại tiêm thông qua các nhà cung cấp @Injectable và tiêm()Đoạn mã bên dưới vẫn giữ nguyên tính chất lịch sử.

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

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ẽ tìm hiểu kỹ hơn về injection phụ thuộc và cách thức thực hiện điều này trong... AngularJS.

Thành phần nào có thể được tiêm vào như một dependency trong AngularJS?

Trong AngularJS, các thư viện phụ thuộc được tiêm vào bằng cách sử dụng "phương thức nhà máy có thể tiêm" hoặc "hàm khởi tạo".

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.

Một AngularJS mô-đun Đăng ký các đối tượng có thể tiêm thông qua năm công thức.

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ộ phận tiêm phụ thuộc trong AngularJS sẽ cung cấp một thể hiện của dịch vụ $http cho bộ điều khiển của chúng ta để xử lý tiếp.

Các dạng chú thích: Chú thích ngầm Nó đọc tên tham số, vì vậy việc thu nhỏ mã sẽ làm hỏng nó. Cú pháp mảng nội tuyến và `$inject` đều không bị ảnh hưởng; `ng-strict-di` trên `ng-app` từ chối chú thích ngầm định.

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 việc tạo ra một cái đơn giản JavaScript đối tượng và chuyển nó cho 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 JavaTạo đối tượng script bằng cách sử dụng thành phần `value` và gắn nó vào mô-đun AngularJS 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 JavaĐối tượng kịch bản được tạo ra.

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

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

Đoạn mã trên thực hiện các bước sau:

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

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

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

3.  $scope.ID =TutorialID;

   Giá trị của TutorialID, là 5, hiện đang được gán cho một biến khác có tên là ID trong phạm vi $ đối tượng. Việc này được thực hiện để giá trị 5 có thể được truyền từ bộ điều khiển đến giao diện người dùng.

4. {{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

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 AngularJS, khi được inject vào controller của bạn sẽ cung cấp các chức năng cần thiết.

( 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 ta đang tạo một dịch vụ mới có tên là 'AdditionService' bằng cách sử dụng tham số dịch vụ của mô-đun AngularJS chính.

2.  this.ADDITION = function(a,b)

   Ở đây, chúng ta tạo một hàm mới có tên là ADDITION trong service của mình. Điều này có nghĩa là khi AngularJS khởi tạo AdditionService bên trong controller, chúng ta sẽ có thể truy cập hàm 'ADDITION'. Trong định nghĩa hàm này, chúng ta nói rằng hàm này chấp nhận hai tham số, a và b.

3.  return a+b;

   Ở đây, chúng ta đang định nghĩa phần thân của hàm ADDITION, hàm này đơn giản chỉ cộng các tham số và trả về giá trị đã cộng.

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

   Đây là bước chính liên quan đến việc tiêm phụ thuộc (dependency injection). Trong định nghĩa controller của chúng ta, giờ đây chúng ta đang tham chiếu đến dịch vụ 'AdditionService'. Khi AngularJS thấy điều này, nó sẽ tạo ra một đối tượng thuộc loại 'AdditionService'.

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

   Hiện tại, chúng ta đang truy cập hàm 'ADDITION' được định nghĩa trong dịch vụ của mình 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.

Câu Hỏi Thường Gặp