คำสั่ง AngularJS คืออะไร

ฉันใช้เวลาอ่านเอกสาร AngularJS และแบบฝึกหัดหลายครั้งค่อนข้างมากและฉันรู้สึกประหลาดใจมากที่เอกสารไม่สามารถเข้าถึงได้

ฉันมีคำถามง่ายๆที่ตอบได้ซึ่งอาจเป็นประโยชน์กับผู้อื่นที่ต้องการซื้อ AngularJS:

คำสั่ง AngularJS คืออะไร

ควรมีคำจำกัดความที่เรียบง่ายและแม่นยำของคำสั่งบางแห่ง แต่เว็บไซต์ AngularJSเสนอคำจำกัดความที่ไร้ประโยชน์เหล่านี้:

ในหน้าแรก :

คำสั่งเป็นคุณสมบัติพิเศษและมีประสิทธิภาพที่มีอยู่ใน AngularJS คำสั่งให้คุณสร้างไวยากรณ์ HTML ใหม่เฉพาะสำหรับแอปพลิเคชันของคุณ

ในเอกสารสำหรับนักพัฒนา :

คำสั่งเป็นวิธีสอน HTML แบบใหม่ ระหว่างการคอมไพล์คำสั่ง DOM จะจับคู่กับ HTML และดำเนินการ สิ่งนี้อนุญาตให้คำสั่งในการลงทะเบียนพฤติกรรมหรือเปลี่ยน DOM

และมีการพูดคุยกันหลายครั้งเกี่ยวกับคำสั่งซึ่งดูเหมือนว่าจะถือว่าผู้ชมเข้าใจสิ่งที่พวกเขาเป็น

ทุกคนจะสามารถนำเสนอสำหรับการอ้างอิงที่ชัดเจนคำจำกัดความที่แม่นยำของสิ่งที่เป็นคำสั่งที่อธิบาย:

1. มันคืออะไร (ดูคำจำกัดความที่ชัดเจนของ jQueryเป็นตัวอย่าง)
2. ปัญหาและสถานการณ์ในทางปฏิบัติที่ควรนำมากล่าวถึงคืออะไร
3. รูปแบบการออกแบบใดที่บ่งบอกถึงหรือว่ามันเหมาะสมกับภารกิจMVC / MVW ที่อ้างว่าเป็นของ AngularJS

มันคืออะไร (ดูคำจำกัดความที่ชัดเจนของ jQuery เป็นตัวอย่าง)

คำสั่งนั้นเป็นฟังก์ชัน^†ที่ดำเนินการเมื่อคอมไพเลอร์ Angular พบใน DOM ฟังก์ชั่นสามารถทำอะไรได้เกือบทุกอย่างซึ่งเป็นสาเหตุที่ฉันคิดว่ามันค่อนข้างยากที่จะกำหนดว่าคำสั่งคืออะไร แต่ละคำสั่งมีชื่อ (เช่น ng-repeat, แท็บ, การแต่งหน้าของคุณเอง) และแต่ละคำสั่งจะเป็นตัวกำหนดว่าจะใช้ที่ไหน: องค์ประกอบ, แอตทริบิวต์, คลาส, ในความคิดเห็น

^directคำสั่งตามปกติจะมีฟังก์ชั่นลิงก์ (โพสต์) เท่านั้น คำสั่งที่ซับซ้อนอาจมีฟังก์ชั่นคอมไพล์, ฟังก์ชั่น pre-link และฟังก์ชั่นโพสต์ลิงค์

ปัญหาและสถานการณ์ในทางปฏิบัติที่มุ่งหวังจะแก้ไขคืออะไร?

แนวทางที่ทรงพลังที่สุดสามารถทำได้คือการขยาย HTML ส่วนขยายของคุณเป็นโดเมนเฉพาะภาษา (DSL) สำหรับการสร้างแอปพลิเคชันของคุณ ตัวอย่างเช่นหากแอปพลิเคชันของคุณเรียกใช้เว็บไซต์ช็อปปิ้งออนไลน์คุณสามารถขยาย HTML เพื่อให้มี "ตะกร้าสินค้า", "คูปอง", "พิเศษ" และอื่น ๆ คำสั่ง - คำหรือวัตถุหรือแนวคิดใด ๆ โดเมน "การช็อปปิ้งออนไลน์แทนที่จะเป็น" div "และ" span "s (ดังที่ @WTK พูดถึงแล้ว)

คำสั่งยังสามารถจัดองค์ประกอบ HTML - จัดกลุ่มของ HTML เป็นองค์ประกอบที่นำกลับมาใช้ใหม่ได้ หากคุณพบว่าตัวเองกำลังใช้ ng-include เพื่อดึง HTML จำนวนมากอาจถึงเวลาที่คุณต้องกำหนดทิศทางใหม่

รูปแบบการออกแบบใดที่รวมเข้าด้วยกันหรืออีกวิธีหนึ่งที่เหมาะสมกับภารกิจ MVC / MVW ของ Angularj

คำสั่งคือที่ที่คุณจัดการ DOM และรับเหตุการณ์ DOM นี่คือเหตุผลที่ฟังก์ชั่นคอมไพล์และลิงค์ของคำสั่งได้รับ "องค์ประกอบ" เป็นอาร์กิวเมนต์ คุณสามารถ

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

อาจจะเป็นคำนิยามที่ง่ายและเริ่มต้นสำหรับคำสั่งเชิงมุมก็ได้

AngularJS directives (ng-directives) เป็นคุณสมบัติ HTML ที่มีคำนำหน้า ng (ng-model, ng-app, ng-repeat, ng-bind) ที่ใช้โดย Angular เพื่อขยาย HTML ( จาก: W3schools การสอนเชิงมุม )

ตัวอย่างนี้จะเป็น

NG-app ที่สั่งกำหนดโปรแกรมประยุกต์ AngularJS

งะแบบสั่งผูกค่าของการควบคุม HTML (input เลือก, textarea) ข้อมูลแอพลิเคชัน

NG-ผูกผูกสั่งข้อมูลการใช้เป็นมุมมอง HTML

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

ตรวจสอบบทช่วยสอนนี้อย่างน้อยสำหรับฉันนี่เป็นหนึ่งในการแนะนำที่ดีที่สุดสำหรับ Angular วิธีการที่สมบูรณ์ยิ่งขึ้นจะเป็นทุกสิ่งที่ @ mark-rajcok กล่าวไว้ก่อนหน้านี้

ดูเอกสารประกอบคำสั่งเป็นโครงสร้างที่คุณสามารถเขียน angularjs แยกวิเคราะห์เพื่อสร้างวัตถุและพฤติกรรมในคำอื่น ๆ มันเป็นแม่แบบที่คุณใช้การผสมผสานของโหนดใด ๆ และ pseudo-javascript และตัวยึดตำแหน่งสำหรับข้อมูลเพื่อแสดงเจตนาของวิธี วิดเจ็ตของคุณ (ส่วนประกอบ) มีโครงสร้างวิธีการทำงานและวิธีการฟีดข้อมูล Angularjs จะทำงานกับคำสั่งเหล่านั้นเพื่อแปลเป็นรหัส html / javascript ที่ใช้งานได้

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

ใน AngularJS Directives เป็นตัวทำเครื่องหมาย html สำหรับองค์ประกอบ HTML DOM เช่นแอตทริบิวต์ (จำกัด - A) ชื่อองค์ประกอบ (จำกัด - E) ความคิดเห็น (จำกัด - M) หรือ CSS คลาส (จำกัด - C) ที่บอกคอมไพเลอร์ HTML ของ AngularJS ($ รวบรวม) เพื่อดำเนินการพฤติกรรมที่ระบุให้กับองค์ประกอบ DOM นั้นหรือแม้กระทั่งการเปลี่ยนองค์ประกอบ DOM และลูก ๆ ของมันตัวอย่างบางส่วนเป็น ng-bind, ng-hide / แสดง ฯลฯ

หน้าแรกมีความชัดเจนเกี่ยวกับสิ่งนี้: เมื่อคุณวางเมาส์เหนือแท็บในส่วนสุดท้าย:

เราได้ขยายคำศัพท์ HTML ด้วยtabs องค์ประกอบที่กำหนดเอง tabsบทคัดย่อโครงสร้าง HTML ซับซ้อนและพฤติกรรมที่จำเป็นสำหรับการแสดงผลของแท็บ ผลลัพธ์คือมุมมองที่อ่านได้มากขึ้นและไวยากรณ์ที่ใช้ซ้ำได้ง่ายมาก "

จากนั้นในแท็บถัดไป:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

ดังนั้นคุณสามารถประดิษฐ์องค์ประกอบ html เช่นtabsและให้มุมจัดการการแสดงผลขององค์ประกอบเหล่านั้น