โมดูล AngularJS
โมดูล AngularJS กำหนดแอปพลิเคชัน
โมดูลนี้เป็นคอนเทนเนอร์สำหรับส่วนต่างๆ ของแอปพลิเคชัน
โมดูลนี้เป็นคอนเทนเนอร์สำหรับตัวควบคุมแอปพลิเคชัน
ตัวควบคุมจะเป็นของโมดูลเสมอ
การสร้างโมดูล
โมดูลถูกสร้างขึ้นโดยใช้ฟังก์ชัน AngularJSangular.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
= "John";
$scope.lastName
= "Doe";
});
</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://ajax.googleapis.com/ajax/libs/angularjs/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 = "John";
$scope.lastName= "Doe";
});
ฟังก์ชั่นสามารถก่อให้เกิดมลพิษในเนมสเปซส่วนกลาง
ควรหลีกเลี่ยงฟังก์ชันส่วนกลางใน JavaScript สามารถเขียนทับหรือทำลายโดยสคริปต์อื่นได้อย่างง่ายดาย
โมดูล AngularJS ช่วยลดปัญหานี้โดยการรักษาฟังก์ชันทั้งหมดไว้ในโมดูล
เมื่อใดควรโหลดห้องสมุด
แม้ว่าจะเป็นเรื่องปกติในแอปพลิเคชัน HTML ที่จะวางสคริปต์ไว้ที่ส่วนท้ายของ
<body>องค์ประกอบ ขอแนะนำให้คุณโหลดไลบรารี AngularJS ใน<head>หรือที่จุดเริ่มต้นของ<body>.
นี่เป็นเพราะการเรียกangular.moduleสามารถคอมไพล์ได้หลังจากโหลดไลบรารีแล้วเท่านั้น
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>