AngularJS คืออะไร? Archiโครงสร้าง คุณสมบัติ และข้อดี

AngularJS คืออะไร?

AngularJS เป็นเฟรมเวิร์ก Model-View-Controller แบบโอเพนซอร์สที่เขียนด้วยภาษาโปรแกรม Javaต้นฉบับAngularJS เป็นหนึ่งในเฟรมเวิร์กเว็บที่ได้รับความนิยมมากที่สุดในช่วงทศวรรษ 2010 และถูกนำไปใช้ในการพัฒนาเว็บไซต์ping ส่วนใหญ่เป็นแอปพลิเคชันแบบหน้าเดียว (Single Page Application) เฟรมเวิร์กนี้ได้รับการพัฒนาโดยกลุ่มนักพัฒนาจาก Google ตัวเอง

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

มีประเด็นเรื่องคำศัพท์หนึ่งที่ควรทำความเข้าใจให้ชัดเจนตั้งแต่แรก AngularJS มักถูกอธิบายว่าเป็นเฟรมเวิร์ก MVC ซึ่งเป็นจุดเริ่มต้นที่ดี แต่ทีมพัฒนา AngularJS เองกลับชอบคำจำกัดความที่ว่า "MVC" มากกว่า MVW (Model-View-Whatever)เนื่องจากรันไทม์ทำงานคล้ายกับ Model-View-ViewModel มากกว่า MVC แบบดั้งเดิม (อย่างเป็นทางการ) เอกสารประกอบ AngularJS เรียกได้ว่าเป็นโครงสร้างพื้นฐานสำหรับแอปพลิเคชันเว็บแบบไดนามิก เมื่อเข้าใจตรงกันแล้ว ต่อไปนี้คือวิธีที่แต่ละส่วนประกอบเข้าด้วยกัน

AngularJS Archiเทคเจอร์

AngularJS ใช้สถาปัตยกรรม MVC แผนภาพของเฟรมเวิร์ก MVC แสดงอยู่ด้านล่าง:

AngularJS Archiแผนภาพเทคเจอร์

แต่ละชั้นทั้งสามชั้นมีหน้าที่ที่ชัดเจน:

• ตัวควบคุมแสดงถึงเลเยอร์ที่มีตรรกะทางธุรกิจ เหตุการณ์ของผู้ใช้จะเรียกใช้ฟังก์ชันที่จัดเก็บไว้ในคอนโทรลเลอร์ของคุณ เหตุการณ์ผู้ใช้เป็นส่วนหนึ่งของตัวควบคุม
• มุมมอง (Views) ใช้สำหรับแสดงส่วนนำเสนอ (Presentation Layer) ที่ส่งไปยังผู้ใช้ปลายทาง
• แบบจำลองใช้เพื่อแสดงข้อมูลของคุณ ข้อมูลในแบบจำลองของคุณอาจเรียบง่ายได้ เช่น การประกาศข้อมูลเบื้องต้น ตัวอย่างเช่น หากคุณกำลังดูแลแอปพลิเคชันสำหรับนักเรียน แบบจำลองข้อมูลของคุณอาจมีเพียงรหัสประจำตัวนักเรียนและชื่อ หรืออาจซับซ้อนได้หากมีแบบจำลองข้อมูลที่มีโครงสร้าง หากคุณกำลังดูแลแอปพลิเคชันสำหรับเจ้าของรถยนต์ คุณสามารถมีโครงสร้างเพื่อกำหนดตัวรถเองในแง่ของความจุเครื่องยนต์ ความจุที่นั่ง ฯลฯ

ในทางปฏิบัติ ตัวควบคุม (controller) แทบจะไม่ส่งข้อมูลไปยังส่วนแสดงผล (view) ด้วยตนเองเลย AngularJS จะคอยตรวจสอบโมเดล (model) และรีเฟรชส่วนแสดงผลให้คุณโดยอัตโนมัติ และการซิงโครไนซ์อัตโนมัตินี้ขับเคลื่อนด้วยชุดคุณสมบัติที่จะอธิบายต่อไป

คุณสมบัติของ AngularJS

AngularJS มีคุณสมบัติหลักดังต่อไปนี้ ซึ่งทำให้มันเป็นหนึ่งในเฟรมเวิร์กที่มีประสิทธิภาพมากที่สุดในตลาด:

1. VMC – กรอบการทำงานถูกสร้างขึ้นจากแนวคิดอันโด่งดังของ MVC (โมเดล-มุมมอง-คอนโทรลเลอร์)- นี่คือรูปแบบการออกแบบที่ใช้ในเว็บแอปพลิเคชันยุคใหม่ทั้งหมด รูปแบบนี้ขึ้นอยู่กับการแบ่งชั้นตรรกะทางธุรกิจ ชั้นข้อมูล และชั้นการนำเสนอออกเป็นส่วนๆ มีการแบ่งส่วนออกเป็นส่วนต่างๆ เพื่อให้แต่ละส่วนสามารถจัดการได้ง่ายขึ้น
2. การเชื่อมโยงโมเดลข้อมูล – คุณไม่จำเป็นต้องเขียนโค้ดพิเศษเพื่อผูกข้อมูลกับส่วนควบคุม HTML AngularJS สามารถทำได้โดยการเพิ่มโค้ดเพียงเล็กน้อยเท่านั้น
3. เขียนโค้ดให้น้อยลง – เมื่อดำเนินการจัดการ DOM เป็นจำนวนมาก Javaต้นฉบับ การเขียนโค้ดเพื่อออกแบบแอปพลิเคชันใดๆ นั้นเป็นสิ่งจำเป็น แต่ด้วย AngularJS คุณจะประหลาดใจกับปริมาณโค้ดที่ต้องเขียนสำหรับการจัดการ DOM ที่น้อยลงอย่างมาก
4. Unit การทดสอบ พร้อมแล้ว – ทีมนักออกแบบที่ Google ไม่เพียงแต่พัฒนา AngularJS เท่านั้น แต่ยังพัฒนาเฟรมเวิร์กสำหรับการทดสอบที่เรียกว่า "Karma" ซึ่งช่วยในการออกแบบการทดสอบหน่วยสำหรับแอปพลิเคชัน AngularJS อีกด้วย
5. คำแนะนำ – เครื่องหมายต่างๆ เช่น ng-app, ng-model และ ng-repeat เพิ่มพฤติกรรมให้กับองค์ประกอบ HTML ทั่วไป

คุณสมบัติเหล่านี้จะเข้าใจได้ง่ายที่สุดเมื่อคุณได้ลองใช้งานแล้ว ดังนั้นในส่วนถัดไปจะสร้างหน้าเว็บที่ใช้งานได้จริงตั้งแต่เริ่มต้น

วิธีการตั้งค่า AngularJS และสร้างแอปพลิเคชันแรกของคุณ

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

ขั้นตอนที่ 1) เพิ่มไลบรารี AngularJS

โหลดไลบรารีจาก CDN ด้วยแท็กสคริปต์เพียงแท็กเดียว เวอร์ชัน 1.8.3 เป็นเวอร์ชันสุดท้ายของ AngularJS ดังนั้นควรตรึงหน้าเว็บของคุณไว้ที่เวอร์ชันนี้โดยเฉพาะ แทนที่จะใช้เวอร์ชันที่เปลี่ยนแปลงได้

ขั้นตอนที่ 2) ทำเครื่องหมายไดเร็กทอรีรากของแอปพลิเคชันด้วยคำสั่ง ng-app

คำสั่ง `ng-app` บอกคอมไพเลอร์ AngularJS ว่าส่วนใดของหน้าเว็บที่มันเป็นเจ้าของ การใส่คำสั่งนี้ไว้ในแท็ก `<html>` จะเป็นการมอบเอกสารทั้งหมดให้กับเฟรมเวิร์ก และค่าที่คุณใส่เข้าไปจะเป็นชื่อของโมดูลที่คุณกำลังจะสร้าง

ขั้นตอนที่ 3) ผูกข้อมูลกับ ng-model และนิพจน์

คำสั่ง ng-model จะผูกองค์ประกอบอินพุตเข้ากับคุณสมบัติในขอบเขต และนิพจน์วงเล็บปีกกาคู่จะพิมพ์คุณสมบัติเดียวกันนั้นในส่วนอื่นของหน้าเว็บ เนื่องจากการผูกข้อมูลเป็นแบบสองทาง typing ในกล่องข้อความ หัวข้อจะอัปเดตทันที โดยไม่ต้องใช้ตัวจัดการเหตุการณ์ของคุณเอง

ขั้นตอนที่ 4) เพิ่มตัวควบคุมสำหรับตรรกะ

ตัวควบคุมคืออุปกรณ์ธรรมดา Javaฟังก์ชันสคริปต์ที่รับอ็อบเจ็กต์ $scope และกำหนดค่าเริ่มต้นให้กับอ็อบเจ็กต์นั้น การลงทะเบียนฟังก์ชันนี้ในโมดูลจะทำให้สามารถใช้งานได้ในไดเร็กทีฟ ng-controller

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

ขั้นตอนที่ 5) เรียกใช้งานหน้าเว็บและตรวจสอบผลลัพธ์

บันทึกไฟล์เป็น index.html แล้วเปิดในเบราว์เซอร์ใดก็ได้ ส่วนหัวจะแสดงว่า “Hello World!” ในตอนแรก และจะเขียนใหม่ทุกครั้งที่กดแป้นพิมพ์ ไม่จำเป็นต้องใช้เว็บเซิร์ฟเวอร์หรือขั้นตอนการสร้างใดๆ

หากไม่มีอะไรปรากฏขึ้น ให้เปิดคอนโซลของเบราว์เซอร์และตรวจสอบว่าสคริปต์ CDN โหลดแล้ว และชื่อโมดูลภายใน ng-app ตรงกับชื่อที่ส่งไปยัง angular.module อย่างถูกต้อง เพราะหากไม่ตรงกันจะเกิดข้อผิดพลาดโดยไม่มีข้อความแจ้งเตือน หน้าเว็บขนาดเล็กนั้นแสดงให้เห็นถึงจุดแข็งที่อธิบายไว้ต่อไปนี้แล้ว

ข้อดีของ AngularJS

ข้อดีของ AngularJS มีดังนี้

• เนื่องจากเป็นเฟรมเวิร์กแบบโอเพนซอร์ส คุณจึงคาดหวังได้ว่าจะมีข้อผิดพลาดหรือปัญหาเกิดขึ้นน้อยมาก
• การผูกข้อมูลแบบสองทาง – AngularJS ช่วยให้เลเยอร์ข้อมูลและเลเยอร์การนำเสนอทำงานประสานกัน คุณไม่จำเป็นต้องเขียนโค้ดเพิ่มเติม Javaโค้ดสคริปต์ที่จะช่วยให้ข้อมูลในโค้ด HTML และเลเยอร์ข้อมูลของคุณตรงกัน AngularJS จะทำเช่นนี้ให้คุณโดยอัตโนมัติ คุณเพียงแค่ต้องระบุว่าคอนโทรลใดผูกกับส่วนใดของโมเดลของคุณ
• การกำหนดเส้นทาง (Routing) – AngularJS สามารถจัดการการกำหนดเส้นทางได้ ซึ่งหมายถึงการเปลี่ยนจากมุมมองหนึ่งไปยังอีกมุมมองหนึ่ง นี่คือหลักการพื้นฐานของแอปพลิเคชันหน้าเดียว (Single Page Application) ที่ช่วยให้คุณสามารถเปลี่ยนไปยังฟังก์ชันการทำงานต่างๆ ในเว็บแอปพลิเคชันของคุณได้ตามการโต้ตอบของผู้ใช้ แต่ยังคงอยู่บนหน้าเดียวกัน
• AngularJS รองรับการทดสอบทั้งสองแบบ การทดสอบหน่วยและ การทดสอบการผสานรวม.
• AngularJS ขยายขีดความสามารถของ HTML โดยการเพิ่มองค์ประกอบเฉพาะที่เรียกว่าไดเร็กทีฟ (directives) โดยทั่วไปแล้ว ไดเร็กทีฟคือเครื่องหมายบนองค์ประกอบ DOM (เช่น แอตทริบิวต์ ชื่อองค์ประกอบ และความคิดเห็น หรือคลาส CSS) ที่บอกให้คอมไพเลอร์ HTML ของ AngularJS เพิ่มพฤติกรรมที่กำหนดให้กับองค์ประกอบ DOM นั้น ไดเร็กทีฟเหล่านี้ช่วยขยายฟังก์ชันการทำงานขององค์ประกอบ HTML ที่มีอยู่ เพื่อเพิ่มประสิทธิภาพให้กับเว็บแอปพลิเคชันของคุณ

ข้อดีของ AngularJS

มุมมองที่สมดุลมีความสำคัญไม่แพ้กัน ดังนั้นจึงจะมีการกล่าวถึงข้อดีข้อเสียในลำดับต่อไป

ข้อเสียและข้อจำกัดของ AngularJS

ทุกเฟรมเวิร์กย่อมมีข้อเสีย และ AngularJS ก็เช่นกัน นี่คือข้อจำกัดที่ทีมพัฒนาแอปพลิเคชัน AngularJS รายงานบ่อยที่สุด:

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

ประเด็นสุดท้ายนี้เองที่ผลักดันให้ทีมส่วนใหญ่หันไปใช้เฟรมเวิร์กตัวใหม่ ซึ่งเป็นผลิตภัณฑ์ที่แตกต่างออกไป แม้จะมีชื่อเดียวกันก็ตาม

AngularJS กับ Angular ต่างกันอย่างไร?

AngularJS และ Angular มักถูกเข้าใจผิดกันบ่อยครั้งเนื่องจากชื่อคล้ายกันมาก แต่จริงๆ แล้วเป็นเฟรมเวิร์กที่แยกจากกัน มีภาษา สถาปัตยกรรม และเวอร์ชันที่แตกต่างกัน AngularJS หมายถึงเฉพาะเวอร์ชัน 1.x ที่อธิบายไว้ในหน้านี้เท่านั้น ส่วน Angular หมายถึงเวอร์ชัน 2 และทุกเวอร์ชันหลังจากนั้น ซึ่งเป็นการเขียนโค้ดใหม่ทั้งหมดที่เปิดตัวในปี 2016 และยังคงได้รับการพัฒนาอย่างต่อเนื่อง Code ไม่สามารถเคลื่อนย้ายระหว่างพื้นที่เหล่านั้นได้หากไม่มีการดำเนินการย้ายถิ่นฐานโดยเจตนา

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

คำถามที่พบบ่อย