Dependency Injection trong AngularJS với ví dụ

Mục lục:

Anonim

Dependency Injection trong AngularJS là gì?

Dependency Injection là một mẫu thiết kế phần mềm thực hiện đảo ngược kiểm soát để giải quyết các phần phụ thuộc.

Inversion of Control : 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 các đối tượng này từ một nguồn bên ngoài. Điều này tạo thành cơ sở của tiêm phụ thuộc, 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, là AngularJS framework chính nó) tạo ra đối tượng phụ thuộc và đưa nó cho đối tượng nguồn để sử dụng thêm.

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

Sơ đồ trên cho thấy một ví dụ đơ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 để 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 để "lớp Model" hoạt động.
  • Bằng cách tiêm 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 tiêm phụ thuộc và cách điều này được thực hiện trong AngularJS.

Trong hướng dẫn này, bạn sẽ học-

  • Thành phần nào có thể được đưa vào làm phụ thuộc trong AngularJS
  • Ví dụ về tiêm phụ thuộc
    • Thành phần giá trị
    • Dịch vụ

Thành phần nào có thể được đưa vào làm phụ thuộc trong AngularJS

Trong Angular.JS, các phụ thuộc được đưa vào bằng cách sử dụng "phương pháp 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 đưa vào các thành phần "dịch vụ" và "giá trị" như là các thành phần phụ thuộc. Chúng tôi đã thấy điều này trong một 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ừ cơ sở dữ liệu MySQL hoặc MS SQL Server thông qua một ứng dụng web PHP.

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ư hình trên. Nó có nghĩa là bộ điều khiển bây giờ 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 chạy 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", 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ử dụng hàm 'factory' để xây dựng một đối tượng $ http.
  3. Sau đó, bộ phun trong Angular.JS 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ụ thuộc đã được đưa vào bộ điều khiển của chúng tôi, bây giờ chúng tôi có thể gọi các chức năng cần thiết trong dịch vụ $ http để xử lý thêm.

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

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. Khác là thông qua "Dịch vụ"

Hãy xem xét cách thực hiện của cả hai cách một 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 một đối tượng JavaScript đơn giản và chuyển nó cho bộ điều khiển để xử lý thêm.

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

Bước 1) Tạo một đối tượng JavaScript 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ị nhận 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 đối tượng JavaScript từ bộ điều khiển Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

Trong ví dụ mã trên, các bước chính dưới đây đ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 gọi là "TutorialID" và giá trị "5".

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

Biến TutorialID bây giờ có thể truy cập được đối với bộ điều khiển dưới dạng một 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 có tên là ID trong đối tượng $ scope. Điều này đang được thực hiện để giá trị của 5 có thể được truyền từ bộ điều khiển đến chế độ xem.

  1. {{TÔI}}

Tham số ID đang được hiển thị trong dạng xem dưới dạng một 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ẽ được hiển thị như bên dưới

2) Dịch vụ

Dịch vụ được định nghĩa là một đối tượng JavaScript đơn 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 (), remove (), delete ()).

Các chức năng này sau đó có thể được gọi từ bộ điều khiển của bạn cho phù hợp.

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 tôi sẽ tạo ra một dịch vụ bổ sung đơn giản để thêm hai số.

Event Registration

Guru99 Global Event




Result: {{result}}

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 là '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 có tên là Addition trong dịch vụ của chúng tôi. Điều này có nghĩa là khi AngularJS khởi tạo AdditionService của chúng tôi 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 vào 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, hàm 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 bao gồm 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 đến dịch vụ 'AdditionService' của chúng tôi. Khi AngularJS nhìn thấy điều này, nó sẽ khởi tạo một đối tượng kiểu 'AdditionService.'

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

Bây giờ chúng tôi đang truy cập hàm 'Addition' được định nghĩa 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óm lược:

  • Dependency Injection như tên của nó là quá trình đưa chức năng phụ thuộc vào các mô-đun tại thời điểm chạy.
  • Sử dụng chèn phụ thuộc giúp tạo mã có thể sử dụng lại nhiều 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 với chức năng đó và sau đó đưa dịch vụ đó vào làm phụ thuộc trong 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 các đối tượng JavaScript đơn giản vào bộ điều khiển của bạn.
  • 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 có thể được sử dụng lại trên nhiều mô-đun AngularJS.