AngularJS โมดูล

โมดูล AngularJS นั้นนิยามโปรแกรม

โมดูลเป็นตัวจัดเก็บส่วนต่างๆ ของโปรแกรม

โมดูลเป็นตัวจัดเก็บคอนโทรลเลอร์ของโปรแกรม

คอนโทรลเลอร์เสมอไปต้องเป็นส่วนหนึ่งของโมดูล

สร้างโมดูล

ด้วยการใช้ฟังก์ชัน AngularJS，angular.module สร้างโมดูลเดียวกัน:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" คือตัวเลขที่โปรแกรมจะทำงานด้วย HTML ประกอบ

ตอนนี้ คุณสามารถเพิ่มควบคุมเลข คำสั่ง ตัวแทนข้อมูลและความสามารถอื่นๆ ลงในโปรแกรม AngularJS ของคุณ

เพิ่มควบคุมเลข

เพิ่มควบคุมเลขลงในโปรแกรมของคุณ และใช้ ng-controller ตัวอย่างคำสั่ง

รายละเอียด

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

ทดลองด้วยตัวเอง

คุณจะได้ศึกษาถึงข้อมูลเพิ่มเติมเกี่ยวกับควบคุมเลขในช่วงท้ายของคู่มือนี้

เพิ่มคำสั่ง

AngularJS มีคำสั่งภายในตัวที่คุณสามารถใช้เพื่อเพิ่มความสามารถต่างๆ ลงในโปรแกรมของคุณ

สำหรับสารนวนที่สมบูรณ์ โปรดเข้าชมสารนวนของคำสั่ง AngularJS ของเรา

นอกจากนี้ คุณยังสามารถใช้หน่วยงานเพื่อเพิ่มคำสั่งที่เป็นของตัวเองลงในโปรแกรมของคุณ

รายละเอียด

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

ทดลองด้วยตัวเอง

คุณจะได้ศึกษาถึงการใช้งานของออกแบบที่คุณเข้าใจดีในช่วงท้ายของคู่มือนี้

หน่วยงานและควบคุมเลขในไฟล์

ในโปรแกรม AngularJS การจัดห้องเก็บแบบเกมมากที่ใช้ในไฟล์ JavaScript มักเกิดขึ้น

ในตัวอย่างนี้ "myApp.js" มีการประกาศหน่วยงานโปรแกรม และ "myCtrl.js" มีการประกาศควบคุมเลข

รายละเอียด

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

ทดลองด้วยตัวเอง

myApp.js

var app = angular.module("myApp", []);

ตัวเลขในวงเล็บ [] ในการประกาศหน่วยงานสามารถใช้เพื่อประกาศหน่วยงานที่ขึ้นอยู่กับ

ถ้าไม่มีตัวเลขในวงเล็บ [] คุณไม่ได้สร้างหน่วยงานใหม่ แต่เป็นการดึงหน่วยงานที่มีอยู่แล้ว

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

ฟังก์ชันอาจทำให้ระบบหลักประกอบโลกตกอยู่ในโลกหลักประกอบ

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

AngularJS หน่วยงานที่ทำงานด้วยการรักษาฟังก์ชันทั้งหมดในหน่วยงานท้องถิ่น เพื่อลดปัญหานี้

ที่จะโหลดไลบรารี

ถึงแม้ว่าจะมีการจัดไว้ในโปรแกรม HTML ที่ใช้ซีกเกมมาก่อน แต่แนะนำให้คุณทำใน <body> ที่สิ้นสุดขององค์ประกอบ HTML มักเกิดขึ้น แต่เป็นแนะนำให้คุณทำใน <head> หรือ <body> หรือ ในส่วนหัวข้อ

นี่เพราะเป็นต้องใช้โหลดไลบรารีก่อนเท่านั้น ที่จะสามารถแปลงภาษาได้ angular.module ของการเรียกใช้。

รายละเอียด

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

ทดลองด้วยตัวเอง