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

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

⚡ สรุปอย่างชาญฉลาด

คำสั่ง AngularJS Directives ขยายขีดความสามารถของ HTML ทั่วไปด้วยพฤติกรรมใหม่ๆ ตัวบ่งชี้ ng-app, ng-init, ng-model และ ng-repeat ใช้ในการเริ่มต้นแอปพลิเคชัน ใส่ข้อมูลภายในเครื่อง ผูกการควบคุมฟอร์มเข้ากับโมเดล และคัดลอกองค์ประกอบหนึ่งครั้งต่อรายการในคอลเลกชัน

  • 🧩 แนวคิดหลัก: ไดเร็กทีฟ (Directive) คือเครื่องหมายบนองค์ประกอบ HTML ที่บอกให้คอมไพเลอร์ของ AngularJS เพิ่มพฤติกรรมให้กับองค์ประกอบนั้น
  • 🚀 Bootstrap จุด: ng-app จะประกาศองค์ประกอบรากและเริ่มต้น AngularJS โดยอัตโนมัติทันทีที่หน้าเว็บโหลดเสร็จ
  • 🧮 ข้อมูลท้องถิ่น: ng-init จะกำหนดค่าเริ่มต้นให้กับตัวแปรในขอบเขต (scope variables) ภายในโค้ด HTML โดยไม่จำเป็นต้องมีคอนโทรลเลอร์
  • 🔄 การเย็บแบบสองทาง: ng-model เชื่อมโยงอินพุต ตัวเลือก หรือช่องข้อความเข้ากับคุณสมบัติของขอบเขต ทำให้การแก้ไขอัปเดตโมเดลทันที
  • 📋 การทำเครื่องหมายซ้ำ: ng-repeat จะทำการคัดลอกองค์ประกอบหลักหนึ่งครั้งสำหรับแต่ละรายการในอาร์เรย์หรือออบเจ็กต์
  • 🎛️ รูปแบบการอธิษฐานสี่แบบ: คุณสมบัติ restrict ยอมรับค่า E, A, C และ M สำหรับไวยากรณ์ขององค์ประกอบ คุณลักษณะ คลาส และความคิดเห็น
  • 📚 คลังหนังสือเพิ่มเติม: AngularJS มีคำสั่งในตัวมากมาย เช่น ng-bind, ng-if, ng-show, ng-class และ ng-click
อ่านเพิ่มเติม

ไดเร็กทีฟของ AngularJS

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

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

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

แต่เบราว์เซอร์จะเรียกใช้งานโปรแกรมนั้นได้อย่างไร?

วิธีการทำงานของ AngularJS Directives ใน HTML

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

AngularJS เบราว์เซอร์ของคุณมี directive ในตัวมากมาย รวมถึง directive ที่คุณลงทะเบียนเองด้วย ng-app, ng-init, ng-model และ ng-repeat เป็น directive ที่ผู้เริ่มต้นจะได้เรียนรู้เป็นอันดับแรก ซึ่งจะอธิบายพร้อมตัวอย่างประกอบ ก่อนที่จะดูตัวอย่างเหล่านั้น โปรดสังเกตวิธีการเขียน directive ทั้งสี่วิธี

ไดเร็กทีฟของ AngularJS มีกี่ประเภท?

คำสั่ง (directive) ไม่จำเป็นต้องเป็นแอตทริบิวต์เสมอไป คอมไพเลอร์ของ AngularJS สามารถจับคู่คำสั่งได้โดยใช้ชื่อองค์ประกอบ แอตทริบิวต์ ชื่อคลาส หรือความคิดเห็น และแต่ละคำสั่งจะประกาศรูปแบบที่ยอมรับผ่านทางตัวมันเอง restrict คุณสมบัติ ค่าเริ่มต้นคือ EAดังนั้นไวยากรณ์ขององค์ประกอบและแอตทริบิวต์จึงใช้งานได้ทั้งคู่ เว้นแต่คุณจะระบุเป็นอย่างอื่น ค่ามีความสำคัญที่สุดเมื่อคุณเขียนคำสั่งของคุณเอง เพราะคอมไพเลอร์จะไม่สนใจรูปแบบใดๆ ที่ค่า restrict ไม่รวมไว้

ค่าจำกัด จับคู่โดย ตัวอย่างมาร์กอัป การใช้งานทั่วไป
E ชื่อองค์ประกอบ บล็อกแบบแยกส่วนที่มีแม่แบบเป็นของตัวเอง
A คุณลักษณะ การเพิ่มพฤติกรรมให้กับองค์ประกอบที่มีอยู่แล้ว
C ชื่อคลาส โครงสร้างมาร์กอัปแบบเก่าที่ไม่สามารถรับแอตทริบิวต์ใหม่ได้
M Comment หายาก เก็บไว้เพื่อความเข้ากันได้กับเวอร์ชันเก่า

💡 เคล็ดลับ: นิยมใช้ไวยากรณ์แบบองค์ประกอบและแอตทริบิวต์มากกว่า เอกสารอ้างอิงอย่างเป็นทางการของไดเร็กทีฟ AngularJS ถือว่ารูปแบบคลาสและความคิดเห็นเป็นตัวเลือกแบบเก่า ตัวอย่างด้านล่างทั้งหมดใช้ไวยากรณ์แอตทริบิวต์

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

แอป ng ใน AngularJS

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

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

ตัวอย่างด้านล่างแสดงวิธีการแปลงแอปพลิเคชัน HTML ทั่วไปให้เป็นแอปพลิเคชัน AngularJS

แอป 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>

⚠️ คำเตือน: รายการนี้จะคงข้อมูลเดิมไว้ chrset="UTF 8"ตรงตามที่ตีพิมพ์ทุกประการ คุณลักษณะที่ถูกต้องคือ charset="UTF-8".

Code คำอธิบาย:

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

หากโค้ดทำงานสำเร็จ ผลลัพธ์ด้านล่างจะปรากฏขึ้น

Output:

แอป ng ใน AngularJS

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

ng-init ใน AngularJS

คำสั่งนี้ใช้สำหรับเริ่มต้นข้อมูลของแอปพลิเคชัน บางครั้งคุณอาจต้องการข้อมูลภายในเครื่องสำหรับแอปพลิเคชันของคุณ ซึ่งสามารถทำได้โดยใช้คำสั่ง 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>

Code คำอธิบาย:

  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

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

  • เราจะสร้างตัวแปร 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>

Code คำอธิบาย:

  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>

Code คำอธิบาย:

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

หากโค้ดทำงานสำเร็จ ผลลัพธ์ด้านล่างจะปรากฏขึ้น

Output:

ng-ทำซ้ำใน AngularJS

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

ทั้งสี่ส่วนนั้นครอบคลุมถึงการเริ่มต้นระบบ ข้อมูล การผูกมัด และการทำซ้ำ รายการด้านล่างแสดงให้เห็นถึงสิ่งที่ตามมาในลำดับถัดไป

คำสั่งเสริมอื่นๆ ที่ใช้กันทั่วไปใน AngularJS

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

  • ng-bind: เขียนค่าขอบเขตลงในข้อความขององค์ประกอบโดยไม่ต้องแสดงวงเล็บปีกกาแบบดิบๆ ชั่วครู่ขณะโหลด
  • ng-if: ลบองค์ประกอบออกจาก DOM เมื่อเงื่อนไขเป็นเท็จ และสร้างใหม่เมื่อเงื่อนไขเป็นจริง
  • ng-show และ ng-hide: Togglการแสดงผลด้วย CSS องค์ประกอบจะคงอยู่ใน DOM ดังนั้นการสลับซ้ำๆ จึงใช้ต้นทุนน้อยลง
  • ng-class: เพิ่มหรือลบคลาส CSS จากนิพจน์ เพื่อให้การจัดสไตล์เป็นไปตามแบบจำลอง
  • ng-click: เรียกใช้นิพจน์หรือฟังก์ชันขอบเขตเมื่อผู้ใช้คลิกที่องค์ประกอบ
  • ng-controller: เชื่อมโยงคอนโทรลเลอร์เข้ากับบล็อกมาร์กอัปเมื่อหน้าเว็บมีขนาดใหญ่เกินกว่าที่ ng-init จะรองรับได้
  • ng-disabled และ ng-readonly: กำหนดค่าแอตริบิวต์ฟอร์มที่ตรงกันเมื่อใดก็ตามที่นิพจน์นั้นเป็นจริง

คำถามที่พบบ่อยด้านล่างนี้จะตอบคำถามที่มักตามมาหลังจากรายการนี้

คำถามที่พบบ่อย

AngularJS จะปรับรูปแบบชื่อแอตทริบิวต์ให้เป็นมาตรฐานก่อนที่จะทำการจับคู่ โดยจะตัดคำนำหน้า x- หรือ data- ออก แล้วแปลงตัวคั่นแบบขีดกลาง โคลอน หรือขีดล่าง ให้เป็นรูปแบบ camel case นั่นคือเหตุผลที่ data-ng-app, x-ng-app และ ng:app จึงแปลงเป็น directive ngApp เดียวกัน

ทั้งสองแบบแสดงค่าขอบเขต (scope value) การใช้การแทรกค่า (interpolation expression) อาจแสดงวงเล็บปีกกาแบบดิบๆ ชั่วครู่ก่อนที่ AngularJS จะโหลดเสร็จสมบูรณ์ ในขณะที่ ng-bind จะปล่อยให้องค์ประกอบนั้นว่างเปล่าจนกว่าการคอมไพล์จะเสร็จสมบูรณ์ ควรเลือกใช้ ng-bind สำหรับข้อความที่ปรากฏอยู่เหนือส่วนที่มองเห็นได้ทันที (above the fold)

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

บางส่วน ผู้ช่วยเช่น นักบิน GitHub เขียน ng-repeat ใหม่เป็น *ngFor และ ng-if เป็น *ngIf อย่างน่าเชื่อถือ การสืบทอดขอบเขต การผูกข้อมูลแบบสองทาง และฟังก์ชันลิงก์แบบกำหนดเองยังคงต้องได้รับการตรวจสอบจากมนุษย์ก่อนที่จะเผยแพร่โค้ดที่ย้ายมา

วางโค้ด HTML, การประกาศโมดูล และผลลัพธ์จากคอนโซลลงในช่องนี้ ChatGPT และถามว่าคำสั่งใดที่ไม่ตรงกัน โดยปกติแล้วจะตรวจพบ ng-app ที่หายไป คุณสมบัติที่สะกดผิด หรือค่า restrict ที่ขัดขวางไวยากรณ์ที่คุณเลือก

สรุปโพสต์นี้ด้วย: