ก่อนที่จะพูดถึงโมดูล AngularJS ก่อนอื่นมาแนะนำจุดความรู้บางอย่างของ Angular:
AngularJS เป็นเทคโนโลยีลูกค้าที่บริสุทธิ์เขียนด้วย JavaScript ทั้งหมด มันใช้เทคโนโลยีทั่วไปของการพัฒนาเว็บ (HTML, CSS, JavaScript) เพื่อให้การพัฒนาเว็บแอปพลิเคชันเร็วขึ้นและง่ายขึ้น
AngularJS ช่วยให้การพัฒนาแอปพลิเคชันง่ายขึ้นคือการจัดทำการดำเนินการพัฒนาระดับต่ำทั่วไปเพื่อให้พวกเขาแก่นักพัฒนา AngularJS จะจัดการการดำเนินงานระดับต่ำเหล่านี้โดยอัตโนมัติ รวมถึง:
1. การทำงานของระบบ
2. ตั้งค่าการฟังกิจกรรม
3. การตรวจสอบอินพุตเนื่องจาก AngularJS จะจัดการกับการดำเนินงานเหล่านี้ส่วนใหญ่นักพัฒนาสามารถมุ่งเน้นไปที่ตรรกะทางธุรกิจของแอปพลิเคชันมากขึ้นและเขียนรหัสซ้ำ ๆ ผิดพลาดและรหัสระดับต่ำ
ในขณะที่ AngularJS กำลังทำให้การพัฒนาง่ายขึ้น แต่ก็นำเทคโนโลยีที่ยอดเยี่ยมมาสู่ลูกค้ารวมถึง::
1. การแยกข้อมูลตรรกะทางธุรกิจและมุมมอง
2. การเชื่อมโยงข้อมูลและมุมมองอัตโนมัติ
3. บริการทั่วไป
4. การฉีดพึ่งพา (ส่วนใหญ่ใช้สำหรับบริการรวม)
5. คอมไพเลอร์ HTML ที่ขยายได้ (เขียนโดย JavaScript ทั้งหมด)
6. ทดสอบง่าย
7. ความต้องการของลูกค้าสำหรับเทคโนโลยีเหล่านี้มีอยู่จริงมาเป็นเวลานาน
ในเวลาเดียวกันคุณยังสามารถใช้ AngularJs เพื่อพัฒนาแอปพลิเคชันหน้าเดียวหรือหลายหน้า แต่ส่วนใหญ่จะใช้ในการพัฒนาแอปพลิเคชันหน้าเดียว AngularJS รองรับการดำเนินงานประวัติเบราว์เซอร์ปุ่มไปข้างหน้าและด้านหลังและการดำเนินการที่ชื่นชอบในแอปพลิเคชันหน้าเดียว
ถัดไปให้อธิบายรายละเอียดเกี่ยวกับโมดูลของ AngularJs
แอพพลิเคชั่นส่วนใหญ่มีวิธีการหลักในการสร้างอินสแตนซ์จัดระเบียบและเปิดตัวแอปพลิเคชัน แอปพลิเคชัน AngularJS ไม่มีวิธีการหลัก แต่ใช้โมดูลเพื่อประกาศว่าควรเริ่มต้นแอปพลิเคชันอย่างไร วิธีนี้มีข้อดีดังต่อไปนี้:
1. กระบวนการเริ่มต้นมีการประกาศดังนั้นจึงเข้าใจได้ง่ายขึ้น
2. ในการทดสอบหน่วยไม่จำเป็นต้องโหลดโมดูลทั้งหมดดังนั้นวิธีนี้จะช่วยเขียนการทดสอบหน่วย
3. สามารถเพิ่มโมดูลเพิ่มเติมในการทดสอบในสถานการณ์เฉพาะ โมดูลเหล่านี้สามารถเปลี่ยนการกำหนดค่าและสามารถช่วยในการทดสอบแบบ end-to-end
4. รหัสบุคคลที่สามสามารถบรรจุลงในโมดูลที่นำกลับมาใช้ใหม่ได้
5. โมดูลสามารถโหลดได้ตามลำดับของลำดับหรือการขนาน (เนื่องจากการดำเนินการของโมดูลนั้นล่าช้า)
ตัวอย่างเช่น:
<! doctype html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> // กำหนดค่าโมดูล // ในตัวอย่างนี้เราจะสร้างตัวกรองคำอวยพร MyAppModule.filter ('Greet', function () {return function (ชื่อ) {return 'hello,' + name + '!';};}); </script> </head> <body> <div> {{'World' | ทักทาย}} </div> </body> </html>ในตัวอย่างข้างต้นเราใช้โมดูล MyApp เพื่อเริ่มแอปพลิเคชันโดยระบุใน <html ng-app = "myApp">
ตัวอย่างข้างต้นนั้นง่ายมากในการเขียน แต่ไม่เหมาะสำหรับการเขียนแอปพลิเคชันขนาดใหญ่ในลักษณะเดียวกัน คำแนะนำของเราคือการแยกแอปพลิเคชันของคุณออกเป็นโมดูลต่อไปนี้:
1. โมดูลบริการที่ใช้ในการประกาศบริการ
2. โมดูลคำสั่งที่ใช้ในการประกาศคำแนะนำ
3. โมดูลตัวกรองที่ใช้ในการประกาศตัวกรอง
4. โมดูลระดับแอปพลิเคชันที่อาศัยโมดูลข้างต้นซึ่งมีรหัสการเริ่มต้น
ตัวอย่างเช่น:
<! doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script src = "script.js" {{ การทักทาย }}! </div> </body> </html> [/code] script.js: [code] angular.module ('xmpl.service', []) // ค่าโมดูลบริการ ('greeter', {// คำทักทายวัตถุที่กำหนดเอง: 'สวัสดี', localize: ฟังก์ชั่น (การแปล) {this.salutation = localization.salutation;}, ทักทาย: ฟังก์ชั่น (ชื่อ) {ส่งคืนสิ่งนี้ ค่า ('ผู้ใช้', {// การโหลดวัตถุผู้ใช้ที่กำหนดเอง: ฟังก์ชั่น (ชื่อ) {this.name = name;}}); Angular.module ('xmpl.directive', []); // คำสั่งโมดูล Angular.module ('xmpl.filter', []); // ตัวกรองโมดูล Angular.Module ('XMPL', ['XMPL.Service', 'XMPL.Directive', 'XMPL.Filter']) // โมดูล XMPL ขึ้นอยู่กับการทำงานของโมดูล (ฟังก์ชั่น (greeter, ผู้ใช้) ในอาร์เรย์ {// เริ่มต้นรหัสเมื่อแอปพลิเคชันเริ่มต้น, greeter.localize ({salutation: 'bonjour'}); user.load ('โลก');}) // ตัวควบคุม greeter.greet (user.name);}เหตุผลสำหรับการแยกนี้คือคุณมักจะต้องเพิกเฉยต่อรหัสการเริ่มต้นในการทดสอบของคุณเนื่องจากรหัสเหล่านี้ยากต่อการทดสอบ โดยการแยกออกมันสามารถเพิกเฉยได้อย่างง่ายดายในการทดสอบ การทดสอบยังมีความเฉพาะเจาะจงมากขึ้นโดยการโหลดเฉพาะโมดูลที่เกี่ยวข้องกับการทดสอบปัจจุบัน ข้างต้นเป็นเพียงข้อเสนอแนะคุณสามารถมั่นใจได้ว่าจะปรับตามสถานการณ์เฉพาะของคุณ
โมดูลเป็นชุดของชุดของการกำหนดค่าและบล็อกรหัสที่แนบกับแอปพลิเคชันในขั้นตอนเริ่มต้น โมดูลที่ง่ายที่สุดประกอบด้วยสองชุดของบล็อกโค้ด:
บล็อกการกำหนดค่าบล็อก - ดำเนินการระหว่างขั้นตอนการฉีดและการกำหนดค่าของผู้ให้บริการฉีด เฉพาะผู้ให้บริการฉีดและค่าคงที่เท่านั้นที่สามารถฉีดเข้าไปในบล็อกการกำหนดค่า นี่คือการป้องกันไม่ให้บริการเริ่มต้นล่วงหน้าก่อนที่จะมีการกำหนดค่า
เรียกใช้บล็อกรหัส - ดำเนินการหลังจากหัวฉีดถูกสร้างและใช้เพื่อเริ่มแอปพลิเคชัน มีเพียงอินสแตนซ์และค่าคงที่เท่านั้นที่สามารถฉีดเข้าไปในบล็อกการเรียกใช้ นี่คือการป้องกันไม่ให้การกำหนดค่าระบบเกิดขึ้นหลังจากการดำเนินการ
การใช้รหัส:
Angular.module ('mymodule', []) config (ฟังก์ชั่น (injectables) {// provider-injector config code block // นี่คือตัวอย่างของ config block // คุณสามารถมีได้มากเท่าที่คุณต้องการ // คุณสามารถฉีดผู้ให้บริการเท่านั้น (ไม่ใช่อินสแตนซ์) // ลงในบล็อก config} เรียกใช้ (ฟังก์ชั่น (injectables) {// instance-injector config code block // นี่คือตัวอย่างของการเรียกใช้บล็อก // คุณสามารถมีได้มากเท่าที่คุณต้องการ // คุณสามารถฉีดอินสแตนซ์เท่านั้น (ไม่ใช่ผู้ให้บริการ) // ลงในบล็อกรัน})โมดูลยังมีวิธีที่ง่ายในการกำหนดค่าและการใช้มันเทียบเท่ากับการใช้บล็อกโค้ด ตัวอย่างเช่น:
Angular.module ('mymodule', []) ค่า ('A', 123) โรงงาน ('A', function () {return 123;}) Directive ('Directivename', ... ) ตัวกรอง ('filtername', ... ); // เป็น asangular.module ('mymodule', []) config (function ($ provel, $ compileProvider, $ filterProvider) {$ provists.value ('a', 123) $ prevent.factory ('a', function () {return 123;}) $ compileProvider.directive ('directiveName', ... )บล็อกการกำหนดค่าจะถูกนำไปใช้ในลำดับของการลงทะเบียนใน $ priest, $ compileprovider, $ filterprovider และ $ filterprovider ข้อยกเว้นเพียงอย่างเดียวคือคำจำกัดความของค่าคงที่ซึ่งควรวางไว้ที่จุดเริ่มต้นของบล็อกการกำหนดค่า
การเรียกใช้บล็อกเป็นวิธีการหลักที่สุดใน AngularJs การเรียกใช้บล็อกเป็นส่วนหนึ่งของรหัสที่ใช้ในการเริ่มแอปพลิเคชัน มันถูกดำเนินการหลังจากมีการกำหนดค่าบริการทั้งหมดและสร้างหัวฉีดทั้งหมด การเรียกใช้บล็อกมักจะมีรหัสที่ยากต่อการทดสอบดังนั้นควรเขียนในโมดูลแยกต่างหากเพื่อให้สามารถละเว้นได้ในระหว่างการทดสอบหน่วย
โมดูลสามารถแสดงรายการโมดูลอื่น ๆ เป็นการพึ่งพา "ขึ้นอยู่กับโมดูลที่แน่นอน" หมายความว่าต้องโหลดโมดูลขึ้นอยู่กับโมดูล กล่าวอีกนัยหนึ่งบล็อกการกำหนดค่าของโมดูลที่ขึ้นอยู่กับจะถูกดำเนินการก่อนบล็อกการกำหนดค่าของโมดูลนี้ เช่นเดียวกันสำหรับการเรียกใช้บล็อก โมดูลใด ๆ สามารถโหลดได้เพียงครั้งเดียวแม้ว่าจะขึ้นอยู่กับหลายโมดูล
โมดูลเป็นวิธีที่ใช้ในการจัดการการกำหนดค่า $ หัวฉีดและไม่มีส่วนเกี่ยวข้องกับการโหลดสคริปต์ มีไลบรารีมากมายสำหรับการโหลดโมดูลควบคุมบนอินเทอร์เน็ตซึ่งสามารถใช้กับ AngularJs ได้ เนื่องจากโมดูลไม่ทำอะไรเลยในระหว่างการโหลดพวกเขาสามารถโหลดได้ในลำดับใด ๆ หรือขนานกัน