คำสั่ง AngularJS: ng-init, ng-app, ng-model & ng-repeat

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

คำสั่งใน AngularJS คืออะไร?

A สั่ง ใน AngularJS เป็นคำสั่งที่ให้ฟังก์ชัน HTML ใหม่ เมื่อ Angular อ่านโค้ด HTML มันจะค้นหาคำสั่งในหน้านั้นก่อน จากนั้นจึงแยกวิเคราะห์หน้า HTML ตามลำดับ ตัวอย่างง่ายๆ ของคำสั่ง AngularJS ซึ่งเราได้เห็นในบทก่อนหน้านี้คือ “คำสั่ง ng-model” คำสั่งนี้ใช้เพื่อผูกโมเดลข้อมูลของเรากับมุมมองของเรา

หมายเหตุ คุณสามารถมีโค้ดเชิงมุมพื้นฐานในหน้า HTML ที่มีคำสั่ง ng-init, ng-repeat และ ng-model โดยไม่จำเป็นต้องมีตัวควบคุม ตรรกะสำหรับคำสั่งเหล่านี้อยู่ในไฟล์ Angular.js ซึ่งจัดทำโดย Google คอนโทรลเลอร์เป็นโครงสร้างการเขียนโปรแกรมเชิงมุมระดับถัดไปที่อนุญาตให้ใช้ตรรกะทางธุรกิจ แต่ตามที่กล่าวไว้สำหรับแอปพลิเคชันที่เป็นแอปพลิเคชันเชิงมุม ไม่จำเป็นต้องมีตัวควบคุม

วิธีสร้างคำสั่งใน AngularJS

ตามที่เรากำหนดไว้ในบทนำ คำสั่ง AngularJS เป็นวิธีการขยายฟังก์ชันการทำงานของ HTML.

มี 4 คำสั่งที่กำหนดไว้ใน AngularJS.

ด้านล่างนี้คือรายการคำสั่ง AngularJS พร้อมด้วยตัวอย่างเพื่ออธิบายแต่ละคำสั่ง

แอป ng ใน AngularJS

ใช้เพื่อเริ่มต้นแอปพลิเคชัน Angular.JS เมื่อคำสั่งนี้ถูกนำมาใช้ในหน้า HTML โดยพื้นฐานแล้วจะบอก Angular ว่าหน้า HTML นี้เป็นแอปพลิเคชัน angular.js

ตัวอย่างของ np-app

ตัวอย่างด้านล่างแสดงวิธีการใช้คำสั่ง ng-app ในตัวอย่างนี้ เราจะแสดงวิธีสร้างแอปพลิเคชัน HTML ปกติให้เป็นแอปพลิเคชัน เชิงมุมJS

แอป ng ใน AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง “ng-app” ถูกเพิ่มลงในแท็ก div ของเราเพื่อระบุว่าแอปพลิเคชันนี้เป็นแอปพลิเคชัน angular.js โปรดทราบว่าคำสั่ง ng-app สามารถใช้กับแท็กใดก็ได้ จึงสามารถใส่ไว้ในแท็ก body ได้เช่นกัน
  2. เนื่องจากเราได้กำหนดแอปพลิเคชันนี้เป็นแอปพลิเคชัน angular.js ตอนนี้เราจึงสามารถใช้ประโยชน์จากฟังก์ชันการทำงานของ angular.js ได้ ในกรณีของเรา เราใช้นิพจน์เพื่อเชื่อม 2 สายเข้าด้วยกัน

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

แอป ng ใน AngularJS

ผลลัพธ์จะแสดงผลลัพธ์ของนิพจน์อย่างชัดเจนซึ่งเกิดขึ้นได้เพียงเพราะเรากำหนดแอปพลิเคชันเป็นแอปพลิเคชัน เชิงมุม

ng-init ใน AngularJS

ใช้เพื่อเริ่มต้นข้อมูลแอปพลิเคชัน บางครั้งคุณอาจต้องการข้อมูลในเครื่องสำหรับแอปพลิเคชันของคุณ ซึ่งสามารถทำได้โดยใช้คำสั่ง ng-init

ตัวอย่างของ ng-init

ตัวอย่างด้านล่างแสดงวิธีการใช้คำสั่ง ng-init

ในตัวอย่างนี้ เราจะสร้างตัวแปรชื่อ "TutorialName" โดยใช้คำสั่ง ng-init และแสดงค่าของตัวแปรนั้นบนเพจ

ng-init ใน AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ถูกเพิ่มลงในแท็ก div ของเราเพื่อกำหนดตัวแปรท้องถิ่นที่เรียกว่า "TutorialName" และค่าที่กำหนดคือ "AngularJS"
  2. เรากำลังใช้นิพจน์ใน AngularJs เพื่อแสดงผลลัพธ์ของชื่อตัวแปร “TutorialName” ซึ่งกำหนดไว้ในคำสั่ง ng-init ของเรา

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ng-init ใน AngularJS

ในผลลัพธ์

  • ผลลัพธ์จะแสดงผลลัพธ์ของนิพจน์ซึ่งประกอบด้วยสตริง “AngularJS” อย่างชัดเจน นี่เป็นผลมาจากการที่สตริง “AngularJS” ถูกกำหนดให้กับตัวแปร 'TutorialName' ในส่วน ng-init

บทความที่เกี่ยวข้อง

ng-model ใน AngularJS

และสุดท้าย เรามีคำสั่ง ng-model ซึ่งใช้ในการผูกค่าของตัวควบคุม HTML กับข้อมูลแอปพลิเคชัน ตัวอย่างด้านล่างแสดงวิธีการใช้คำสั่ง ng-model

ตัวอย่างของ ng-model

ในตัวอย่างนี้

  • เราจะสร้างตัวแปร 2 ตัวที่เรียกว่า "ปริมาณ" และ "ราคา" ตัวแปรเหล่านี้จะถูกผูกไว้กับตัวควบคุมการป้อนข้อความ 2 ตัว
  • จากนั้นเราจะแสดงจำนวนเงินทั้งหมดตามการคูณของทั้งค่าราคาและปริมาณ

ng-model ใน AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ถูกเพิ่มลงในแท็ก div ของเราเพื่อกำหนดตัวแปรท้องถิ่น 2 ตัว อันหนึ่งเรียกว่า "ปริมาณ" และอีกอันคือ "ราคา"
  2. ขณะนี้เรากำลังใช้ไดเรกทิฟ ng-model ในการผูกกล่องข้อความของ “People” และ “Registration price” เข้ากับตัวแปรท้องถิ่น “quantity” และ “price” ตามลำดับ
  3. สุดท้ายเราจะแสดงผลรวมผ่านนิพจน์ซึ่งเป็นการคูณตัวแปรปริมาณและราคา

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ng-model ใน AngularJS

  • ผลลัพธ์จะแสดงการคูณค่าสำหรับราคาบุคคลและราคาการลงทะเบียนอย่างชัดเจน

ตอนนี้หากคุณไปที่ช่องข้อความและเปลี่ยนค่าของผู้คนและราคาการลงทะเบียน ยอดรวมจะเปลี่ยนแปลงโดยอัตโนมัติ

ng-model ใน AngularJS

  • ผลลัพธ์ข้างต้นแสดงให้เห็นถึงพลังของการเชื่อมโยงข้อมูลใน AngularJs ซึ่งสามารถทำได้ด้วยการใช้ คำสั่ง ng-model.

ng-ทำซ้ำใน AngularJS

ใช้เพื่อทำซ้ำองค์ประกอบ HTML ตัวอย่างด้านล่างแสดงวิธีการใช้ คำสั่ง ng-ซ้ำ.

ตัวอย่างของ ng-repeat

ในตัวอย่างนี้

  • เราจะมีอาร์เรย์ของชื่อบทในตัวแปรอาร์เรย์และ
  • จากนั้นใช้คำสั่ง ng-repeat เพื่อแสดงแต่ละองค์ประกอบของอาร์เรย์เป็นรายการ

ng-ทำซ้ำใน AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

คำอธิบายรหัส:

  1. คำสั่ง ng-init ถูกเพิ่มลงในแท็ก div ของเราเพื่อกำหนดตัวแปรที่เรียกว่า “บท” ซึ่งเป็นตัวแปรอาร์เรย์ที่มี 3 สาย
  2. องค์ประกอบ ng-repeat ถูกใช้โดยการประกาศตัวแปรอินไลน์ที่เรียกว่า "ชื่อ" และพิจารณาแต่ละองค์ประกอบในอาร์เรย์บท
  3. ในที่สุด เราก็แสดงค่าของตัวแปรอินไลน์ท้องถิ่น 'names'

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ng-ทำซ้ำใน AngularJS

  • ผลลัพธ์ข้างต้นแสดงให้เห็นว่าคำสั่ง ng-repeat รับแต่ละค่าในอาร์เรย์ที่เรียกว่า "บท" และสร้างรายการ HTML สำหรับแต่ละรายการในอาร์เรย์

สรุป

  • คำสั่งใช้เพื่อขยายการทำงานของ HTML Angular จัดเตรียมคำสั่งแบบ inbuilt เช่น
    • ng-app - ใช้เพื่อเริ่มต้นแอปพลิเคชันเชิงมุม
    • ng-init - ใช้เพื่อสร้างตัวแปรแอปพลิเคชัน
    • ng-model - ใช้เพื่อผูกการควบคุม HTML กับข้อมูลแอปพลิเคชัน
    • ng-repeat - ใช้เพื่อทำซ้ำองค์ประกอบโดยใช้เชิงมุม