Angular คือ ตอนที่ 9 : เทมเพลต (Templates)

31พ.ค. 2023 by รับทำแอพ สบายไอที
  1. เทมเพลต(Templates) AngularJS คืออะไร
  2. การสร้างเทมเพลต AngularJS
  3. คำสั่ง (Directives) AngularJS
  4. การสร้างแอปพลิเคชัน AngularJS

ในยุคดิจิทัลในปัจจุบัน เฟรมเวิร์กเช่น AngularJS ได้เปลี่ยนกระบวนการทำเว็บ Angular และทำแอพ ซึ่งเป็นเฟรมเวิร์กส่วนหน้าแบบโอเพ่นซอร์สที่พัฒนาโดย Google ได้รับความนิยมเป็นพิเศษเนื่องจากความสามารถแบบไดนามิก โดยเฉพาะอย่างยิ่งในการสร้าง Single Page Applications (SPA) หัวใจสำคัญของพลังของ AngularJS อยู่ที่การใช้เทมเพลต ซึ่งมีบทบาทสำคัญในการจัดโครงสร้างและนำเสนอเนื้อหาแก่ผู้ใช้ปลายทาง

1. เทมเพลต(Templates) AngularJS คืออะไร

เทมเพลต (Templates) AngularJS เป็น HTML ที่เสริมด้วยองค์ประกอบและแอตทริบิวต์ของ AngularJS วิธีการแบบผสมผสานนี้ช่วยให้นักพัฒนาสามารถสร้างมุมมองแบบไดนามิกในเว็บแอปพลิเคชัน

เทมเพลต AngularJS ทำงานร่วมกับคอมไพเลอร์ AngularJS เพื่อสร้างมุมมองสด กรอบถือว่าแม่แบบเป็นพิมพ์เขียวสำหรับการสร้างมุมมอง เมื่อเทมเพลตเชื่อมโยงกับขอบเขต กรอบงานจะผูก DOM กับข้อมูลโมเดลที่สอดคล้องกัน ผลลัพธ์ที่ได้คือแอปพลิเคชันแบบไดนามิกที่ตอบสนองซึ่งอัปเดตตามเวลาจริงเพื่อตอบสนองต่ออินพุตของผู้ใช้และการเปลี่ยนแปลงสถานะของโมเดล ทำให้กระบวนการทำเว็บ Angular และทำแอพ ง่ายขึ้น

2. การสร้างเทมเพลต AngularJS

การสร้างเทมเพลต AngularJS เริ่มต้นด้วยการเขียน HTML มาตรฐาน เฟรมเวิร์ก AngularJS มีคำสั่งต่างๆ มากมายที่คุณสามารถใช้เพื่อทำให้เทมเพลตของคุณมีพฤติกรรมไดนามิก คำสั่งคือเครื่องหมายบนแท็ก HTML ที่บอกให้ AngularJS เรียกใช้หรืออ้างอิงโค้ด JavaScript เฉพาะ

ตัวอย่างเช่น นี่คือเทมเพลต AngularJS อย่างง่าย:

<div ng-app="" ng-init="names=['Johannes','Michele','Hannah']">
  <p>Enter a name to filter: <input type="text" ng-model="name"></p>
  <ul>
    <li ng-repeat="x in names | filter:name">{{x}}</li>
  </ul>
</div>

ตัวอย่างนี้แสดงให้เห็นถึงพลังของ AngularJS ที่นี่เรามีรายชื่อและช่องใส่ข้อมูล รายการจะอัปเดตแบบไดนามิก โดยแสดงเฉพาะชื่อที่ตรงกับข้อความที่ป้อนลงในช่อง สิ่งนี้สำเร็จได้ด้วยเทมเพลตและคำสั่งของ AngularJS

3. คำสั่ง (Directives) AngularJS

เพื่อให้เข้าใจเทมเพลต AngularJS คุณต้องเข้าใจคำสั่ง (Directives) AngularJS คำสั่งคือเครื่องหมายบนองค์ประกอบ DOM ที่แนบการทำงานพิเศษกับองค์ประกอบ นี่คือคำสั่งพื้นฐานบางอย่างที่ใช้ใน AngularJS:

  1. ng-app: คำสั่งนี้กำหนดและเชื่อมโยงแอปพลิเคชัน AngularJS กับ HTML
  2. ng-model: คำสั่งนี้ผูกค่าของตัวควบคุม HTML (อินพุต, เลือก, textarea) กับข้อมูลแอปพลิเคชัน
  3. ng-bind: คำสั่งนี้ผูกข้อมูลแอปพลิเคชันกับมุมมอง HTML
  4. ng-init: คำสั่งนี้เริ่มต้นตัวแปรแอ็พพลิเคชัน AngularJS
  5. ng-repeat: คำสั่งนี้ทำซ้ำองค์ประกอบ HTML สำหรับแต่ละรายการในคอลเลกชัน

พลังของ AngularJS มาจากการรวมกันของคำสั่งเหล่านี้ ทำให้นักพัฒนาสามารถทำเว็บ Angular และทำแอพที่มีไดนามิกและโต้ตอบได้สูง

4. การสร้างแอปพลิเคชัน AngularJS

เพื่อแสดงให้เห็นว่ามีการใช้เทมเพลตอย่างไรในกระบวนการทำเว็บ Angular และทำแอพ เรามาสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำง่ายๆ กัน

<!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">

<h2>To-Do List</h2>

<form ng-submit="addItem()">
    <input type="text" ng-model="todoInput" size="50" placeholder="Add new todo">
    <input type="submit" value="Add">
</form>

<br>

<ul>
  <li ng-repeat="x in todoList">{{x.todoText}} <span ng-click="removeItem($index)">×</span></li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.todoList = [{todoText:'Finish homework', done:false}];

    $scope.addItem = function() {
        $scope.todoList.push({todoText:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.removeItem = function(index) {
        $scope.todoList.splice(index, 1);
    };
});
</script>

</body>
</html>

นี่คือแอปพลิเคชันรายการสิ่งที่ต้องทำอย่างง่ายที่สร้างโดยใช้ AngularJS มันแสดงให้เห็นถึงพลังและฟังก์ชั่นที่ AngularJS นำมาสู่การพัฒนาเว็บ

นี่คือวิธีการทำงาน:

  • คำสั่ง ng-app บอก AngularJS ว่านี่คือแอปพลิเคชัน AngularJS
  • คำสั่ง ng-controller เชื่อมโยงตัวควบคุม AngularJS ( myCtrl) กับ HTML div
  • ภายในแบบฟอร์มคำสั่ง ng-submit จะเรียกใช้ addItem() ฟังก์ชันเมื่อส่งแบบฟอร์ม
  • คำสั่ง ng-model ผูกฟิลด์ป้อนข้อความกับtodoInputโมเดล
  • ภายในรายการที่ไม่เรียงลำดับคำสั่ง ng-repeat จะสร้างรายการสำหรับแต่ละรายการใน todoList อาร์เรย์
  • คำสั่ง ng-click ในองค์ประกอบ span เรียกใช้ฟังก์ชัน removeItem()เมื่อผู้ใช้คลิกที่สัญลักษณ์ ‘×’ ซึ่งเป็นการลบรายการออกจากรายการ

ตัวอย่างนี้แสดงให้เห็นถึงพลังของเทมเพลต AngularJS และวิธีใช้ในการทำเว็บ Angular และทำแอพ เทมเพลต AngularJS มีวิธีแทรกข้อมูลลงใน HTML ของคุณ ทำให้เป็นไดนามิกและตอบสนอง

เทมเพลตเป็นคุณสมบัติหลักของ AngularJS และการทำความเข้าใจเทมเพลตเหล่านี้เป็นพื้นฐานในการทำเว็บ Angular และทำแอพ ด้วยการใช้คำสั่งอันทรงพลังของ AngularJS ภายในเทมเพลต คุณสามารถสร้างแอปพลิเคชันไดนามิกและโต้ตอบได้อย่างง่ายดาย ด้วยความเข้าใจอย่างถ่องแท้ของเทมเพลต AngularJS เส้นทางของการเทมเพลตเป็นคุณสมบัติหลักของ AngularJS และการทำความเข้าใจเทมเพลตเหล่านี้เป็นพื้นฐานในการทำเว็บ Angular และทำแอพ จะตรงไปตรงมาและสนุกสนานมากขึ้น

Angular คืออะไร (AngularJS)

Angular คือ ตอนที่ 8 : Dependency Injection (DI)
Angular คือ ตอนที่ 10 : การกำหนดเส้นทาง (Routing)