การฉีดพึ่งพาเป็นรูปแบบการออกแบบซอฟต์แวร์ที่ให้ไว้ในส่วนประกอบที่แทนที่การเข้ารหัสการพึ่งพาของพวกเขาภายในองค์ประกอบที่ยาก สิ่งนี้จะช่วยลดส่วนประกอบจากการพึ่งพาตำแหน่งการกำหนดค่าการพึ่งพา สิ่งนี้จะช่วยให้ส่วนประกอบนำมาใช้ใหม่ได้รับการดูแลและทดสอบ
AngularJS ให้กลไกการฉีดขึ้นอยู่กับการพึ่งพาสูงสุด มันมีองค์ประกอบหลักที่ฉีดได้ซึ่งขึ้นอยู่กับกันและกัน
ค่า
โรงงาน
ให้บริการ
ผู้ให้บริการ
เสมอ
ค่า
ค่าเป็นวัตถุ JavaScript อย่างง่ายที่ใช้ในการส่งผ่านค่าในระหว่างการกำหนดค่าเฟสคอนโทรลเลอร์
// กำหนด modulevar mainapp = angular.module ("mainapp", []); // สร้างวัตถุค่าเป็น "defaultInput" และส่งผ่าน data.mainapp.value ("defaultInput", 5); ... // inject ในคอนโทรลเลอร์ $ scope.number = defaultInput; $ scope.result = calcservice.square ($ scope.number);โรงงาน
โรงงานใช้เพื่อส่งคืนค่าของฟังก์ชั่น มันสร้างมูลค่าตามความต้องการเมื่อใดก็ตามที่บริการหรือคอนโทรลเลอร์ต้องการ มันมักจะใช้ฟังก์ชันโรงงานเพื่อคำนวณและส่งคืนค่าที่เกี่ยวข้อง
// กำหนด modulevar mainapp = angular.module ("mainapp", []); // สร้างโรงงาน "MathService" ซึ่งให้วิธีการคูณเพื่อส่งคืนการคูณของสอง numbersmainapp.factory ('MathService', ฟังก์ชั่น () {Varkatory = {}; // ฉีด "MathService" จากโรงงานในบริการเพื่อใช้วิธีการคูณของโรงงาน. mainapp.service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) {return mathservice.multiply (a, a);}});ให้บริการ
บริการเป็นจาวาสคริปต์เดียวที่มีชุดของวัตถุฟังก์ชันเพื่อทำงานบางอย่าง บริการใช้ฟังก์ชั่นบริการ () และฉีดเข้าไปในคำจำกัดความของคอนโทรลเลอร์
// กำหนด modulevar mainapp = angular.module ("mainapp", []); ... // สร้างบริการที่กำหนดวิธีการสี่เหลี่ยมจัตุรัสเพื่อส่งคืนสี่เหลี่ยมจัตุรัส mainapp.service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) ControllerMainApp.Controller ('Calccontroller', ฟังก์ชั่น ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcservice.square ($ scope.number); $ scope.square = function ()ผู้ให้บริการ
ผู้ให้บริการใช้บริการโรงงาน ฯลฯ ในระหว่างขั้นตอนการกำหนดค่าของกระบวนการสร้างภายใน AngularJS (เช่นระหว่างการบูต AngularJS เอง) สคริปต์ที่กล่าวถึงด้านล่างสามารถใช้เพื่อสร้างเราได้สร้าง MathService ล่วงหน้า ผู้ให้บริการเป็นวิธีการโรงงานพิเศษและวิธีรับ () เพื่อส่งคืนค่า/บริการ/โรงงาน
// กำหนด modulevar mainapp = angular.module ("mainapp", []); ... // สร้างบริการโดยใช้ผู้ให้บริการซึ่งกำหนดวิธีการสี่เหลี่ยมจัตุรัสเพื่อส่งคืนสี่เหลี่ยมจัตุรัสของ number.mainapp.config (ฟังก์ชั่น ($ ให้) {$ provel.provider ('mathservice', ฟังก์ชัน () {return a * b;คงที่
ค่าคงที่ถูกใช้เพื่อพิจารณาข้อเท็จจริงโดยการกำหนดค่าเฟสค่าไม่สามารถส่งผ่านได้ในระหว่างขั้นตอนการกำหนดค่า
MainApp.Constant ("configparam", "ค่าคงที่");
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<Html> <head> <title> การฉีดพึ่งพา AngularJS </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJs </h2> <div ng-app = "mainapp" ng-controller = "calccontroller"> <p> ป้อนตัวเลข: < ng-click = "square ()"> x <up> 2 </sup> </button> <p> ผลลัพธ์: {{result}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min Angular.Module ("MainApp", []); 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>ผลลัพธ์
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้
ข้างต้นคือการรวบรวมข้อมูลสำหรับการฉีดขึ้นอยู่กับ AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!