1. โมดูลคืออะไร?
แอปพลิเคชันจำนวนมากมีวิธีการหลักสำหรับการเริ่มต้นการโหลด (สายไฟมีความหมายหรือไม่) และการเปิดใช้งานแอปพลิเคชัน แอปพลิเคชันเชิงมุมไม่จำเป็นต้องใช้วิธีหลัก แต่โมดูลจะจัดทำแบบฟอร์มการประกาศด้วยวัตถุประสงค์ที่ระบุคำอธิบายเชิงพรรณนาเกี่ยวกับวิธีการเริ่มต้นแอปพลิเคชัน มีข้อดีหลายประการในการทำเช่นนี้:
2. พื้นฐาน
เรากระตือรือร้นที่จะรู้วิธีทำให้โมดูล Hello World ทำงานได้อย่างไร นี่คือสิ่งสำคัญบางอย่างที่ให้ความสนใจกับ:
โมดูล API (http://code.angularjs.org/1.0.2/docs/api/angular.module)
หมายเหตุโมดูล myApp ที่กล่าวถึงใน <html ng-app = "myapp"> ซึ่งช่วยให้ตัวเรียกใช้งานเริ่มโมดูล myApp ที่เรากำหนดไว้
<! doctype html> <html lang = "zh-cn" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> พื้นฐาน </title> <style type = "text/css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div> {{'คิตตี้' | greet}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var simplemodule = angular.module ("myApp", []); simpleModule.filter ("ทักทาย", ฟังก์ชั่น () {ฟังก์ชั่นส่งคืน (ชื่อ) {return "hello" + name + "!";}}); </script> </body> </html>3. (การตั้งค่าที่แนะนำ) การตั้งค่าที่แนะนำ
แม้ว่าตัวอย่างข้างต้นนั้นง่าย แต่ก็ไม่ใช่แอปพลิเคชันขนาดใหญ่ เราขอแนะนำให้แยกแอปพลิเคชันของคุณออกเป็นหลายโมดูลดังนี้:
เหตุผลสำหรับการแบ่งนี้คือเมื่อเราทำการทดสอบเรามักจะต้องเพิกเฉยต่อรหัสการเริ่มต้นที่ทำให้การทดสอบยาก โดยการแบ่งรหัสออกเป็นโมดูลแยกต่างหากมันเป็นเรื่องง่ายที่จะเพิกเฉยต่อรหัสนั้นในการทดสอบ ด้วยวิธีนี้เราสามารถมุ่งเน้นไปที่การโหลดโมดูลที่สอดคล้องกันสำหรับการทดสอบ
ข้างต้นเป็นเพียงข้อเสนอแนะคุณสามารถทำให้เป็นไปตามที่คุณต้องการ
4. การโหลดโมดูลและการพึ่งพา (การโหลดโมดูลและการพึ่งพา)
โมดูลคือการรวบรวมการกำหนดค่าที่ดำเนินการบล็อกที่ใช้ในกระบวนการเริ่มต้นแอปพลิเคชัน ในรูปแบบที่ง่ายที่สุดประกอบด้วยสองประเภทของบล็อก:
1. บล็อกการกำหนดค่า: ดำเนินการในระหว่างกระบวนการลงทะเบียนผู้ให้บริการและการกำหนดค่า เฉพาะผู้ให้บริการและค่าคงที่ (คงที่?) เท่านั้นที่สามารถฉีดลงในบล็อกการกำหนดค่า นี่คือการหลีกเลี่ยงอุบัติเหตุที่บริการจะดำเนินการก่อนที่จะกำหนดค่าบริการ
2. เรียกใช้บล็อก: ดำเนินการหลังจากสร้างหัวฉีดและใช้เพื่อเริ่มแอปพลิเคชัน มีเพียงอินสแตนซ์และค่าคงที่เท่านั้นที่สามารถฉีดเข้าไปในบล็อกการเรียกใช้ นี่คือการหลีกเลี่ยงการดำเนินการกำหนดค่าระบบเพิ่มเติมระหว่างการทำงานของโปรแกรม
Angular.module ('mymodule', []) config (ฟังก์ชั่น (injectables) {// ผู้ให้บริการ injector // นี่คือตัวอย่างของ config block // เราสามารถรับสิ่งต่าง ๆ ได้ตามที่ต้องการ // เราสามารถฉีดผู้ให้บริการ (ไม่ใช่อินสแตนซ์ไม่ใช่อินสแตนซ์) ลงในบล็อก config}) run (ฟังก์ชั่น (injectables) {// instance-injector // นี่คือตัวอย่างของการเรียกใช้บล็อก // เราสามารถรับสิ่งต่าง ๆ ได้ตามต้องการ // เราสามารถฉีดอินสแตนซ์เท่านั้น (อินสแตนซ์) (ไม่ใช่ผู้ให้บริการ) ลงในบล็อกเรียกใช้});a) บล็อกการกำหนดค่า
มีวิธีที่สะดวกในการทำในโมดูลซึ่งเทียบเท่ากับการกำหนดค่าบล็อก ตัวอย่างเช่น:
Angular.module ('mymodule', []) ค่า ('A', 123) โรงงาน ('A', function () {return 123;}) Directive ('Directivename', ... ) ตัวกรอง ('filtername', ... ); // เทียบเท่ากับ angular.module ('mymodule', []) config (function ($ provel, $ compileProvider, $ filterProvider) {$ provists.value ('a', 123) $ prevent.factory ('a', function () {return 123;}) $ compileProvider.directive ('directiveName', ... )คำสั่งซื้อบล็อกการกำหนดค่านั้นสอดคล้องกับลำดับที่ลงทะเบียน สำหรับคำจำกัดความคงที่มันเป็นกรณีเพิ่มเติมเช่นคำจำกัดความคงที่ที่วางไว้ที่จุดเริ่มต้นของบล็อกการกำหนดค่า
b) เรียกใช้บล็อก (แอปพลิเคชันบล็อก)
Run Block เป็นสิ่งที่ใกล้เคียงที่สุดกับวิธีหลักใน Angular การเรียกใช้บล็อกคือรหัสที่ต้องดำเนินการเพื่อเริ่มแอปพลิเคชัน มันจะถูกดำเนินการหลังจากการกำหนดค่าบริการและหัวฉีดทั้งหมดถูกสร้างขึ้น การเรียกใช้บล็อกมักจะมีรหัสที่ยากต่อการทดสอบหน่วย ด้วยเหตุผลนี้รหัสเหล่านี้ควรกำหนดไว้ในโมดูลแยกต่างหากเพื่อให้สามารถละเว้นในการทดสอบหน่วย
c) การพึ่งพา (การพึ่งพา)
โมดูลสามารถแสดงรายการโมดูลอื่น ๆ ขึ้นอยู่กับ ต้องอาศัยการพึ่งพาโมดูลหมายความว่าต้องโหลดโมดูลที่ร้องขอ (เชื่อถือได้) ก่อนที่จะขอโมดูล (โมดูลที่ต้องพึ่งพาโมดูลอื่น ๆ ผู้ร้องขอ) จะโหลด กล่าวอีกนัยหนึ่งบล็อกการกำหนดค่าของโมดูลที่ร้องขอจะถูกดำเนินการก่อนบล็อกการกำหนดค่าหรือโมดูลที่ต้องการวิธีการอธิบายหรือที่นี่?) เช่นเดียวกับการเรียกใช้บล็อก แต่ละโมดูลสามารถโหลดได้เพียงครั้งเดียวแม้ว่าจะมีโมดูลอื่นอีกหลายโมดูลที่ต้องการ
D) การโหลดแบบอะซิงโครนัส (การโหลดแบบอะซิงโครนัส)
โมดูลเป็นวิธีหนึ่งในการจัดการการกำหนดค่า $ หัวฉีดโดยไม่ต้องทำอะไรกับการโหลดสคริปต์ไปยัง VM ขณะนี้มีโครงการสำเร็จรูปที่ออกแบบมาโดยเฉพาะสำหรับการโหลดสคริปต์และยังสามารถใช้ในเชิงมุม เนื่องจากโมดูลไม่ทำอะไรเลยในระหว่างการโหลดพวกเขาสามารถโหลดลงใน VM ในลำดับใดก็ได้ ตัวโหลดสคริปต์สามารถใช้คุณสมบัตินี้เพื่อทำการโหลดแบบขนาน
5. การทดสอบหน่วย
ในรูปแบบที่ง่ายที่สุดของการทดสอบหน่วยหนึ่งคือการยกตัวอย่างชุดย่อยของแอปพลิเคชันในการทดสอบแล้วเรียกใช้ ที่สำคัญเราต้องตระหนักว่าสำหรับแต่ละหัวฉีดแต่ละโมดูลจะถูกโหลดเพียงครั้งเดียว โดยปกติแล้วแอปพลิเคชันจะมีหัวฉีดเพียงตัวเดียว แต่ในการทดสอบแต่ละกรณีทดสอบมีหัวฉีดซึ่งหมายความว่าในแต่ละ VM โมดูลจะถูกโหลดหลายครั้ง การสร้างโมดูลอย่างถูกต้องจะช่วยในการทดสอบหน่วยดังต่อไปนี้:
ในตัวอย่างนี้เราเตรียมที่จะสมมติว่ามีการกำหนดโมดูลต่อไปนี้:
Angular.module ('greetmod', []). Factory ('Alert', ฟังก์ชั่น ($ window) {return function (ข้อความ) {$ window.alert (ข้อความ);};}) ค่า ('คำทักทาย', 'hello'). โรงงาน ('ทักทาย', ฟังก์ชั่นมาเขียนบางกรณีทดสอบ:
อธิบาย ('myapp', function () {// โหลดโมดูลของการตอบสนองของแอปพลิเคชันจากนั้นโหลดโมดูลทดสอบที่ระบุที่เขียนหน้าต่าง $ ไปยังรุ่นจำลอง // ทำสิ่งนี้เมื่อ window.alert () ดำเนินการตัวทดสอบจะไม่หยุดเพราะมันถูกบล็อก หน้าต่างจริงคือการแทนที่ $ pertive.value ('$ window', {Alert: jasmine.createspy ('Alert')}); $ window) {ทักทาย ('โลก'); $ PRISTICE.VALUE ('Alert', AlertSpy);