Angular คือ ตอนที่ 1 : คำสั่ง (Directives)

21พ.ค. 2023 by รับทำแอพ สบายไอที

คำสั่ง (Directives) AngularJS คืออะไร
คำสั่งในตัว (Built-in Directives)
การสร้างคำสั่งที่กำหนดเอง (Creating Custom Directives)
จำกัด ตัวเลือก (Restrict Option)
ฟังก์ชั่นลิงค์ (Link Function)
แยกขอบเขต (Isolate Scope)
Transclusion

เมื่อทำงานกับ AngularJS หนึ่งในเครื่องมือที่ทรงพลังที่สุดสำหรับคุณคือคำสั่ง คุณลักษณะที่สำคัญเหล่านี้ของเฟรมเวิร์กทำให้คุณสามารถสร้างไวยากรณ์ HTML ของคุณเอง ซึ่งปรับแต่งให้เหมาะกับเว็บแอปพลิเคชันของคุณโดยเฉพาะ คำสั่งเป็นลักษณะพื้นฐานของ AngularJS และเป็นเครื่องมือในการทำเว็บ Angular และทำแอพที่มีการโต้ตอบสูงและเป็นมิตรกับผู้ใช้

ความเข้าใจเบื้องต้นว่าคำสั่งคืออะไรและทำงานอย่างไรเป็นกุญแจสำคัญในการควบคุมศักยภาพสูงสุด เมื่อคุณก้าวหน้าใน “การทำเว็บ Angular และทำแอพ” การทำความเข้าใจบทบาทและฟังก์ชันการทำงานของคำสั่งจะเป็นทรัพย์สินอันล้ำค่า

1. คำสั่ง (Directives) AngularJS คืออะไร

คำสั่ง (Directives)ใน AngularJS เป็นเครื่องหมายบนองค์ประกอบ DOM (เช่น แอตทริบิวต์ ชื่อองค์ประกอบ หรือคลาส CSS) ที่บอกให้คอมไพเลอร์ HTML ของ AngularJS ($compile) แนบพฤติกรรมที่ระบุกับองค์ประกอบ DOM นั้น กล่าวอีกนัยหนึ่ง คำสั่งคือวิธีการสอนลูกเล่นใหม่ๆ ของ HTML

Directives เป็นหนึ่งในฟีเจอร์ที่เป็นเอกลักษณ์และทรงพลังของ AngularJS ช่วยให้คุณสร้างไวยากรณ์ HTML ใหม่ เฉพาะสำหรับแอปพลิเคชันของคุณ AngularJS มาพร้อมกับชุดคำสั่งเหล่านี้ในตัว เช่น ngBind, ngModel และ ngClass

2. คำสั่งในตัว (Built-in Directives)

AngularJS มีคำสั่งในตัวจำนวนมาก แต่ละคำสั่งมีฟังก์ชันการทำงานเฉพาะที่ช่วยในการทำเว็บ Angular และทำแอพของคุณ:

คำ สั่ง ngModel ผูกอินพุต, เลือก, textarea (หรือตัวควบคุมฟอร์มแบบกำหนดเอง) กับคุณสมบัติในขอบเขตโดยใช้ NgModelController ซึ่งสร้างและเปิดเผยโดยคำสั่งนี้
คำสั่ง ngBind จะแทนที่เนื้อหาข้อความขององค์ประกอบ HTML ที่ระบุด้วยค่าของนิพจน์ที่กำหนด และอัปเดตเนื้อหาข้อความเมื่อค่าของนิพจน์นั้นเปลี่ยนไป
คำสั่ง ngClass ผูกคลาส CSS อย่างน้อยหนึ่งคลาสกับองค์ประกอบ HTML แบบไดนามิก

3. การสร้างคำสั่งที่กำหนดเอง (Creating Custom Directives)

นอกเหนือจากการใช้คำสั่งในตัวแล้ว AngularJS ยังให้คุณกำหนดคำสั่งที่กำหนดเองได้ ซึ่งให้ความยืดหยุ่นมากขึ้นในการจัดโครงทำเว็บ Angular และทำแอพของคุณ

คำสั่งที่กำหนดเองถูกกำหนดโดยใช้directiveฟังก์ชัน ชื่อของคำสั่งระบุไว้ในกรณีอูฐ (เช่นmyDirective) แต่เมื่อใช้ เราจะใช้รูปแบบที่คั่นด้วยเส้นประ (เช่นmy-directive)

พิจารณาคำสั่งง่ายๆ ที่สร้างปุ่ม “Back”:

var app = angular.module('myApp', []);
app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<a href="#" class="btn btn-primary">Back</a>'
    };
});

คำสั่งที่กำหนดเองนี้myDirective, สร้างปุ่มที่เมื่อคลิกแล้ว จะนำผู้ใช้กลับไปยังหน้าก่อนหน้า คำสั่งจำกัดองค์ประกอบ ( 'E') และกำหนดแม่แบบสำหรับปุ่ม “ย้อนกลับ”

4. จำกัด ตัวเลือก (Restrict Option)

ใน AngularJS restrict ตัวเลือกจะใช้เพื่อระบุว่าจะใช้คำสั่งในมุมมองอย่างไร restrict สามารถตั้งค่าตัวเลือกต่อไปนี้:

‘A’ – ตรงกับชื่อแอตทริบิวต์เท่านั้น
‘E’ – ตรงกับชื่อองค์ประกอบเท่านั้น
‘C’ – ตรงกับชื่อคลาสเท่านั้น
‘M’ – ตรงกับความคิดเห็นเท่านั้น

5. ฟังก์ชั่นลิงค์ (Link Function)

ฟังก์ชันลิงก์เป็นส่วนสำคัญในการสร้างคำสั่งที่กำหนดเอง ฟังก์ชันนี้ใช้สำหรับลงทะเบียนฟัง DOM เช่นเดียวกับการอัปเดต DOM จะดำเนินการเมื่อแม่แบบถูกโคลน

นี่คือตัวอย่างคำสั่งที่มีฟังก์ชันเชื่อมโยง:

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                console.log('Element clicked!');
            });
        }
    };
});

ในโค้ดนี้ เรามีคำสั่งmyDirectiveที่บันทึกว่า “คลิกองค์ประกอบแล้ว!” ไปยังคอนโซลทุกครั้งที่มีการคลิกองค์ประกอบ HTML ที่ใช้คำสั่งนี้ เรากำลังใช้ฟังก์ชันลิงก์เพื่อผูกเหตุการณ์การคลิกเข้ากับองค์ประกอบ

นี่เป็นการใช้ฟังก์ชันลิงก์อย่างง่าย แต่แสดงให้เห็นความสำคัญในลักษณะการผูกมัดกับองค์ประกอบของไดเร็กทีฟ

6. แยกขอบเขต (Isolate Scope)

ในบริบทของการสร้างคำสั่งที่กำหนดเอง สิ่งสำคัญคือต้องเข้าใจแนวคิดของ “แยกขอบเขต” ตามค่าเริ่มต้น คำสั่งใน AngularJS จะใช้ขอบเขตหลัก อย่างไรก็ตาม บางครั้งสิ่งนี้อาจนำไปสู่พฤติกรรมที่ไม่คาดคิด โดยเฉพาะอย่างยิ่งเมื่อมีการใช้คำสั่งเดียวกันหลายอินสแตนซ์ในตัวควบคุมเดียวกัน

เพื่อแก้ไขปัญหานี้ AngularJS ช่วยให้เราสร้างขอบเขตแยกเมื่อกำหนดคำสั่ง ซึ่งหมายความว่าคำสั่งจะมีขอบเขตของตัวเองและจะไม่รบกวนหรือแก้ไขข้อมูลในขอบเขตหลักโดยไม่ได้ตั้งใจ

นี่คือตัวอย่าง:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            myText: '@'
        },
        template: '<div>{{ myText }}</div>'
    };
});

ในคำสั่งนี้ เราสร้างขอบเขตแยกด้วยscope: { myText: '@' }. แอตทริบิวต์myTextช่วยให้เราสามารถส่งผ่านข้อมูลจากขอบเขตพาเรนต์ไปยังขอบเขตแยกของไดเร็กทีฟ สัญลักษณ์ ‘@’ ระบุถึงการเชื่อมโยงข้อมูลแบบทางเดียวจากขอบเขตพาเรนต์ไปยังไดเร็กทีฟ เมื่อใช้คำสั่ง เราสามารถส่งข้อความที่เราต้องการแสดงเป็นแอตทริบิวต์

<my-directive my-text="Hello, AngularJS!"></my-directive>

สิ่งนี้จะแสดงผล div พร้อมข้อความ “Hello, AngularJS!”

7. Transclusion

Transclusion เป็นอีกหนึ่งฟีเจอร์ที่ทรงพลังจากคำสั่ง AngularJS เป็นกระบวนการแยกเนื้อหาขององค์ประกอบและแทรกเนื้อหาเหล่านั้นกลับเข้าไปในเทมเพลตใหม่

คุณลักษณะนี้ช่วยให้เราสามารถกำหนดตัวยึดตำแหน่งในเทมเพลตของคำสั่งของเรา ซึ่งสามารถเติมเนื้อหาใดๆ ที่เราต้องการเมื่อใช้คำสั่ง เราเปิดใช้คุณลักษณะนี้โดยการตั้งค่าtransclude: trueในออบเจกต์การกำหนดคำสั่งและรวมng-transcludeคำสั่งในแม่แบบที่เราต้องการแทรกเนื้อหา

นี่คือตัวอย่าง:

app.directive('myPanel', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { title: '@' },
        template: `
            <div class="panel">
                <div class="panel-heading">{{ title }}</div>
                <div class="panel-body" ng-transclude></div>
            </div>
        `
    };
});

ในตัวอย่างนี้ เราสร้างพาเนลที่มีหัวเรื่องและเนื้อหา เราสามารถส่งชื่อแผงเป็นแอตทริบิวต์ และเนื้อหาของแผงจะแสดงเป็นเนื้อหาภายในของคำสั่ง:

<my-panel title="My Panel">
    <p>This is a custom panel created with AngularJS directives.</p>
</my-panel>

Directives เป็นเครื่องมือที่มีศักยภาพใน AngularJS ซึ่งช่วยให้คุณสามารถจัดการ Document Object Model (DOM) ได้อย่างมีประสิทธิภาพ ขยาย HTML และทำให้โค้ดของคุณสามารถอ่านและบำรุงรักษาได้มากขึ้น เป็นเครื่องมือสำคัญในการ “ทำเว็บ Angular และทำแอพ” และสร้างแอปที่มีไดนามิกและโต้ตอบสูง

ดังที่เราได้เห็นแล้วว่า การใช้คำสั่งมีตั้งแต่การใช้คำสั่งที่มีอยู่แล้วภายในอย่างง่าย ไปจนถึงการสร้างคำสั่งแบบกำหนดเองที่ซับซ้อนโดยมีขอบเขตแยก ลักษณะการทำงานแบบกำหนดเอง และเนื้อหาที่แยกออกมา

หนึ่งในจุดแข็งที่สุดของ AngularJS คือความยืดหยุ่นในการสร้างส่วนประกอบโมดูลาร์ที่นำกลับมาใช้ใหม่ได้ คำสั่งที่กำหนดเองมีบทบาทสำคัญในเรื่องนี้ เมื่อคุณทำเว็บ Angular และทำแอพต่อไป การทำความเข้าใจและการใช้คำสั่งจะมีความสำคัญมากขึ้นเรื่อยๆ

คำสั่งให้อำนาจคุณในการกำหนดคอมโพเนนต์ที่มีประสิทธิภาพและใช้ซ้ำได้ ซึ่งสามารถซ่อนโครงสร้าง DOM, CSS และลักษณะการทำงานที่ซับซ้อนได้ สิ่งนี้ส่งเสริมการใช้รหัสซ้ำ ทำให้แอปพลิเคชันของคุณแห้ง (อย่าทำซ้ำด้วยตัวเอง) และปรับปรุงความสามารถในการอ่าน

การใช้คำสั่งในทางปฏิบัติ

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

ปรับปรุงการพัฒนา AngularJS ของคุณ

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

การเรียนรู้คำสั่ง AngularJS เป็นขั้นตอนสำคัญในการกลายเป็นผู้เชี่ยวชาญใน AngularJS คำสั่งเป็นรากฐานสำหรับ “ทำเว็บ Angular และทำแอพ” โดยทำให้คุณสามารถสร้างองค์ประกอบ HTML แบบกำหนดเองที่สรุปลักษณะการทำงานและการนำเสนอ

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

ดังนั้น ในขณะที่คุณเพิ่มพูนความรู้เกี่ยวกับ AngularJS และก้าวไปสู่หัวข้อขั้นสูง ให้จำไว้เสมอถึงบทบาทสำคัญที่คำสั่งมีในเฟรมเวิร์กอันทรงพลังนี้ คุณลักษณะพิเศษนี้ทำให้ AngularJS เป็นตัวเลือกที่น่าสนใจสำหรับการทำเว็บ Angular และทำแอพสมัยใหม่