อินดิเคิล AngularJS

AngularJS อนุญาตให้คุณใช้คำสั่งที่เรียกว่าคำสั่งคุณสมบัติใหม่ของ HTML ด้วย

AngularJS มีคำสั่งที่ฝั่งตัวซึ่งสามารถให้ความสามารถแก่โปรแกรมของคุณได้

AngularJS ยังอนุญาตให้คุณกำหนดคำสั่งของตัวเองด้วย

อินดิเคิล AngularJS

คำสั่ง AngularJS คือ HTML แอตทริบิวต์ที่ขยาย มีหน้าตาแบบ ng-.

ng-app คำสั่งเริ่มต้นโปรแกรม AngularJS

คำสั่ง ng-init คำสั่งเริ่มต้นข้อมูลของโปรแกรม

ng-model คำสั่งจะบอกโยงค่าขององค์ประกอบ HTML (input, select, textarea) ไปยังข้อมูลในโปรแกรม

โปรดอ่านข้อมูลเกี่ยวกับคำสั่ง AngularJS ในคู่มือคำสั่ง AngularJS ของเรา

ตัวอย่าง

<div ng-app="" ng-init="firstName='Bill'">
<p>ชื่อ: <input type="text" ng-model="firstName"></p>
<p>คุณเขียน: {{ firstName }}</p>
</div>

ทดลองด้วยตัวเอง

ng-app คำสั่งยังบอก AngularJS ว่า <div> อิเลเมนต์เป็น 'เจ้าของ' ของโปรแกรม AngularJS

การผนึกข้อมูล

ในตัวอย่างที่ผ่านมา {{ firstName }} แอ็กเซสเพรษฐานเป็น AngularJS แอ็กเซสเพรษฐานการผนึกข้อมูลของ AngularJS

การผนึกข้อมูลของ AngularJS จะผนึก AngularJS แอ็กเซสเพรษฐานกับข้อมูลของ AngularJS

{{ firstName }} กับ ng-model="firstName" ผนึกต่อกัน

ในตัวอย่างต่อไปนี้ สองฟิลด์ข้อความถูกผนึกต่อกันด้วยคำสั่ง ng-model สองตัว:

ตัวอย่าง

<div ng-app="" ng-init="quantity=1;price=5">
จำนวน: <input type="number" ng-model="quantity">
ต้นทุน:    <input type="number" ng-model="price">
รวมทั้งค่าเงินสด: {{ quantity * price }}
</div>

ทดลองด้วยตัวเอง

ใช้ คำสั่ง ng-init ไม่เป็นที่รู้จักมากนัก。คุณจะเรียนวิธีการเริ่มต้นข้อมูลในบทเรียนเกี่ยวกับคอนโทรลเลอร์

ซ้ำแบบ HTML อิเลเมนต์

ng-repeat คำสั่งที่ซ้ำแบบ HTML อิเลเมนต์：

ตัวอย่าง

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

ทดลองด้วยตัวเอง

ng-repeat คำสั่งที่แท้จริงทำงานโดยแยกตัวแปรในชุดคัดลอก HTML อิเลเมนต์เป็นครั้งเดียว.

ใช้สำหรับตัวแปรแบบแอร์เรย์ ng-repeat คำสั่ง：

ตัวอย่าง

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

ทดลองด้วยตัวเอง

AngularJS มีความเหมาะสมมากสำหรับโปรแกรม CRUD (Create, Read, Update, Delete) ของฐานข้อมูล

ใจคุณจะคิดว่าหากว่าประวัติความจำเป็นที่มาจากฐานข้อมูล

คำสั่ง ng-app

ng-app คำสั่ง ng-init นั้นนิยามองค์ประกอบราก.

เมื่อโหลดหน้าเว็บng-app คำสั่งการจัดระบบประมงโอตโต้การจัดระบบประมง

คำสั่ง ng-init (auto-initialize) โปรแกรม

คำสั่ง ng-init คำสั่ง ng-init นั้นนิยามค่าเริ่มต้น.

ทั่วไปแล้ว คุณจะไม่ใช้ ng-init คุณจะใช้ความควบคุมหรือโมดูล

คุณจะเรียนรู้เกี่ยวกับความรู้เกี่ยวกับความควบคุมและโมดูลภายหลัง

คำสั่ง ng-model

ng-model คำสั่งจะบอกโยงค่าขององค์ประกอบ HTML (input, select, textarea) ไปยังข้อมูลในโปรแกรม

ng-model คำสั่งยังสามารถ:

  • การให้การยืนยันชนิดของข้อมูลในโปรแกรม (Number, Email, Required)
  • การให้สถานะของข้อมูลในโปรแกรม (Invalid, Dirty, Touched, Error)
  • การให้รูปแบบ CSS แก่องค์ประกอบ HTML
  • การบอกโยงประกาศแบบฟอร์ม HTML

อ่านเพิ่มเติมเกี่ยวกับ ng-model ข้อมูลของคำสั่ง

สร้างคำสั่งใหม่

นอกจากคำสั่งที่มีมาตรฐานของ AngularJS คุณยังสามารถสร้างคำสั่งของตัวเองได้

คำสั่งใหม่ที่สร้างโดยการใช้ .directive ที่สร้างโดยฟังก์ชัน

เพื่อเรียกใช้คำสั่งใหม่ คุณจะต้องสร้างองค์ประกอบ HTML ที่มีชื่อแสงที่เหมือนกับคำสั่งใหม่

ในการตั้งชื่อคำสั่ง คุณจะต้องใช้ชื่อที่เป็นหลักหลอดw3TestDirective،แต่เมื่อเรียกใช้มัน คุณจะต้องใช้ชื่อแบ่งชิงที่แยกด้วย -w3-test-directive:

ตัวอย่าง

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

ทดลองด้วยตัวเอง

คุณสามารถเรียกใช้คำสั่งดังนี้ได้:

  • ชื่อองค์ประกอบ
  • รายละเอียด
  • คลาส
  • หมายเหตุ

ตัวอย่างที่มีตัวเลขดังนี้จะก่อให้เกิดผลลัพธ์เดียวกัน:

ชื่อองค์ประกอบ

<w3-test-directive></w3-test-directive>

ทดลองด้วยตัวเอง

รายละเอียด

<div w3-test-directive></div>

ทดลองด้วยตัวเอง

คลาส

<div class="w3-test-directive"></div>

ทดลองด้วยตัวเอง

หมายเหตุ

<!-- directive: w3-test-directive -->

ทดลองด้วยตัวเอง

จำกัด

คุณสามารถจำกัดคำสั่งอินดิเคิลของคุณเพื่อที่จะเรียกใช้ได้ด้วยวิธีเดี่ยวๆ

ตัวอย่าง

โดยเพิ่มค่า "A" ของ restrict คุณสมบัติ คำสั่งนี้สามารถเรียกใช้ได้ผ่านคุณสมบัติเท่านั้น

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

ทดลองด้วยตัวเอง

ขอบเขตตัวชี้วัด restrict ที่ถูกต้องเป็น

  • E นำเสนอให้
  • A นำเสนอให้
  • C นำเสนอให้
  • M นำเสนอให้

โดยมาตรฐาน ค่านี้เท่ากับ EAซึ่งหมายความว่าชื่อองค์ประกอบและชื่อคุณสมบัติทั้งหมดสามารถเรียกใช้อินดิเคิลได้