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