AngularJS สั่ง

การแสดงออก AngularJS: ก่อนหน้านี้

ควบคุม AngularJS ถัดไป:

คุณสมบัติใหม่ที่เรียกว่าโดย AngularJS แนวทางที่จะขยาย HTML

AngularJS คำแนะนำในตัวสำหรับการประยุกต์ใช้ในการเพิ่มฟังก์ชั่น

AngularJS ช่วยให้คุณสามารถปรับแต่งการเรียนการสอน

AngularJS สั่ง

การเรียนการสอน AngularJS เป็นส่วนขยายของ HTML แอตทริบิวต์ที่มีคำนำหน้า ng-

คำแนะนำ NG-app เพื่อเตรียมใช้งานแอปพลิเค AngularJS

คำสั่ง NG-init เพื่อเริ่มต้นข้อมูลแอพลิเคชัน

NG-รูปแบบคำสั่งค่าองค์ประกอบ (เช่นค่าของฟิลด์อินพุต) ผูกไว้กับแอพลิเคชัน

คำแนะนำที่สมบูรณ์สามารถพบได้ในเนื้อหาของ คู่มืออ้างอิง AngularJS

AngularJS ตัวอย่าง

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

ลอง»

NG-App สั่งบอก AngularJS <div> เป็นโปรแกรม AngularJS ของ "เจ้าของ".

	เว็บเพจสามารถมีการใช้งานวิ่ง AngularJS ในหลายองค์ประกอบที่แตกต่างกัน

ข้อมูลผูกพัน

ในตัวอย่างข้างต้น {{}} firstName AngularJS แสดงออกเป็นนิพจน์การผูกข้อมูล

AngularJS ผูกข้อมูลตรงกับ AngularJS AngularJS ข้อมูลการแสดงออกของ

{{FirstName}} โดย NG-รุ่น = "firstName" ประสาน

ในตัวอย่างต่อไปฟิลด์ข้อความสองคือการคำนวณผ่านสองประสานการเรียนการสอน NG-รุ่น:

AngularJS ตัวอย่าง

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

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

ลอง»

	ใช้ NG-init ไม่ได้เป็นเรื่องธรรมดามาก คุณจะได้เรียนรู้ที่จะเป็นวิธีที่ดีในการเริ่มต้นข้อมูลในบทตัวควบคุม

องค์ประกอบ HTML ซ้ำ

การเรียนการสอน NG-ซ้ำซ้ำองค์ประกอบ HTML:

AngularJS ตัวอย่าง

<div NG-App = "" NG-init = "ชื่อ = [ 'เจนี่', 'Hege', 'ไก่']">
<p> ใช้ NG-ซ้ำห่วงผ่านอาร์เรย์ </ p>
<ul>
<li NG-ซ้ำ = "x ในชื่อ">
{{X}}
</ li>
</ ul>
</ div>

ลอง»

การเรียนการสอน NG-ซ้ำถูกนำมาใช้ในอาร์เรย์ของวัตถุ:

AngularJS ตัวอย่าง

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

ลอง»

	ฐานข้อมูล CRUD AngularJS สนับสนุนที่สมบูรณ์แบบ (เพิ่มขึ้นสร้างอ่านอ่านอัปเดปรับปรุงลบลบ) การใช้งาน คิดว่าเป็นตัวอย่างของวัตถุลงในบันทึกในฐานข้อมูล

NG-App สั่ง

NG-App สั่งกำหนดรากประยุกต์ใช้องค์ประกอบ AngularJS

คำแนะนำ NG-App เมื่อโหลดหน้าเด้ง (เริ่มต้นโดยอัตโนมัติ) การใช้งานโดยอัตโนมัติ

หลังจากนั้นคุณจะได้เรียนรู้วิธีการ NG-App โดยค่า (เช่น NG-App = "MyModule") เชื่อมต่อกับโมดูลรหัส

NG-init คำสั่ง

NG-init การประยุกต์ใช้การเรียนการสอน AngularJS กำหนดค่าเริ่มต้น

ภายใต้สถานการณ์ปกติไม่ได้ใช้ NG-init คุณจะใช้ตัวควบคุมหรือโมดูลที่จะแทนที่

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

NG-รูปแบบคำสั่ง

NG-รูปแบบองค์ประกอบสั่งผูก HTML เพื่อข้อมูลแอพลิเคชัน

NG-รูปแบบคำสั่งยังสามารถ:

ให้การตรวจสอบของชนิดข้อมูลแอพลิเคชัน (จำนวนอีเมลที่จำเป็น)
ให้สถานะของข้อมูลโปรแกรมประยุกต์ (ที่ไม่ถูกต้องสกปรกสัมผัสข้อผิดพลาด)
ให้เรียน CSS สำหรับองค์ประกอบ HTML
องค์ประกอบ HTML เชื่อมโยงกับรูปแบบของ HTML

NG-ซ้ำการเรียนการสอน

การเรียนการสอน NG-ซ้ำสำหรับคอลเลกชัน (อาร์เรย์) ของแต่ละรายการจะโคลนองค์ประกอบแบบ HTML

สร้างคำสั่งที่กำหนดเอง

นอกจาก AngularJS คำแนะนำในตัวเรายังสามารถสร้างคำสั่งที่กำหนดเอง

ฟังก์ชั่น.directive คุณสามารถใช้เพื่อเพิ่มคำสั่งที่กำหนดเอง

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

ใช้วิธีโคกชื่อสั่ง w3bigDirective แต่เมื่อคุณจำเป็นต้องใช้มัน -การแบ่งส่วน w3big-Directive:

AngularJS ตัวอย่าง

<body NG-App = "แอปของฉัน ">

<W3big-Directive> </ w3big -directive>

<script>
var App = angular.module ( "MyApp" []);
app.directive ( "w3bigDirective" ฟังก์ชั่น () {
กลับ {
แม่แบบ: "<h1> คำสั่ง </ h1>!"
};
});
</ script>

</ body>

ลอง»

คุณสามารถเรียกการเรียนการสอนในรูปแบบต่อไปนี้: