Angular เข้าใจโมดูลและหัวฉีดนั่นคือการฉีดพึ่งพา

ประโยชน์ของการฉีดพึ่งพา (DI) จะไม่ถูกกล่าวถึงอีกต่อไปและผู้ที่ใช้กรอบฤดูใบไม้ผลิรู้ ในฐานะที่เป็นเฟรมเวิร์ก JS เบื้องหน้า AngularJS ยังให้การสนับสนุน DI ซึ่งเป็นคุณสมบัติที่ JavaScript/JQuery ไม่มี DI ที่เกี่ยวข้องกับ AngularJs รวมถึง Angular.module (), Angular.injector (), $ injector และ $ PRIST สำหรับคอนเทนเนอร์ DI นั้นจะต้องมีสามองค์ประกอบ: การลงทะเบียนบริการการประกาศการพึ่งพาและการได้มาของวัตถุ ตัวอย่างเช่นในฤดูใบไม้ผลิการลงทะเบียนของบริการจะถูกนำไปใช้ผ่านแท็ก <bean> ของไฟล์การกำหนดค่า XML หรือคำอธิบายประกอบ @Repository, @Service, @Controller และ @Component; การได้มาของวัตถุสามารถนำไปใช้โดย ApplicationContext.getBean (); การประกาศการพึ่งพาสามารถกำหนดค่าในไฟล์ XML หรือสามารถประกาศในรหัส Java โดยใช้ @Resource และคำอธิบายประกอบอื่น ๆ ใน Angular โมดูลและ $ PRIST เทียบเท่ากับการลงทะเบียนของบริการ หัวฉีดจะใช้เพื่อรับวัตถุ (เชิงมุมจะทำการฉีดโดยอัตโนมัติ); มี 3 วิธีในการประกาศการพึ่งพาในเชิงมุม ต่อไปนี้เป็นการแนะนำเกี่ยวกับ DI เชิงมุมจาก 3 ด้านนี้

1. Angular.Module () สร้าง, รับและลงทะเบียนโมดูลใน Angular

Angular.module () เป็นสถานที่ระดับโลกสำหรับการสร้างการลงทะเบียนและดึงโมดูลเชิงมุมเมื่อผ่านข้อโต้แย้งสองข้อขึ้นไปจะมีการสร้างโมดูลใหม่ หากผ่านอาร์กิวเมนต์เดียวโมดูลที่มีอยู่ (ชื่อที่ส่งผ่านเป็นอาร์กิวเมนต์แรกไปยังโมดูล) จะถูกเรียกคืน

 // การผ่านพารามิเตอร์มากกว่าหนึ่งพารามิเตอร์หมายถึงโมดูลใหม่ อาร์เรย์ที่ว่างเปล่าหมายความว่าโมดูลไม่ได้พึ่งพาโมดูลอื่น ๆ var createModule = angular.module ("mymodule", []); // มีเพียงพารามิเตอร์เดียว (ชื่อโมดูล) ซึ่งหมายถึงการได้รับโมดูล // ถ้าโมดูลไม่มี การแจ้งเตือน (createModule == getModule);

ฟังก์ชั่นนี้สามารถสร้างโมดูลใหม่หรือรับโมดูลที่มีอยู่ ไม่ว่าจะสร้างหรือได้รับมันมีความแตกต่างจากจำนวนพารามิเตอร์

Angular.module (ชื่อ, [ต้องการ], [configfn]);

ชื่อ: ประเภทสตริงแสดงชื่อของโมดูล;

ต้องใช้: อาร์เรย์ของสตริงแสดงรายการของโมดูลอื่น ๆ ที่โมดูลขึ้นอยู่กับ หากคุณไม่พึ่งพาโมดูลอื่นให้ใช้อาร์เรย์ที่ว่างเปล่า

configfn: ใช้เพื่อกำหนดค่าบางอย่างกับโมดูลนี้

ตอนนี้เรารู้วิธีสร้างและรับโมดูลดังนั้นโมดูลคืออะไร? มีเพียงหนึ่งประโยคในคู่มือนักพัฒนาอย่างเป็นทางการ: คุณสามารถนึกถึงโมดูลเป็นคอนเทนเนอร์สำหรับส่วนต่าง ๆ ของตัวควบคุมแอพบริการตัวกรองคำสั่ง ฯลฯ ฉันไม่เข้าใจเลย มันหมายความว่าโมดูลเป็นชุดของฟังก์ชั่นบางอย่างเช่นองค์ประกอบเด็กทั้งหมดเช่นคอนโทรลเลอร์บริการตัวกรองคำแนะนำ ฯลฯ ฉันไม่สามารถอธิบายได้ตอนนี้ดังนั้นฉันจะทิ้งไว้ก่อน

2. ความสัมพันธ์ระหว่าง $ PRIST และ MODULE

บริการ $ PRISTIC มีหลายวิธีในการลงทะเบียนส่วนประกอบด้วย $ injector ฟังก์ชั่นเหล่านี้จำนวนมากยังเปิดเผยบน Angular.module

ดังที่ได้กล่าวไว้ก่อนหน้านี้: โมดูลและให้ใช้เพื่อลงทะเบียนบริการลงในหัวฉีด ตรวจสอบ API อย่างเป็นทางการและคุณจะเห็นได้ว่า $ PRIST ให้ (), ค่าคงที่ (), ค่า (), โรงงาน () และบริการ () เพื่อสร้างบริการของธรรมชาติต่างๆ Angular.Module ยังให้วิธีการลงทะเบียนบริการทั้ง 5 วิธี ในความเป็นจริงฟังก์ชั่นของทั้งสองนั้นเหมือนกันทุกประการซึ่งใช้ในการลงทะเบียนบริการกับคอนเทนเนอร์ DI ลงในหัวฉีด

Auto ภายใต้ API อย่างเป็นทางการรวมถึง $ PRITCE และ $ Injector โมดูลโดยนัยซึ่งจะได้รับการเพิ่มในแต่ละ $ หัวฉีดโดยอัตโนมัติ แท้จริงแล้วแต่ละหัวฉีดมีบริการโดยนัย 2 ประการนี้ แต่ในเวอร์ชัน 1.2.25 ฉันรู้สึกว่าไม่มีวิธีที่จะได้รับ $ ให้ในหัวฉีด ฉันไม่รู้ว่าทำไมถึงเป็นเช่นนี้? โดยทั่วไปคุณไม่จำเป็นต้องแสดงบริการนี้เพียงใช้ API ที่ให้ไว้ในโมดูล

 var injector = angular.injector (); Alert (injector.has ("$ pertive")); // falsealert (injector.has ("$ injector")); // true

3. Angular.injector ()

คุณยังสามารถรับหัวฉีดโดยใช้ angular.injector (); แต่มันไม่ผูกพันกับโมดูล วิธีการนี้ไม่มีความหมายเทียบเท่ากับการสร้างคอนเทนเนอร์ DI ที่ว่างเปล่าและไม่มีบริการในนั้นคนอื่นจะใช้มันได้อย่างไร? วิธีที่ถูกต้องคือการระบุโมดูลที่ต้องโหลดเมื่อสร้างหัวฉีด

 // สร้างโมดูล mymodule และการลงทะเบียนบริการ var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', ฟังก์ชั่น () {this.my = 0;}); {this.her = 1;}); // โหลด service var injector = angular.injector (["mymodule", "hermodule"]); แจ้งเตือน (injector.get ("myservice"). my); แจ้งเตือน (injector.get ("herservice");

หากมีการโหลดหลายโมดูลบริการภายใต้โมดูลหลายโมดูลสามารถรับได้ผ่านหัวฉีดที่ส่งคืน ในตัวอย่างนี้หากมีการโหลด mymoudle เพียงหัวฉีดที่ได้รับไม่สามารถเข้าถึงบริการภายใต้ Hermoudle เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องทราบที่นี่: Angular.injector () สามารถเรียกได้หลายครั้งและทุกครั้งที่ส่งคืนวัตถุหัวฉีดที่สร้างขึ้นใหม่

 var injector1 = angular.injector (["mymodule", "hermodule"]); var injector2 = angular.injector (["mymodule", "hermodule"]); แจ้งเตือน (injector1 == injector2);

4. สามวิธีในการประกาศการพึ่งพาในเชิงมุม

Angular ให้สามวิธีในการรับการพึ่งพา: การอนุมาน, คำอธิบายประกอบและวิธีการแบบอินไลน์

 // สร้างโมดูล mymodule และลงทะเบียนบริการ var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', ฟังก์ชั่น () {this.my = 0;}); inferenceInjector.invoke (ฟังก์ชั่น (myservice) {Alert (myservice.my);}); // คำอธิบายประกอบที่สองอย่างชัดเจน (servicea) {Alert (servicea.my);}; Explicit. $ inject = ['MyService']; inlineinjector.invoke (['myservice', ฟังก์ชั่น (servicea) {Alert (servicea.my);}]);

ในหมู่พวกเขาวิธีการอธิบายประกอบและอินไลน์ไม่จำเป็นต้องใช้ชื่อพารามิเตอร์ฟังก์ชันซึ่งแนะนำ; วิธีการอนุมานต้องการให้ชื่อพารามิเตอร์และชื่อบริการสอดคล้องกัน หากรหัส JS ถูกบีบอัดหรือทำให้งงจะมีปัญหากับฟังก์ชั่นและไม่แนะนำให้ใช้วิธีนี้

ข้างต้นเป็นการรวบรวมข้อมูลที่ถูกฉีดโดยการพึ่งพา AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!