- การสร้างโมดูล AngularJS
- การกำหนดค่า (Configuring) โมดูล AngularJS
- การใช้โมดูล AngularJS
- ตัวควบคุม (Controllers) บริการ (Services) และคำสั่ง (Directives) ในโมดูล AngularJS
AngularJS ซึ่งเป็นเฟรมเวิร์กการทำเว็บทำแอพส่วนหน้า (front-end web application framework) แบบโอเพ่นซอร์สยอดนิยม ให้รากฐานที่แข็งแกร่งสำหรับการการทำเว็บทำแอพหน้าเดียว (SPA) แบบไดนามิกและซับซ้อน การเรียนรู้ความซับซ้อนของการทำเว็บ AngularJS เช่น โมดูล เป็นขั้นตอนสำคัญในการควบคุมศักยภาพอย่างเต็มที่ สำหรับผู้เริ่มต้นทำเว็บ Angular การทำความเข้าใจโมดูลเป็นจุดเริ่มต้นที่สมบูรณ์แบบ
แอปพลิเคชัน AngularJS นั้นเป็นชุดของโมดูล ในฐานะที่เป็นคอนเทนเนอร์สำหรับส่วนต่าง ๆ ของแอปของคุณ โมดูลมีบทบาทสำคัญในการสรุปโค้ดและจัดระเบียบโครงสร้างแอปพลิเคชัน โดยทั่วไปแล้ว แอปพลิเคชัน AngularJS ที่มีโครงสร้างดีจะประกอบด้วยโมดูลจำนวนมาก แต่ละโมดูลมีฟังก์ชันการทำงานเฉพาะ โมดูลจะแบ่งแอปพลิเคชันออกเป็นส่วนๆ อิสระที่สามารถจัดการได้ จึงทำให้สามารถใช้โค้ดซ้ำและบำรุงรักษาได้ดีขึ้น
ก่อนที่เราจะดำเนินการต่อ สิ่งสำคัญคือต้องทราบว่าโมดูล AngularJS นั้นค่อนข้างแตกต่างจากโมดูล JavaScript ES6 หรือโมดูล Node.js โมดูล AngularJS สรุปการกำหนดค่า บริการ ตัวกรอง คำสั่ง ตัวควบคุม และแม้แต่โมดูลอื่นๆ ในขณะที่โมดูล JavaScript ES6 และ Node.js จัดการกับฟังก์ชันการห่อหุ้มและการส่งออก ออบเจกต์ หรือค่าดั้งเดิมเป็นหลัก
1. การสร้างโมดูล AngularJS
การสร้างโมดูลใน AngularJS นั้นตรงไปตรงมา วิธีการโมดูลบนวัตถุเชิงมุมใช้เพื่อสร้างโมดูล โมดูลถูกสร้างขึ้นโดยการระบุชื่อและรายการของโมดูลที่ขึ้นอยู่
นี่คือตัวอย่างง่ายๆ:
var app = angular.module('myApp', []);ในตัวอย่างนี้ ‘myApp’ คือชื่อของโมดูลของเรา และพารามิเตอร์ที่สองคืออาร์เรย์ของการขึ้นต่อกัน ซึ่งในกรณีนี้จะว่างเปล่า โมดูลง่ายๆ นี้สามารถเป็นจุดเริ่มต้นสำหรับการทำเว็บทำแอพด้วย Angular หรือสร้าง SPA ที่มีประสิทธิภาพ
2. การกำหนดค่า (Configuring) โมดูล AngularJS
หลังจากสร้างโมดูลแล้ว คุณสามารถกำหนดค่าโดยใช้เมธอด ‘config’ วิธีนี้ยอมรับฟังก์ชันที่แทรกด้วยบริการ ‘ผู้ให้บริการ’ และ ‘คงที่’ นี่คือตัวอย่าง:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/'
});
});ในตัวอย่างข้างต้น บริการ ‘$routeProvider’ ใช้เพื่อกำหนดค่าเส้นทางสำหรับการทำแอพ ฟังก์ชัน ‘config’ สามารถเรียกใช้งานได้หลายครั้งเท่าที่จำเป็น
3. การใช้โมดูล AngularJS
โมดูลจะมีประโยชน์เมื่อใช้เพื่อห่อหุ้มส่วนต่าง ๆ ของแอปพลิเคชัน ตัวอย่างเช่น สามารถใช้โมดูลเพื่อสรุปบริการทั้งหมดที่เกี่ยวข้องกับการจัดการผู้ใช้ อีกโมดูลหนึ่งสำหรับทุกอย่างที่เกี่ยวข้องกับการจัดการผลิตภัณฑ์ และอื่นๆ ด้วยการสรุปฟังก์ชันการทำงานที่เกี่ยวข้องภายในโมดูล เราอำนวยความสะดวกในการใช้โค้ดซ้ำ การบำรุงรักษา และการแยกข้อกังวล
หากต้องการใช้โมดูลในโมดูลอื่น คุณเพียงแค่เพิ่มเป็นการอ้างอิงดังนี้:
var app = angular.module('myApp', ['userManagement', 'productManagement']);4. ตัวควบคุม (Controllers) บริการ (Services) และคำสั่ง (Directives) ในโมดูล AngularJS
โมดูล AngularJS ยังเป็นที่ที่คุณกำหนดส่วนสำคัญอื่นๆ ของแอปพลิเคชัน AngularJS เช่น ตัวควบคุม บริการ และคำสั่ง นี่คือตัวอย่างการสร้างคอนโทรลเลอร์ในโมดูล AngularJS:
app.controller('MyController', function($scope) {
$scope.message = 'Hello, World!';
});ในแนวทางเดียวกัน สามารถกำหนดบริการและคำสั่งในโมดูลได้ เมื่อกำหนดแล้ว ตัวควบคุม บริการ และคำสั่งเหล่านี้จะกลายเป็นส่วนหนึ่งของโมดูล และสามารถใช้ในส่วนใดก็ได้ของแอปพลิเคชันที่โมดูลถูกแทรกเป็นการพึ่งพา
โมดูล AngularJS เป็นวิธีที่มีประสิทธิภาพในการจัดโครงการทำแอพของคุณ ซึ่งช่วยให้คุณสามารถสรุปฟังก์ชันการทำงานที่เกี่ยวข้องได้ จึงทำให้โค้ดของคุณจัดการ ทดสอบ และนำมาใช้ซ้ำได้ง่ายขึ้น ไม่ว่าคุณกำลังทำเว็บทำแอพด้วย Angular หรือทำเว็บทำแอพหน้าเดียวที่ซับซ้อนมากขึ้น