คำสั่ง Angularjs
AngularJS ขยาย HTML ด้วยคุณสมบัติใหม่ที่เรียกว่าคำสั่ง
AngularJS เพิ่มฟังก์ชันการทำงานให้กับแอปพลิเคชันผ่านคำแนะนำในตัว
AngularJS ช่วยให้คุณปรับแต่งคำสั่ง
คำสั่ง Angularjs
AngularJS Directive เป็นแอตทริบิวต์ HTML ที่ขยายออกไปพร้อมคำนำหน้า ng-
คำสั่ง NG-APP เริ่มต้นแอปพลิเคชัน AngularJS
คำสั่ง NG-init เริ่มต้นข้อมูลแอปพลิเคชัน
คำสั่ง NG-model ผูกค่าองค์ประกอบ (เช่นค่าของฟิลด์อินพุต) ไปยังแอปพลิเคชัน
สำหรับคำแนะนำที่สมบูรณ์โปรดดูคู่มืออ้างอิง AngularJS
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "firstName = 'john'"> <p> ลองป้อนในกล่องอินพุต: </p> <p> ชื่อ: <อินพุต type = "text" ng-model = "firstName"> </p> <p> คุณพิมพ์เป็น: {{firstName}} </p>ผลการทำงาน:
ลองป้อนในกล่องอินพุต:
ชื่อ:
สิ่งที่คุณพิมพ์คือ: จอห์น
คำสั่ง NG-APP บอก AngularJS ว่าองค์ประกอบ <div> เป็น "เจ้าของ" ของแอปพลิเคชัน AngularJS
หมายเหตุ: หน้าเว็บสามารถมีแอปพลิเคชัน AngularJS หลายตัวที่ทำงานในองค์ประกอบต่าง ๆ
การผูกมัดข้อมูล
นิพจน์ {{firstName}} ในตัวอย่างด้านบนคือนิพจน์การเชื่อมโยงข้อมูล AngularJS
ข้อมูลที่มีผลผูกพันใน AngularJs การซิงโครไนซ์การแสดงออกของ AngularJS และข้อมูล AngularJS
{{firstName}} ถูกซิงโครไนซ์โดย ng-model = "firstName"
ในตัวอย่างถัดไปฟิลด์ข้อความทั้งสองจะถูกซิงโครไนซ์โดยสองรูปแบบ Ng-model:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" data-ng-init = "ปริมาณ = 1; ราคา = 5"> ราคาเครื่องคิดเลขราคา: <อินพุตประเภท = "หมายเลข" ng-model = "ปริมาณ"> ราคา: <อินพุตประเภท = "จำนวน" ng-model = "ราคา"> <p> <b> ราคารวม: </b>
ผลการทำงาน:
เครื่องคำนวณราคา
ปริมาณ: ราคา:
ราคารวม: 5
หมายเหตุ: การใช้ NG-init นั้นไม่ได้เป็นเรื่องธรรมดามากนัก คุณจะได้เรียนรู้วิธีที่ดีกว่าในการเริ่มต้นข้อมูลในบทคอนโทรลเลอร์
ทำซ้ำองค์ประกอบ HTML
คำสั่ง NG-repeat ทำซ้ำองค์ประกอบ HTML:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" data-ng-init = "names = ['jani', 'hege', 'kai']"> <p> ใช้ ng-repeat เพื่อวนอาร์เรย์ </p> <ul> <li data-ng-repeat = "x ในชื่อ"> {{x}} </li>ใช้ ng- ทำซ้ำเพื่อวนอาร์เรย์
คำสั่ง NG-repeat ใช้กับอาร์เรย์ของวัตถุ:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "ชื่อ = [{ชื่อ: 'Jani', ประเทศ: 'นอร์เวย์'}, {ชื่อ: 'hege', ประเทศ: 'สวีเดน'}, {ชื่อ: 'kai', ประเทศ: 'เดนมาร์ก'}"> <p> }} </li></ul> </div> </body> </html>Loop Object:
NoteAngularJS รองรับฐานข้อมูล CRUD อย่างสมบูรณ์ (เพิ่มการสร้างอ่านอ่านอัปเดตอัปเดตการลบลบ) แอปพลิเคชัน
คิดว่าวัตถุในอินสแตนซ์เป็นบันทึกในฐานข้อมูล
คำสั่ง ng-app
คำสั่ง NG-APP กำหนดองค์ประกอบรูทของแอปพลิเคชัน AngularJS
Directive NG-APP บูทโดยอัตโนมัติ (เริ่มต้นอัตโนมัติ) แอปพลิเคชันเมื่อโหลดหน้าเว็บ
ในภายหลังคุณจะได้เรียนรู้ว่า NG-APP เชื่อมต่อกับโมดูลรหัสผ่านค่า (เช่น NG-APP = "MyModule")
คำสั่ง ng-init
คำสั่ง NG-init กำหนดค่าเริ่มต้นสำหรับแอปพลิเคชัน AngularJS
โดยปกติจะไม่ใช้ NG-init คุณจะใช้คอนโทรลเลอร์หรือโมดูลแทน
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคอนโทรลเลอร์และโมดูลในภายหลัง
คำสั่ง ng-model
โมเดล NG Directive ผูกองค์ประกอบ HTML กับข้อมูลแอปพลิเคชัน
โมเดล NG คำแนะนำสามารถ:
ให้การตรวจสอบประเภท (หมายเลข, อีเมล, จำเป็น) สำหรับข้อมูลแอปพลิเคชัน
ให้สถานะ (ไม่ถูกต้องสกปรกสัมผัสข้อผิดพลาด) สำหรับข้อมูลแอปพลิเคชัน
จัดเตรียมคลาส CSS สำหรับองค์ประกอบ HTML
ผูกองค์ประกอบ HTML กับรูปแบบ HTML
คำสั่งทำซ้ำ NG
องค์ประกอบ NG-Repeat Directive Clones HTML หนึ่งครั้งสำหรับแต่ละรายการในคอลเลกชัน (ในอาร์เรย์)
สร้างคำสั่งที่กำหนดเอง
นอกเหนือจากคำสั่งในตัวใน AngularJs แล้วเรายังสามารถสร้างคำสั่งที่กำหนดเองได้
คุณสามารถใช้ฟังก์ชัน. directive เพื่อเพิ่มคำสั่งที่กำหนดเอง
ในการเรียกคำสั่งที่กำหนดเองคุณต้องเพิ่มชื่อคำสั่งที่กำหนดเองในองค์ประกอบ HTML
ใช้เมธอดอูฐเพื่อตั้งชื่อคำสั่ง runoobdirective แต่เมื่อใช้งานคุณต้องแยก, runoob-directive:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app = "myapp"> <runoob-directive> </runoob-directive> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", ฟังก์ชัน () {return {template: "custom directive!"};};ผลการทำงาน:
คำสั่งที่กำหนดเอง!
คุณสามารถเรียกคำสั่งด้วยวิธีต่อไปนี้:
ชื่อองค์ประกอบ
คุณสมบัติ
ชื่อชั้นเรียน
ความเห็น
ตัวอย่างต่อไปนี้ยังสามารถส่งออกผลลัพธ์เดียวกัน:
ชื่อองค์ประกอบ
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app = "myapp"> <runoob-directive> </runoob-directive> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", ฟังก์ชัน () {return {template: "custom directive!"};};ผลการทำงาน:
คำสั่งที่กำหนดเอง!
คุณสมบัติ:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" runoob-directive> </div> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "Custom Directive!"};});ผลการทำงาน:
คำสั่งที่กำหนดเอง!
ชื่อคลาส:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" Angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {จำกัด : "c", แม่แบบ: "c"! "};}); </script> <p> <strong> หมายเหตุ: </p> </body> </html>คำสั่งที่กำหนดเอง!
หมายเหตุ: คุณต้องตั้งค่าของการ จำกัด เป็น "C" เพื่อเรียกคำสั่งด้วยชื่อคลาส
หมายเหตุ:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" -> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", ฟังก์ชั่น () {return {จำกัด : "m", แทนที่: จริง, เทมเพลต: "คำสั่งที่กำหนดเอง!"};}); </p> <p> <strong> หมายเหตุ: </strong> คุณต้องตั้งค่า <b> จำกัด </b> เป็น "M" เพื่อเรียกใช้คำสั่งผ่านความคิดเห็น </p> </body> </html>ผลการทำงาน:
คำสั่งที่กำหนดเอง!
หมายเหตุ: เราจำเป็นต้องเพิ่มแอตทริบิวต์แทนที่ลงในอินสแตนซ์นี้มิฉะนั้นความคิดเห็นจะไม่ปรากฏให้เห็น
หมายเหตุ: คุณต้องกำหนดค่าของการ จำกัด เป็น "M" เพื่อเรียกคำสั่งผ่านความคิดเห็น
การใช้งานที่ จำกัด
คุณสามารถ จำกัด คำสั่งของคุณที่จะเรียกได้ในวิธีที่เฉพาะเจาะจงเท่านั้น
ตัวอย่าง
โดยการเพิ่มคุณสมบัติการ จำกัด และการตั้งค่าเฉพาะค่าเป็น "A" คำสั่งสามารถเรียกได้ผ่านแอตทริบิวต์เท่านั้น:
รหัสตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app = "myapp"> <runoob--directive> </runoob--directive> <div runoob-directive> </div> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function (กลับ {retrict: " };}); </script> <p> <strong> หมายเหตุ: </strong> การตั้งค่าคำสั่งสามารถเรียกได้ผ่านแอตทริบิวต์ขององค์ประกอบ HTML โดยการตั้งค่า <strong> จำกัด </strong> ค่าแอตทริบิวต์เป็น "A" </p> </body> </html>ผลการทำงาน:
คำสั่งที่กำหนดเอง!
หมายเหตุ: คำสั่งการตั้งค่าสามารถเรียกได้โดยการตั้งค่าแอตทริบิวต์ จำกัด เป็น "A"
ค่า จำกัด สามารถเป็นดังต่อไปนี้:
E ใช้ชื่อองค์ประกอบเท่านั้น
มีคุณสมบัติเฉพาะ
c ใช้ชื่อคลาสเท่านั้น
M มีให้ความคิดเห็นเท่านั้น
ค่าเริ่มต้นของการ จำกัด คือ EA นั่นคือคำสั่งสามารถเรียกผ่านชื่อองค์ประกอบและชื่อแอตทริบิวต์
ข้างต้นคือการรวบรวมข้อมูลคำสั่ง AngularJS และจะเสริมต่อไปในภายหลัง