เพื่อนที่คุ้นเคยกับ HTML รู้ว่า HTML มีคุณลักษณะมากมาย ตัวอย่างเช่นแอตทริบิวต์ HREF ของแท็ก <a> สามารถระบุที่อยู่ URL ของลิงค์และแอตทริบิวต์ประเภทของแท็ก <put> สามารถใช้เพื่อระบุประเภทของอินพุต คำสั่ง AngularJS เพิ่มฟังก์ชั่นให้กับแอปพลิเคชัน AngularJS โดยขยายแอตทริบิวต์ HTML
Directive AngularJS ใช้เพื่อขยาย HTML นี่คือคุณสมบัติพิเศษทั้งหมดที่เริ่มต้นด้วยคำนำหน้า NG- เราจะหารือเกี่ยวกับคำสั่งต่อไปนี้:
คำสั่ง AngularJS ที่ใช้กันทั่วไป
คำสั่ง NG-APP เริ่มต้นแอปพลิเคชัน AngularJS
คำสั่ง NG-init เริ่มต้นข้อมูลแอปพลิเคชัน
คำสั่ง NG-model ผูกค่าองค์ประกอบ (เช่นค่าของฟิลด์อินพุต) ไปยังแอปพลิเคชัน
คำสั่ง ng-app
คำสั่ง NG-APP เริ่มแอปพลิเคชัน AngularJS มันกำหนดองค์ประกอบรูท มันเริ่มต้นโดยอัตโนมัติหรือเริ่มแอปพลิเคชันที่โหลดหน้าเว็บของแอปพลิเคชัน AngularJS นอกจากนี้ยังใช้ในการโหลดโมดูล AngularJS ต่างๆแอปพลิเคชัน AngularJS ในตัวอย่างต่อไปนี้เรากำหนดแอปพลิเคชัน AngularJS เริ่มต้นโดยใช้แอตทริบิวต์ NG-APP ขององค์ประกอบ DIV
<div ng-app = ""> ... </div>
คำสั่ง ng-init
คำสั่ง NG-init เริ่มต้นข้อมูลของแอปพลิเคชัน AngularJS มันถูกใช้เพื่อใส่ค่าในแอปพลิเคชันเพื่อใช้ตัวแปร ในตัวอย่างต่อไปนี้เราจะเริ่มต้นอาร์เรย์ของประเทศ ใช้ไวยากรณ์ JSON เพื่อกำหนดอาร์เรย์ของประเทศ
<div ng-app = "" ng-init = "ประเทศ = [{locale: 'en-us', ชื่อ: 'United States'}, {locale: 'en-gb', ชื่อ: 'สหราชอาณาจักร'}, {locale: 'en-fr', ชื่อ: 'France'}]"> ...คำสั่ง ng-model
Directive NG Model กำหนดโมเดล/ตัวแปรที่ใช้ในแอปพลิเคชัน AngularJS ในตัวอย่างต่อไปนี้เรากำหนดโมเดลที่เรียกว่า "ชื่อ"
<div ng-app = ""> ... <p> ป้อนชื่อของคุณ: <input type = "text" ng-model = "name"> </p> </div>
คำสั่งทำซ้ำ NG
คำสั่ง NG-Repeat ซ้ำแต่ละรายการในคอลเลกชันองค์ประกอบ HTML ในตัวอย่างต่อไปนี้เราได้วนซ้ำในประเทศอาร์เรย์
<div ng-app = ""> ... <p> รายชื่อประเทศที่มีสถานที่: </p> <ol> <li ng-repeat = "ประเทศในประเทศ"> {{'ประเทศ:' + ประเทศ. name + ', locale:' + country.locale}ตัวอย่างคำสั่ง AngularJS
<div ng-app = "" ng-init = "firstName = 'john'"> <p> ลองเข้าไปในกล่องอินพุต: </p> <p> ชื่อ: <อินพุต type = "text" ng-model = "firstName"> </p> <p>
คำสั่ง NG-APP บอก AngularJS ว่าองค์ประกอบ <div> ปัจจุบันเป็นแอปพลิเคชัน AngularJS คำสั่ง NG-init ใช้ในการเริ่มต้นข้อมูลซึ่งเทียบเท่ากับตัวแปรนิยามใน JavaScript ข้อมูลที่มีผลผูกพันใน AngularJs การซิงโครไนซ์การแสดงออกของ AngularJS และข้อมูล AngularJS {{firstName}} ถูกซิงโครไนซ์โดย ng-model = "firstName" ตัวอย่างข้างต้นจะซิงโครไนซ์เนื้อหาที่คุณป้อนในกล่องอินพุตบนหน้า
สังเกต
หน้าเว็บสามารถมีแอปพลิเคชัน AngularJS หลายตัวที่ทำงานในองค์ประกอบต่าง ๆ
ไม่ใช่เรื่องธรรมดามากที่จะเริ่มต้นข้อมูลโดยใช้ NG-Init คุณจะได้เรียนรู้วิธีที่ดีกว่าในการเริ่มต้นข้อมูลของคุณในบทที่ตามมา
คำสั่งทำซ้ำ NG
คำสั่ง NG-Repeat จะทำซ้ำองค์ประกอบ HTML ซึ่งเทียบเท่ากับแต่ละลูปใน JavaScript
<div ng-app = "" ng-init = "names = ['jani', 'hege', 'kai']"> <p> ใช้ ng-repeat เพื่อวนอาร์เรย์ </p> <ul> <li ng-repeat = "x ในชื่อ"> {{x}} </li>ตัวอย่างข้างต้นจะถูกแยกวิเคราะห์เป็น html ต่อไปนี้
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li></ul>
NG-repeat ทำงานบนอาร์เรย์วัตถุ:
<div ng-app = "" ng-init = "names = [{ชื่อ: 'jani', ประเทศ: 'นอร์เวย์'}, {ชื่อ: 'hege', ประเทศ: 'สวีเดน'}, {ชื่อ: 'kai', ประเทศ: 'เดนมาร์ก'}]"> <p> X.Country}} </li></ul> </div>มันจะถูกแยกวิเคราะห์เป็น html ต่อไปนี้:
<ul> <li> Jani, Norway </li> <li> Hege, Sweden </li> <li> Kai, Denmark </li></ul>
คำสั่งที่กำหนดเอง
นอกเหนือจากคำสั่งในตัวใน AngularJs แล้วเรายังสามารถสร้างคำสั่งที่กำหนดเองได้ คุณสามารถใช้ฟังก์ชัน. directive เพื่อเพิ่มคำสั่งที่กำหนดเอง ในการเรียกคำสั่งที่กำหนดเองคุณต้องเพิ่มชื่อคำสั่งที่กำหนดเองในองค์ประกอบ HTML ใช้เมธอดอูฐเพื่อตั้งชื่อคำสั่ง askh5directive แต่เมื่อใช้งานคุณต้องแยกด้วย - ASKH5 -Directive
<body ng-app = "myapp"> <askh5-directive> </askh5-directive> <script> var app = angular.module ("myapp", []); app.directive ("askh5directive", ฟังก์ชั่น () {return {template: "<h1> คำสั่งที่กำหนดเอง!ตัวอย่างข้างต้นแยกวิเคราะห์เป็น:
<H1> คำสั่งที่กำหนดเอง! </h1>
คำสั่งสามารถเรียกได้ด้วยวิธีต่อไปนี้:
ชื่อองค์ประกอบ: <Skh5--cirective> </sskh5--cirective>
แอตทริบิวต์: <div Askh5- กำกับ> </div>
ชื่อคลาส: <div> </div>
ความคิดเห็น: <!-คำสั่ง: Askh5-directive->
จำกัด การใช้ข้อ จำกัด
ค่า จำกัด สามารถเป็นดังต่อไปนี้:
E ใช้ชื่อองค์ประกอบเท่านั้น
มีคุณสมบัติเฉพาะ
c ใช้ชื่อคลาสเท่านั้น
M มีให้ความคิดเห็นเท่านั้น
ค่าเริ่มต้นของการ จำกัด คือ EA นั่นคือคำสั่งสามารถเรียกผ่านชื่อองค์ประกอบและชื่อแอตทริบิวต์
var app = angular.module ("myapp", []); app.directive ("askh5directive", function () {return {จำกัด : "a", แม่แบบ: "<h1> คำสั่งที่กำหนดเอง! </h1>"};});AngularJs ด้านบนจะอนุญาตให้มีการเรียกใช้คุณสมบัติเท่านั้น
การอ่านที่เกี่ยวข้อง:
AngularJs บทแนะนำเบื้องต้น: AngularJs Expressions
เนื้อหาข้างต้นเป็นบทแนะนำเบื้องต้นของ AngularJS ของ AngularJS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!