Dependency Injection

Dependency Injection (DI) là một mẫu thiết kế của ứng dụng vô cùng quan trọng. Angular có khung Dependency Injection riêng và Angular Team thực sự không thể xây dựng một ứng dụng sử dụng Angular mà không có nó.Tuy nhiên, nó chỉ ra rằng DI hiện nay ở Angular 1 có một số vấn đề cần được giải quyết ở Angular 2.

Trong chương này chúng ta sẽ tìm hiểu về Dependency Injection, DI là gì, tại sao chúng ta cần DI, các vấn đề của DI trong Angular 1 và làm thế nào để sử dụng DI.

Dependency Injection là một pattern

car

Mọi thứ cần dể tạo ra Car đều được khởi tạo ở constructor nên :

  • Khó để thay đổi và phát triển.
    Khi muốn tạo 1 chiếc ô tô với những yêu cầu đằc biệt là điều rất khó khăn.
  • Khó để kiểm tra
    Vì có quá nhiều phụ thuộc liên quan đến nhau Chuyển về 1 dạng tốt hơn

Chúng ta sẽ loại bỏ bớt các phụ thuộc ở bên trên và được kết quả khả quan hơn. car2

Chúng ta đã chuyển các phụ thuộc ở constructor đi và mở rộng các chức năng mới. Và khi cần tạo 1 Car, ta chỉ cần.

newcar

Các phụ thuộc đã được tách ra trong Class qua đó giả quyết vấn đề về phụ thuộc. Chúng ta cũng có thể dừng các bài kiểm tra thông qua Mock mock Và đoán xem, đây là dependency injection. Để có một chút cụ thể hơn, khuôn mẫu đặc biệt này cũng được gọi là constructor injection. Có hai mẫu tiêm khác, setter injection và interface injection, nhưng chúng ta sẽ không bao gồm chúng trong bài viết này.

Dependency Injection là một framework

Như chúng ta đều biết, Angular 1 có nó là hệ thống DI riêng mà cho phép chúng ta để annotate các dịch vụ và các thành phần khác để cho các DI, những gì phụ thuộc cần phải được khởi tạo. Ví dụ, các mã sau đây cho thấy làm thế nào chúng ta có thể annotate lớp Car ở Angular 1 và sử dụng chúng khi cần

Đây là tất cả nhưng gì thể hiện rằng DI hiện có một số vấn đề mặc dù:

  • Bộ nhớ cache nội bộ - phụ thuộc được phục vụ như là độc thân. Bất cứ khi nào chúng tôi yêu cầu cho một dịch vụ, nó được tạo ra chỉ một lần mỗi vòng đời ứng dụng. Tạo máy móc nhà máy là khá rậm.
  • Không gian va chạm - Có thể chỉ là một dấu hiệu của một "loại" trong một ứng dụng. Nếu chúng ta có một dịch vụ xe, và có một phần mở rộng của bên thứ ba mà còn giới thiệu một dịch vụ có cùng tên, chúng tôi có một vấn đề.
  • Được xây dựng framework - góc DI 1 được nướng ngay vào khuôn khổ. Không có cách nào để chúng ta sử dụng nó tách riêng như một hệ thống độc lập. Những vấn đề này cần phải được giải quyết để lấy DI các góc để cấp độ tiếp theo.

Dependency Injection trong Angular 2

Trong Angular 2 , DI gồm 3 thành phần cơ bản:

  • Injector - Các đối tượng injector đó cho thấy nhiều API cho chúng tôi để tạo ra trường phụ thuộc.
  • Provider - là như một công thức mà nói với các Injection làm “như thế nào” để tạo ra một thể hiện của một phụ thuộc. Một Provider có một mã token và maps đến một chức năng ra một đối tượng.
  • Dependency - Một phụ thuộc là các type trong đó có một đối tượng cần được tạo ra.

Thực sự trong AngularJs 2 , DI được sử dụng như sau :

Ta thấy Import Injection từ file có tên di với địa chỉ "angular2/di".

  • Qua đó chúng ta có thể sử dụng một số hàm API tĩnh như resolveAndCreate() với chức năng tạo ra 1 danh sách các Provider (Car, Engine,Tires,Doors)
  • Tạo ra 1 Object Car với hàm injector.get(Car);

Viết đầy đủ có lẽ sẽ dễ hiểu hơn.

Dependencies tạm thời và Child Injectors

Dependencies tạm thời Nếu chúng ta cần một Dependencies tạm thời, một cái gì đó mà chúng ta muốn có một trường hợp mới mỗi khi chúng tôi yêu cầu cho một sự phụ thuộc, chúng ta có hai lựa chọn: Factories có thể quay trở lại trường hợp của các lớp học. Những người sẽ không thể độc thân.

Chúng ta có thể tạo Child Injectors dùng Injector.resolveAndCreateChild().Một Child Injectors giới thiệu các ràng buộc riêng của mình và một thể hiện của một đối tượng sẽ khác nhau từ dụ các Parent Injectors.

Kim phun con thậm chí còn thú vị hơn. Nó chỉ ra rằng một Child Injectors sẽ tìm kiếm một mã thông báo ràng buộc vào nó là Parent Injectors nếu không có tính ràng buộc đối với các token cung cấp đăng ký trên child injector .

Khi Child Injection dưới cùng khi được gọi sẽ sử dụng Engine của Child Injection anh bên trên và Tires,Doors của Parent Injection.

Làm thế nào để sử dụng DI ở Angular 2 ?

Không có gì đặc biệt ở đây. Nếu đây là hoàn toàn mới đối với bạn, bạn có thể muốn đọc bài viết của chúng tôi về việc xây dựng một zippy thành phần trong góc 2. Cho phép nói rằng chúng tôi muốn mở rộng thành phần này bằng cách sử dụng một NameService được sử dụng trong xây dựng các thành phần. Một dịch vụ như vậy có thể tìm một cái gì đó như thế này: Như các phần trước chúng ta có một Class đơn giản như sau : Và có một service Để sử dụng service ta cần thêm vào bootstrap. Ta có thể tiêm Service qua Contructor Injection.

Hay theo cấu trúc của TypeScript

Chúng ta cũng có thể tiêm chúng qua Provider.