โมดูล AngularJS
โมดูลกำหนดแอปพลิเคชัน
โมดูลเป็นคอนเทนเนอร์สำหรับส่วนต่าง ๆ ของแอปพลิเคชัน
โมดูลเป็นคอนเทนเนอร์สำหรับคอนโทรลเลอร์แอปพลิเคชัน
คอนโทรลเลอร์มักจะเป็นของโมดูล
สร้างโมดูล
คุณสามารถสร้างโมดูลผ่านฟังก์ชันเชิงมุมฟังก์ชั่นของ AngularJs:
<div ng-app = "myapp"> ... </div> <script> var app = angular.module ("myapp", []); </script>พารามิเตอร์ "MyApp" สอดคล้องกับองค์ประกอบ HTML ที่เรียกใช้งานแอปพลิเคชัน
ตอนนี้คุณสามารถเพิ่มตัวควบคุมคำแนะนำตัวกรอง ฯลฯ ในแอปพลิเคชัน AngularJS ของคุณ
เพิ่มคอนโทรลเลอร์
คุณสามารถใช้ NG-Controller Directive เพื่อเพิ่มคอนโทรลเลอร์ของแอปพลิเคชัน:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{firstName + "" + นามสกุล}} </div> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope) "doe";}); </script> </body> </html>เอฟเฟกต์การทำงาน:
John Doe
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับตัวควบคุมในบทคอนโทรลเลอร์ AngularJS
เพิ่มคำสั่ง
AngularJS มีคำแนะนำในตัวมากมายที่คุณสามารถใช้เพื่อเพิ่มฟังก์ชั่นลงในแอปพลิเคชันของคุณ
สำหรับคำแนะนำที่สมบูรณ์โปรดดูคู่มืออ้างอิง AngularJS
นอกจากนี้คุณสามารถใช้โมดูลเพื่อเพิ่มคำแนะนำของคุณเองสำหรับแอปพลิเคชันของคุณ:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "ฉันสร้างขึ้นในตัวสร้างคำสั่ง!"};}); </script> </body>ผลการทำงาน:
ฉันสร้างมันขึ้นมาใน Directive Constructor!
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคำสั่งในบทคำสั่ง AngularJS
โมดูลและคอนโทรลเลอร์รวมอยู่ในไฟล์ JS
โดยทั่วไปแอปพลิเคชัน AngularJS รวมโมดูลและตัวควบคุมในไฟล์ JavaScript
ในตัวอย่างต่อไปนี้ "myapp.js" มีตัวกำหนดโมดูลแอปพลิเคชันและไฟล์ "myctrl.js" มีคอนโทรลเลอร์:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{firstName + "" + LastName}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>ผลการทำงาน:
John Doe
myapp.js
var app = angular.module ("myapp", []);
หมายเหตุในนิยามโมดูลพารามิเตอร์ [] ใช้เพื่อกำหนดการพึ่งพาของโมดูล
วงเล็บ [] ระบุว่าโมดูลไม่มีการพึ่งพา หากมีการพึ่งพาชื่อของการพึ่งพาจะถูกเขียนในวงเล็บ
myctrl.js
app.controller ("myctrl", ฟังก์ชั่น ($ scope) {$ scope.firstname = "john"; $ scope.lastname = "doe";});ฟังก์ชั่นส่งผลกระทบต่อเนมสเปซทั่วโลก
ควรหลีกเลี่ยงฟังก์ชั่นทั่วโลกใน JavaScript เพราะพวกเขาถูกเขียนทับโดยไฟล์สคริปต์อื่น ๆ ได้อย่างง่ายดาย
โมดูล AngularJS ช่วยให้ฟังก์ชั่นทั้งหมดได้รับการกำหนดขอบเขตภายใต้โมดูลนี้โดยหลีกเลี่ยงปัญหานี้
ห้องสมุดจะโหลดเมื่อใด
หมายเหตุ: ในอินสแตนซ์ของเราไลบรารี AngularJS ทั้งหมดจะถูกโหลดที่หัวของเอกสาร HTML
สำหรับแอปพลิเคชัน HTML โดยทั่วไปขอแนะนำให้วางสคริปต์ทั้งหมดที่ด้านล่างขององค์ประกอบ <body>
สิ่งนี้จะเพิ่มความเร็วในการโหลดหน้าเว็บเนื่องจากการโหลด HTML ไม่ได้อยู่ภายใต้การโหลดสคริปต์
ในอินสแตนซ์ AngularJS หลายตัวของเราคุณจะเห็นว่าไลบรารี AngularJS ถูกโหลดในพื้นที่ <head> ของเอกสาร
ในอินสแตนซ์ของเรา AngularJS จะถูกโหลดในองค์ประกอบ <head> เนื่องจากการเรียกไปยัง Angular.module สามารถทำได้หลังจากโหลดไลบรารีเท่านั้น
ทางออกอีกทางหนึ่งคือการโหลดไลบรารี AngularJS ในองค์ประกอบ <body> แต่ต้องวางไว้ที่ด้านหน้าของสคริปต์ AngularJS ของคุณ:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{firstName + "" + นามสกุล}} </div> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope) "doe";}); </script> </body> </html>ผลการทำงาน:
John Doe
ข้างต้นเป็นการรวบรวมข้อมูลโมดูล AngularJS และเราจะเพิ่มในภายหลัง ฉันหวังว่ามันจะช่วยเขียนโปรแกรมเพื่อนได้