Dependency Injection là một mẫu thiết kế phần mềm chỉ định cách thức mà các thành phần nắm giữ các phần phụ thuộc của chúng. Các thành phần được cung cấp các phụ thuộc của chúng thay vì mã hóa chúng. Khả năng tái sử dụng và khả năng bảo trì có thể đạt được bằng cách sử dụng tiêm phụ thuộc. Sự phụ thuộc tối cao trong có thể được thực hiện bởi các thành phần sau:
- Tiêm phụ thuộc giá trị
- Nhà máy tiêm
- Service Injection trong AngularJs
- Các nhà cung cấp
- Không thay đổi
Tiêm phụ thuộc giá trị
Một đối tượng đơn giản trong AngularJs được gọi là một giá trị. Nó có thể là một chuỗi, một số hoặc thậm chí là một đối tượng JavaScript. Nó có thể được sử dụng để chuyển các giá trị trong nhà máy, dịch vụ hoặc bộ điều khiển trong giai đoạn chạy và cấu hình.
Thí dụ:
// xác định một mô-đun
var firstModule = angle.module ('firstModule', [])
// tạo một đối tượng giá trị và truyền dữ liệu cho nó
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
Trong ví dụ này, các giá trị được xác định bằng cách sử dụng hàm value (). Tên của giá trị được chỉ định bởi tham số đầu tiên và tham số thứ hai chỉ định giá trị. Điều này cho phép các nhà máy, dịch vụ và bộ điều khiển tham chiếu các giá trị này bằng chính tên của chúng.
Tiêm một giá trị
Chúng ta có thể đưa một giá trị vào hàm điều khiển AngularJs bằng cách thêm một tham số có cùng tên với giá trị.
Thí dụ:
var firstModule = angle.module ('firstModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', hàm ($ scope, numberValue) {
console.log (numberValue)
})
Nhà máy tiêm
Một chức năng tạo ra các giá trị được gọi là một nhà máy. Nhà máy tạo ra một giá trị theo yêu cầu, bất cứ khi nào một dịch vụ hoặc bộ điều khiển cần một giá trị được đưa vào từ nhà máy. Khi giá trị được tạo, nó được sử dụng lại cho tất cả các dịch vụ và bộ điều khiển.
Nó sử dụng hàm factory để tính toán và trả về giá trị.
Thí dụ:
var firstModule = angle.module ('firstModule', [])
firstModule.factory ('firstFactory', function () {
trả về 'một giá trị'
})
firstModule.controller ('FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
Đưa các giá trị vào nhà máy
Một giá trị có thể được đưa vào nhà máy bằng phương pháp sau:
var firstModule = angle.module ('firstModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', hàm ($ scope, numberValue) {
console.log (numberValue)
})
Cần phải lưu ý rằng giá trịđược sản xuất bởi chức năng nhà máy được tiêm vào, không phải chức năng của chính nhà máy. Hãy tiếp tục với bài viết này về Dependency Injection trong AngularJs.
Service Injection trong AngularJs
Một đối tượng JavaScript đơn có chứa một tập hợp các hàm được gọi là một dịch vụ trong AngularJs. Logic cần thiết để dịch vụ thực hiện được chứa trong hàm. Dịch vụ có thể được tạo bằng cách sử dụng hàm service () trên một mô-đun.
Thí dụ:
// xác định một mô-đun
var firstApp = angle.module ('firstApp', [])
...
// tạo một dịch vụ xác định một phương thức bình phương để trả về bình phương của một số
firstApp.service ('CalciService', hàm (MathService) {
this.square = function (x) {
trả về MathService.multiply (x, x)
}
})
// đưa dịch vụ 'CalciService' vào bộ điều khiển
firstApp.controller ('CalciController', hàm ($ scope, CalciService,
defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
Các nhà cung cấp
Để tạo nội bộ dịch vụ hoặc nhà máy trong giai đoạn cấu hình, chúng tôi sử dụng Nhà cung cấp. Nhà cung cấp là một phương thức nhà máy đặc biệt với hàm get () được sử dụng để trả về giá trị / dịch vụ / nhà máy.
Thí dụ:
// xác định một mô-đun
var firstApp = angle.module ('firstApp', [])
...
// tạo một dịch vụ bằng cách sử dụng nhà cung cấp để xác định một hình vuông phương thức để trả về
bình phương của một số.
firstApp.config (function ($ cung cấp) {
$ cung cấp.provider ('MathService', function () {
cái này. $ get = function () {
var factory =
Factory.multiply = function (x, y) {
trả về x * y
}
trả lại nhà máy
}
})
})
Không thay đổi
Vì người dùng không thể đưa giá trị vào hàm module.config (), chúng tôi sử dụng hằng số. Hằng số được sử dụng để chuyển các giá trị ở giai đoạn cấu hình.
firstApp.constant (“configParam”, “giá trị không đổi”)
Thí dụ:
Các chỉ thị nêu trên có thể được sử dụng theo cách sau:
Tiêm phụ thuộc
Ví dụ về AngularJS Squaring
Nhập số bất kỳ:
X2
Kết quả: {{result}}cách thoát chương trình trong java
var firstApp = angle.module ('firstApp', [])
firstApp.config (function ($ cung cấp) {
$ cung cấp.provider ('MathService', function () {
cái này. $ get = function () {
var factory =
Factory.multiply = function (x, y) {
trả về x * y
}
trả lại nhà máy
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var factory =
Factory.multiply = function (x, y) {
trả về x * y
}
trả lại nhà máy
})
firstApp.service ('CalciService', hàm (MathService) {
this.square = function (x) {
trả về MathService.multiply (x, x)
}
})
firstApp.controller ('CalciController', hàm ($ scope, CalciService, defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
ĐẦU RA:
Với điều này, chúng ta sẽ kết thúc bài viết Dependency Injection trong AngularJs này. C heck out của Edureka, một công ty học trực tuyến đáng tin cậy với mạng lưới hơn 250.000 người học hài lòng trải dài trên toàn cầu.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của Dependency Injection trong AngularJs này và chúng tôi sẽ liên hệ lại với bạn.