Directive AngularJS ใช้เพื่อขยาย HTML นี่คือคุณสมบัติพิเศษทั้งหมดที่เริ่มต้นด้วยคำนำหน้า NG- เราจะหารือเกี่ยวกับคำสั่งต่อไปนี้:
NG -APP - คำสั่งนี้เริ่มต้นแอปพลิเคชัน AngularJS
NG -Init - คำสั่งนี้เริ่มต้นข้อมูลแอปพลิเคชัน
NG -Model - คำสั่งนี้กำหนดแบบจำลองที่เป็นตัวแปรที่ใช้ใน AngularJS
NG -Repeat - คำสั่งนี้จะทำซ้ำองค์ประกอบ HTML สำหรับแต่ละรายการในคอลเลกชัน
คำสั่ง ng-app
คำสั่ง NG-APP เริ่มแอปพลิเคชัน AngularJS มันกำหนดองค์ประกอบรูท มันเริ่มต้นโดยอัตโนมัติหรือเริ่มแอปพลิเคชันที่โหลดหน้าเว็บของแอปพลิเคชัน AngularJS นอกจากนี้ยังใช้ในการโหลดโมดูล AngularJS ต่างๆแอปพลิเคชัน AngularJS ในตัวอย่างต่อไปนี้เรากำหนดแอปพลิเคชัน AngularJS เริ่มต้นโดยใช้แอตทริบิวต์ NG-APP ขององค์ประกอบ DIV
<div ng-app = ""> ... </div>
คำสั่ง ng-init
คำสั่ง NG-init เริ่มต้นข้อมูลของแอปพลิเคชัน AngularJS มันถูกใช้เพื่อใส่ค่าในแอปพลิเคชันเพื่อใช้ตัวแปร ในตัวอย่างต่อไปนี้เราจะเริ่มต้นอาร์เรย์ของประเทศ ใช้ไวยากรณ์ JSON เพื่อกำหนดอาร์เรย์ของประเทศ
<div ng-app = "" ng-init = "ประเทศ = [{locale: 'en-us', ชื่อ: 'United States'}, {locale: 'en-gb', ชื่อ: 'สหราชอาณาจักร'}, {locale: 'en-fr', ชื่อ: 'France'}]"> ...คำสั่ง ng-model
Directive NG Model กำหนดโมเดล/ตัวแปรที่ใช้ในแอปพลิเคชัน AngularJS ในตัวอย่างต่อไปนี้เรากำหนดโมเดลที่เรียกว่า "ชื่อ"
<div ng-app = ""> ... <p> ป้อนชื่อของคุณ: <input type = "text" ng-model = "name"> </p> </div>
คำสั่งทำซ้ำ NG
คำสั่ง NG-Repeat ซ้ำแต่ละรายการในคอลเลกชันองค์ประกอบ HTML ในตัวอย่างต่อไปนี้เราได้วนซ้ำในประเทศอาร์เรย์
<div ng-app = ""> ... <p> รายการของประเทศที่มีสถานที่: </p> <ol> <li ng-repeat = "ประเทศในประเทศ"> {{'ประเทศ:' + ประเทศ.ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<html> <title> คำสั่ง AngularJS </title> <body> <h1> แอปพลิเคชันตัวอย่าง </h1> <div ng-app = "" ng-init = "ประเทศ = [{locale: 'en-us', ชื่อ: 'ime'}, {locale: 'en-gb', ชื่อ: <p> ป้อนชื่อของคุณ: <อินพุต type = "text" ng-model = "name"> </p> <p> สวัสดี <span ng-bind = "ชื่อ"> </span>! </ol> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ป้อนชื่อของคุณและดูผลลัพธ์ต่อไปนี้
ข้างต้นเป็นข้อมูลพื้นฐานของคำสั่ง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!