การฉีดขึ้นอยู่กับ AngularJS
การฉีดพึ่งพา
คำอธิบายเกี่ยวกับวิกิคือ: การฉีดพึ่งพา (DI) เป็นรูปแบบการออกแบบซอฟต์แวร์ที่มีการพึ่งพาอย่างน้อยหนึ่งรายการ (หรือบริการ) ถูกฉีด (หรือส่งผ่านโดยการอ้างอิง) ลงในวัตถุแยกต่างหาก (หรือไคลเอนต์) จากนั้นกลายเป็นส่วนหนึ่งของสถานะของลูกค้า
รูปแบบนี้แยกการสร้างพฤติกรรมการพึ่งพาลูกค้าซึ่งทำให้การเขียนโปรแกรมเป็นคู่อย่างหลวม ๆ และเป็นไปตามหลักการของการพลิกกลับการพึ่งพาและความรับผิดชอบเดี่ยว ในทางตรงกันข้ามโดยตรงกับรูปแบบตัวระบุตำแหน่งบริการช่วยให้ลูกค้าเข้าใจว่าไคลเอนต์ใช้ระบบเพื่อค้นหาการพึ่งพาอย่างไร
กล่าวอีกครั้ง-ถ้าคุณไม่มีอะไรทำอย่ามาหาฉันฉันจะไปหาคุณถ้าคุณมีอะไรต้องทำ
AngularJS ให้กลไกการฉีดพึ่งพาที่ดี ส่วนประกอบ 5 หลักต่อไปนี้ใช้เป็นการฉีดพึ่งพา:
ค่า
โรงงาน
บริการ
ผู้ให้บริการ
คงที่
ค่า
ค่าเป็นวัตถุ JavaScript อย่างง่ายที่ส่งผ่านค่าไปยังคอนโทรลเลอร์ (เฟสการกำหนดค่า):
var mainapp = angular.module ("mainapp", []); // สร้างวัตถุค่า "defaultInput" และส่งข้อมูล mainapp.value ("defaultInput", 5); ... // inject "defaultInput" ลงในตัวควบคุม MainApp.controller ('Calccontroller' calcservice.square ($ scope.number);โรงงาน
โรงงานเป็นฟังก์ชั่นที่ส่งคืนค่า สร้างขึ้นเมื่อต้องการบริการและคอนโทรลเลอร์
โดยปกติแล้วเราจะใช้ฟังก์ชั่นจากโรงงานเพื่อคำนวณหรือส่งคืนค่า
// กำหนดโมดูล var mainapp = angular.module ("mainapp", []); // สร้างโรงงาน "MathService" ใช้เพื่อทวีคูณผลิตภัณฑ์ของสอง numbersmainapp.factory ('MathService', function () {var Factory = {}; // Inject Factory "MathService" ใน Service MainApp.Service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) {return mathservice.multiply (a, a);}}); ...ผู้ให้บริการ
ใน AngularJS บริการโรงงาน ฯลฯ ถูกสร้างขึ้นผ่านผู้ให้บริการ (ขั้นตอนการกำหนดค่า)
วิธีการจากโรงงานได้รับ () มีให้ในผู้ให้บริการซึ่งใช้เพื่อส่งคืนค่า/บริการ/โรงงาน
// กำหนดโมดูล var mainapp = angular.module ("mainapp", []); ... // สร้างบริการโดยใช้ผู้ให้บริการกำหนดวิธีการคำนวณผลิตภัณฑ์ของสองตัวเลข mainapp.config (ฟังก์ชั่น ($ ให้) {$ provel.provider ('mathService', ฟังก์ชัน () B;คงที่
ค่าคงที่ (ค่าคงที่) ใช้เพื่อส่งค่าตัวเลขในระหว่างขั้นตอนการกำหนดค่า โปรดทราบว่าค่าคงที่นี้ไม่สามารถใช้ได้ในระหว่างขั้นตอนการกำหนดค่า
MainApp.Constant ("configparam", "ค่าคงที่");
ตัวอย่าง
ตัวอย่างต่อไปนี้ให้การสาธิตกลไกการฉีดขึ้นอยู่กับการพึ่งพาหลายประการ
<html> <head> <meta charset = "utf-8"> <title> angularjs การฉีดขึ้นอยู่กับการพึ่งพา </title> </head> <body> <h2> แอปพลิเคชันง่าย ๆ </h2> <div ng-app = "mainapp" ng-controller = "calccontroller" ng-click = "square ()"> x <up> 2 </sup> </button> <p> ผลลัพธ์: {{ผลลัพธ์}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.min.js" - mainapp.config (ฟังก์ชั่น ($ prost) {$ provels.provider ('MathService', function () {this. $ get = function () {var Factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;}; - MainApp.Value ("DefaultInput", 5); MainApp.Factory ('MathService', function () {var Factory = {}; factory.multiply = function (a, b) {return a * b;} return Factory;}); mainapp.service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) {return mathservice.multiply (a, a);}}); mainapp.controller ('calccontroller', ฟังก์ชั่น ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcservice.square ($ scope.number); $ scope.square = function () </script> </body> </html>ผลการทำงาน:
ข้างต้นคือการเรียงลำดับของข้อมูลสำหรับการฉีด AngularJs เราจะเพิ่มในภายหลัง ฉันหวังว่ามันจะช่วยเพื่อนที่พัฒนา AngularJs