เมื่อเร็ว ๆ นี้ฉันกำลังอ่านคู่มือ AngularJS ที่มีสิทธิ์ ด้วยเหตุผลหลายประการ (ส่วนใหญ่เป็นเพราะฉันไม่มีเงินฉันเกลียดมันดังนั้นฉันจึงเลือกดาวน์โหลดเวอร์ชันอิเล็กทรอนิกส์ออนไลน์ (เพราะมันไม่เสียค่าใช้จ่ายฮ่าฮ่า ... ) ตัวอักษรค่อนข้างชัดเจนและเอฟเฟกต์โดยรวมนั้นค่อนข้างดีอย่างไรก็ตามเมื่อฉันเห็นจำนวนหน้าซ้ายของฉัน ต้องการเรียนรู้ แต่ไม่ต้องการเรียนรู้หมายเลขหน้า แต่ไม่ต้องการเรียนรู้หรือไม่?
โชคดีที่ก่อนอ่านหนังสืออิเล็กทรอนิกส์ฉันเป็นพื้นฐานเล็กน้อย ฉันได้เรียนรู้เล็กน้อยในขณะที่ดูวิดีโอจากข้อมูลสองทางที่มีผลผูกพันกับบริการและจากนั้นไปยังระบบการเรียนการสอนฉันมีการติดต่อมากหรือน้อย นอกจากนี้ในระหว่างการมอบหมายการเลือกหลักสูตรพิเศษของเว็บระบบการจัดการชั้นเรียนของนักเรียนอย่างง่ายถูกสร้างขึ้นผ่าน AngularJs ที่ส่วนหน้าและ NodeJS บนแบ็กเอนด์และพังพอนบนแบ็กเอนด์ เนื่องจากฉันไม่มีเงินฉันจึงสามารถวางไว้บน GitHub ได้เท่านั้น ที่อยู่ GitHub: ระบบการจัดการนักเรียนยินดีต้อนรับสู่ Fork มาที่หัวข้อด้านล่าง ...
-
โดยปกติจะมีสามวิธีสำหรับวัตถุที่จะควบคุมการพึ่งพา:
(1) สร้างการพึ่งพาภายใน
(2) การอ้างอิงผ่านตัวแปรทั่วโลก
(3) ผ่านพารามิเตอร์ตามที่จำเป็น
การฉีดพึ่งพานั้นทำได้ในวิธีที่สาม อีกสองวิธีจะนำปัญหาต่าง ๆ เช่นมลพิษในขอบเขตทั่วโลกทำให้การแยกยากมาก ฯลฯ การฉีดขึ้นอยู่กับการออกแบบเป็นรูปแบบการออกแบบที่ขจัดการพึ่งพารหัสยากเพื่อให้การพึ่งพาสามารถเปลี่ยนแปลงหรือลบออกได้ในเวลารันไทม์
ความสามารถในการปรับเปลี่ยนการพึ่งพาที่รันไทม์เหมาะสำหรับการทดสอบเพราะช่วยให้เราสามารถสร้างสภาพแวดล้อมที่แยกได้ซึ่งสามารถใช้วัตถุที่ล้อเลียนแทนวัตถุจริงในสภาพแวดล้อมการผลิต
จากมุมมองการทำงานการฉีดขึ้นอยู่กับการพึ่งพาจะค้นหาการพึ่งพาล่วงหน้าโดยอัตโนมัติและแจ้งทรัพยากรที่ต้องพึ่งพาของเป้าหมายการฉีดเพื่อให้ทรัพยากรสามารถฉีดได้ทันทีเมื่อเป้าหมายต้องการ
เมื่อเขียนส่วนประกอบที่ขึ้นอยู่กับวัตถุหรือไลบรารีอื่น ๆ เราจำเป็นต้องอธิบายการพึ่งพาระหว่างส่วนประกอบ ในระหว่างรันไทม์หัวฉีดจะสร้างอินสแตนซ์ของการพึ่งพาและรับผิดชอบในการส่งผ่านไปยังผู้บริโภคที่ขึ้นอยู่กับ
// ตัวอย่างที่ยอดเยี่ยมจากฟังก์ชั่นเอกสารเชิงมุม someclass (greeter) {this.greeter = greeter;} someclass.prototype.greetName = ฟังก์ชั่น (ชื่อ) {this.greeter.greet (ชื่อ);Someclass สามารถเข้าถึง Greeter ภายในได้ที่รันไทม์ แต่ก็ไม่สนใจว่าจะได้รับการอ้างอิงถึง Greeter อย่างไร เพื่อให้ได้การอ้างอิงถึงอินสแตนซ์ของ Greeter ผู้สร้าง Someclass มีหน้าที่รับผิดชอบในการสร้างการพึ่งพาและผ่านพวกเขา
ด้วยเหตุผลข้างต้น AngularJS ใช้ $ Injetor (บริการหัวฉีด) เพื่อจัดการการสืบค้นและการสร้างอินสแตนซ์ของการพึ่งพา ในความเป็นจริง $ Injetor รับผิดชอบในการสร้างอินสแตนซ์ส่วนประกอบทั้งหมดใน AngularJS รวมถึงโมดูลคำแนะนำและตัวควบคุมของแอปพลิเคชัน
ที่รันไทม์ $ Injetor รับผิดชอบในการสร้างอินสแตนซ์โมดูลใด ๆ เมื่อเริ่มต้นและผ่านการอ้างอิงทั้งหมดที่ต้องการ
ตัวอย่างเช่นรหัสต่อไปนี้ นี่คือแอปพลิเคชั่นง่าย ๆ ที่ประกาศโมดูลและคอนโทรลเลอร์:
Angular.module ('myapp', []). Factory ('greeter', function () {return {greet: function (msg) {Alert (msg);}}}). คอนโทรลเลอร์ ('mycontroller', ฟังก์ชั่น ($ scope, greeter)เมื่อ AngularJS อินสแตนซ์โมดูลนี้มันจะมองหาคำทักทายและผ่านการอ้างอิงตามธรรมชาติ:
<div ng-app = "myapp"> <div ng-controller = "myController"> <button ng-click = "sayhello ()"> สวัสดี </button> </div> </div>
ภายในกระบวนการประมวลผลของ AngularJs มีดังนี้:
// ใช้หัวฉีดเพื่อโหลดแอปพลิเคชัน var injector = angular.injector (['ng', 'myApp']); // โหลดบริการ $ controller ผ่านตัวควบคุม var $ controller = injector.get ('$ controller'); // โหลดตัวควบคุม myController = $ controller ('myController', {$ scope: scope});รหัสข้างต้นไม่ได้ระบุวิธีการค้นหา Greeter แต่ทำงานได้อย่างถูกต้องเพราะ $ Injector จะรับผิดชอบในการค้นหาและโหลดให้เรา
AngularJS แยกรายการพารามิเตอร์จากฟังก์ชั่นที่ผ่านระหว่างการสร้างอินสแตนซ์ผ่านฟังก์ชันคำอธิบายประกอบ ป้อนรหัสต่อไปนี้ลงในเครื่องมือนักพัฒนาของ Chrome เพื่อดูฟังก์ชั่นนี้:
> injector.annotate (ฟังก์ชั่น ($ q, greeter) {}) ["$ q", "greeter"]ในแอปพลิเคชัน AngularJS ใด ๆ $ หัวฉีดกำลังทำงานไม่ว่าเราจะรู้หรือไม่ก็ตาม เมื่อเขียนคอนโทรลเลอร์หากไม่มีการใช้แท็ก [] หรือการประกาศอย่างชัดเจน $ หัวฉีดพยายามที่จะอนุมานการพึ่งพาโดยชื่อพารามิเตอร์
คำสั่งฉีดอนุมาน
หากไม่มีการประกาศที่ชัดเจน AngularJS จะถือว่าชื่อพารามิเตอร์คือชื่อของการพึ่งพา ดังนั้นจึงจะเรียกใช้วิธีการ ToString () ของวัตถุฟังก์ชันวิเคราะห์และแยกรายการพารามิเตอร์ฟังก์ชั่นและฉีดพารามิเตอร์เหล่านี้ลงในอินสแตนซ์ของวัตถุผ่าน $ injector กระบวนการฉีดมีดังนี้:
injector.invoke (ฟังก์ชั่น ($ http, greeter) {});โปรดทราบว่ากระบวนการนี้ใช้ได้เฉพาะกับรหัสที่ไม่มีการบีบอัดและทำให้งงงวยเนื่องจาก AngularJS ต้องการรายการพารามิเตอร์ที่ไม่บีบอัดดิบสำหรับการแยกวิเคราะห์ ด้วยกระบวนการอนุมานตามชื่อพารามิเตอร์นี้ลำดับของพารามิเตอร์มีความสำคัญเพียงเล็กน้อยเนื่องจาก AngularJS จะช่วยให้เราฉีดคุณสมบัติในลำดับที่ถูกต้อง
การประกาศอย่างชัดเจน
AngularJS มีวิธีการที่ชัดเจนเพื่อกำหนดการพึ่งพาอย่างชัดเจนว่าฟังก์ชั่นจำเป็นต้องใช้เมื่อมีการเรียก การประกาศการพึ่งพาในวิธีนี้ยังสามารถทำงานได้อย่างถูกต้องแม้ว่าซอร์สโค้ดจะถูกบีบอัดและการเปลี่ยนแปลงชื่อพารามิเตอร์ คุณสมบัติ $ inject สามารถใช้ในการใช้งานฟังก์ชั่นของการฉีดอย่างชัดเจนของการประกาศ คุณสมบัติ $ inject ของวัตถุฟังก์ชันคืออาร์เรย์ประเภทขององค์ประกอบอาร์เรย์คือสตริงและค่าของพวกเขาคือชื่อของบริการที่ต้องฉีด
นี่คือรหัสตัวอย่าง:
var acontrollerFactory = ฟังก์ชั่น acontroller ($ scope, greeter) {console.log ("คอนโทรลเลอร์โหลด", greeter); // ... คอนโทรลเลอร์}; acontrollerfactory. $ inject = ['$ scope', 'greeter']; // greeter service console.log ("บริการ greeter");} // แอปพลิเคชันคอนโทรลเลอร์ของเรา Angular.module ('myapp', []). คอนโทรลเลอร์ ('mycontroller', acontrollerfactory) .factory ('greeter' injector.get ('$ controller'), rootscope = injector.get ('$ rootscope'), newscope = rootscope. $ new (); // ตัวควบคุมการโทร ('myController', {$ scope: NewsCope});สำหรับวิธีการประกาศนี้คำสั่งของพารามิเตอร์มีความสำคัญมากเนื่องจากลำดับขององค์ประกอบอาร์เรย์ $ inject จะต้องสอดคล้องกันโดยหนึ่งกับลำดับของพารามิเตอร์ที่ฉีด วิธีการประกาศนี้สามารถเรียกใช้ในรหัสบีบอัดได้เนื่องจากข้อมูลที่เกี่ยวข้องของการประกาศนั้นถูกผูกไว้กับฟังก์ชั่นเองแล้ว
คำสั่งฉีดภายในบรรทัด
วิธีสุดท้ายในการฉีดการประกาศที่จัดทำโดย AngularJS คือการประกาศการฉีดแบบอินไลน์ที่สามารถใช้ได้ตลอดเวลา วิธีนี้เป็นน้ำตาลวากยสัมพันธ์ซึ่งเหมือนกับหลักการที่กล่าวถึงข้างต้นสำหรับการประกาศผ่านคุณสมบัติ $ inject แต่ช่วยให้เราสามารถส่งผ่านพารามิเตอร์จากภายในบรรทัดเมื่อมีการกำหนดฟังก์ชั่น นอกจากนี้ยังหลีกเลี่ยงการใช้ตัวแปรชั่วคราวในระหว่างกระบวนการกำหนด
เมื่อกำหนดวัตถุ AngularJS การประกาศในบรรทัดจะช่วยให้เราสามารถผ่านอาร์เรย์ของพารามิเตอร์โดยตรงแทนที่จะเป็นฟังก์ชัน องค์ประกอบของอาร์เรย์คือสตริงซึ่งเป็นตัวแทนของชื่อของการพึ่งพาที่สามารถฉีดเข้าไปในวัตถุได้ พารามิเตอร์สุดท้ายคือวัตถุวัตถุของการฉีดพึ่งพา
ตัวอย่างมีดังนี้:
Angular.Module ('MyApp'). คอนโทรลเลอร์ ('myController', ['$ scope', 'greeter', ฟังก์ชั่น ($ scope, greeter) {}]);เนื่องจากสิ่งที่ต้องดำเนินการคือรายการสตริงการประกาศการฉีดแบบอินไลน์จึงสามารถทำงานได้ตามปกติในรหัสบีบอัด มันมักจะใช้โดยวงเล็บและสัญลักษณ์ [] ที่ประกาศอาร์เรย์
การฉีดพึ่งพา AngularJS ข้างต้นคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น