ไฟล์ bookstore.html
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
</head>
<body>
<h1>Book Type</h1>
<select>
<option value='accounting'>accounting</option>
<option value='it'>it</option>
<option value='engineering'>engineering</option>
</select>
</body>
</html>
โค้ดด้านบนเป็นการเขียนแบบปกติทั่วๆ ไป กรณี ที่ต้องการแสดง drop-down list ในหน้าอื่นๆ จะต้องเขียนโค้ดซ้ำๆ กัน ดังนั้น การใช้ ng-include จะช่วยลดระยะเวลาในการเขียนโค้ดได้ ดังนี้
ไฟล์ booktype.html
<h1>Book Type</h1>
<select>
<option value='accounting'>accounting</option>
<option value='it'>it</option>
<option value='engineering'>engineering</option>
</select>
ไฟล์ bookstore.html
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-include="'booktype.html'"></div>
</body>
</html>
อธิบาย :
- ไฟล์ booktype.html เป็น Template สำหรับเรียกใช้งานใน Element ต่างๆ
- ng-include จะทำการดึงโค้ดจากไฟล์ booktype.html มาใส่ภายใน <div>..</div>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น