AngularJS ช่วยให้คุณสามารถขยาย HTML ที่มีคุณลักษณะใหม่ที่เรียกว่า Directives
AngularJS มีชุดของในตัวคำสั่งที่มีฟังก์ชันการทำงานเพื่อการใช้งานของคุณ
AngularJS ยังช่วยให้คุณกำหนดคำสั่งของคุณเอง
AngularJS Directives
สั่ง AngularJS จะขยายแอตทริบิวต์ HTML ที่มีคำนำหน้า ng-
ng-app สั่งเริ่มต้นโปรแกรมประยุกต์ AngularJS
ng-init สั่งเริ่มต้นข้อมูลใบสมัคร
ng-model คำสั่งผูกค่าของการควบคุม HTML (input เลือก textarea) ข้อมูลแอพลิเคชัน
อ่านข้อมูลเกี่ยวกับ AngularJS สั่งของเรา AngularJS อ้างอิงคำสั่ง
ตัวอย่าง
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
ลองตัวเอง» ng-app สั่งยังบอกว่า AngularJS <div> เป็น "เจ้าของ" ของโปรแกรม AngularJS
ข้อมูลผูกพัน
{{ firstName }} แสดงออกในตัวอย่างข้างต้นเป็นข้อมูล AngularJS ผูกพันการแสดงออก
ข้อมูลผูกพันใน AngularJS ผูกแสดงออก AngularJS กับข้อมูล AngularJS
{{ firstName }} ถูกผูกไว้กับ ng-model="firstName"
ในตัวอย่างต่อไปทั้งสองช่องข้อความที่ถูกผูกไว้ด้วยกันกับสองสั่ง NG-รุ่น:
ตัวอย่าง
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ 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 (สร้างอ่านปรับปรุงลบ) การใช้งาน แค่คิดว่าวัตถุเหล่านี้ถูกบันทึกจากฐานข้อมูล |
|---|
คำสั่ง NG-App
ng-app สั่งกำหนดองค์ประกอบรากของแอพลิเคชัน AngularJS
ng-app สั่งจะอัตโนมัติบูต (เริ่มต้นโดยอัตโนมัติ) แอพลิเคชันเมื่อหน้าเว็บโหลด
คำสั่ง NG-init
ng-init สั่งกำหนดค่าเริ่มต้นสำหรับการประยุกต์ใช้ AngularJS
โดยปกติแล้วคุณจะไม่ใช้ NG-init คุณจะใช้ตัวควบคุมหรือโมดูลแทน
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการควบคุมและโมดูลในภายหลัง
NG-รุ่น Directive
ng-model คำสั่งผูกค่าของการควบคุม HTML (input เลือก textarea) ข้อมูลแอพลิเคชัน
ng-model คำสั่งยังสามารถ:
- ให้ประเภทการตรวจสอบสำหรับข้อมูลใบสมัคร (จำนวนอีเมลที่จำเป็น)
- ให้สถานะของข้อมูลใบสมัคร (ที่ไม่ถูกต้องสกปรกสัมผัสข้อผิดพลาด)
- ให้เรียน CSS สำหรับองค์ประกอบ HTML
- องค์ประกอบ 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>
ลองตัวเอง» คุณสามารถเรียกคำสั่งโดยใช้:
- ชื่อธาตุ
- คุณลักษณะ
- ชั้น
- คิดเห็น
ตัวอย่างด้านล่างทั้งหมดจะผลิตผลเดียวกัน:
ข้อ จำกัด
คุณสามารถ จำกัด การสั่งของคุณเพียงถูกเรียกโดยบางส่วนของวิธีการ
ตัวอย่าง
โดยการเพิ่ม restrict ทรัพย์สินที่มีค่าที่ "A" สั่งเท่านั้นที่สามารถเรียกโดยคุณลักษณะ:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
ลองตัวเอง» จำกัด การค่าทางกฎหมาย:
-
Eสำหรับชื่อธาตุ - สำหรับแอตทริบิวต์
-
Cชั้น -
Mสำหรับความคิดเห็น
โดยค่าเริ่มต้นค่าเป็น EA ซึ่งหมายความว่าทั้งสองชื่อองค์ประกอบและแอตทริบิวต์ชื่อสามารถเรียกใช้คำสั่ง