Module เป็นส่วนระบุ Application โดย Controller ทั้งหมดควรกำหนดไว้ใน Module เพราะจะทำให้โค้ดดูอ่านง่ายขึ้น
ดังนั้น ในการสร้าง Application จึงควรมีไฟล์ Module และ Controller อย่างน้อย 1 ไฟล์ แยกไว้ เพื่อความสะดวกในการเรียกใช้งาน และลดความซ้ำซ้อนในการแก้ไข
การเรียกใช้งาน Module จะประกาศใน ng-app="ชื่อโมดูล"
ตัวอย่าง
ไฟล์ index.html
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"ฬ</script>
<script src="myModule.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<div ng-app="myModule" ng-controller="myCtrl">
<p><input type="text" ng-model="txt1">
<input type="text" ng-model="txt2"><p>
<p>Your text : {{ txt1+ " , " + txt2}}</p>
</div>
</body>
</html>
อธิบายไฟล์ index.html
- ng-app คือ การเรียกใช้ module ที่ชื่อ myModule
- ng-coltroller คือ การเรียกใช้ controller ที่ชื่อ myCtrl
- ng-model คือ การผูกค่าของ HTML element
- {{ txt1+ " , " + txt2}} คือ การนำค่าในตัวแปร txt1 และ txt2 มาแสดง
var app = angular.module("myModule", []);
var mtxt1 = "Text1";
var mtxt2 = "Text2";
อธิบายไฟล์ myModule.js
- สร้าง Module ด้วยคำสั่ง angular.module("myModule",[]) โดย myModule คือ ชื่อ module ส่วน [ ] เป็นพารามิเตอร์สำหรับใส่ module อื่น
- มีการสร้างตัวแปร 2 ตัว คือ mtxt1 เก็บค่า Text1 และ mtxt2 เก็บค่า Text2
ไฟล์ myCtrl.js มีรายละเอียด ดังนี้
app.controller("myCtrl", function($scope) {
$scope.txt1= mtxt1;
$scope.txt2= mtxt2;
});
อธิบายไฟล์ myCtrl.js
- สร้าง Controller ด้วยคำสั่ง app.controller("myCtrl",function($scope){...} โดย myCtrl คือ ชื่อ Controller
- ภายในฟังก์ชั่นมีการระบุค่าเริ่มต้นให้ตัวแปร txt1 และ txt2 ที่ประกาศ โดยนำค่าจากตัวแปร mtxt1 และ mtxt2 ที่ประกาศใน module มาใช้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น