เทมเพลตเชิงมุมเป็นข้อกำหนดการประกาศซึ่งแสดงผลในมุมมองที่ผู้ใช้เห็นในเบราว์เซอร์พร้อมกับข้อมูลของโมเดลและคอนโทรลเลอร์ มันเป็น DOM แบบคงที่รวมถึง HTML, CSS, องค์ประกอบพิเศษเชิงมุมและคุณลักษณะองค์ประกอบที่ระบุเชิงมุม องค์ประกอบเชิงมุมและแอตทริบิวต์บ่งบอกถึงเชิงมุมเพื่อขยายพฤติกรรมและเพื่อแปลงเทมเพลต DOM เป็นมุมมองแบบไดนามิก DOM
นี่คือประเภทของแอตทริบิวต์เชิงมุมที่เราสามารถใช้ในเทมเพลต:
หมายเหตุ: นอกเหนือจากการประกาศองค์ประกอบข้างต้นในเทมเพลตแล้วเรายังสามารถเข้าถึงองค์ประกอบเหล่านี้ในรหัส JavaScript
ตัวอย่างโค้ดต่อไปนี้แสดงเทมเพลตเชิงมุมแบบง่าย ๆ ซึ่งประกอบด้วยแท็ก HTML มาตรฐานและคำสั่งเชิงมุมนิพจน์ที่โค้งมน ({{Expression}}, //www.vevb.com/article/91742.htm)
<! doctype html> <!-ng-app, กำหนดขอบเขตแอปพลิเคชันสร้างรูท scop-> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <tites> http-equiv = "x-ua ที่เข้ากันได้"> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <!-ng-cloak คลาสที่จะถูกลบออกหลังจากการรวบรวม ng-controller, คำสั่ง, ใช้เพื่อระบุว่าตัวควบคุมที่สอดคล้องกันของเทมเพลตปัจจุบันคือ myController-> <body ng-controller = "myController"> <! -> <อินพุต type = "text" ng-model = "foo" value = ""/> <!-ng-click, directive, สิ่งที่คุณต้องทำหลังจากคลิกสามารถแสดงออกเช่น buttonText = '1'; หรืออาจเป็นฟังก์ชั่นการโทรดังที่แสดงด้านล่าง {{buttonText}} ใช้เพื่อแสดงค่าของ buttonText ที่สามารถหรือได้รับในห่วงโซ่ขอบเขตปัจจุบัน-> <button ng-click = "ChangeFoo ()"> {{buttonText}} </button> <script src = "../ angular-1.0.1.js" type = "type = javascript myController ($ scope) {$ scope.buttontext = "สิ่งเริ่มต้น"; // เริ่มต้นรุ่น buttontext $ scope.foo = "แก้ไขฉัน"; // เริ่มต้นโมเดล foo $ scope.changefoo = function () {// ประกาศการเปลี่ยนแปลงนี้ - } </script> </body> </html>ในแอปพลิเคชันหน้าเดียวอย่างง่ายเทมเพลตประกอบด้วย HTML, CSS และ Directive เชิงมุมทั้งหมดที่มีอยู่ในไฟล์ HTML (โดยปกติเรียกว่า index.html) แต่ในแอพพลิเคชั่นที่ซับซ้อนยิ่งขึ้นเราสามารถแสดงหลายมุมมองในหน้าเดียวโดยใช้ "partials" นั่นคือจัดเก็บเซ็กเมนต์เทมเพลตในไฟล์ HTML แยกต่างหาก เราสามารถใช้บริการ $ Route (http://code.angularjs.org/1.0.2/docs/api/ng.$route) และ NgView Directive (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngview) ตัวอย่างของเทคนิคนี้แสดงในขั้นตอนที่เจ็ดและแปดของการสอนเชิงมุม (http://code.angularjs.org/1.0.2/docs/tutorial/index) (ฉันจะเล่นกับส่วนนี้ในภายหลัง -_-!)
ข้างต้นเป็นชุดข้อมูลเกี่ยวกับ AngularJS ทำความเข้าใจกับแม่แบบเชิงมุม เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!