โมดูล AngularJS
โมดูล AngularJS คืออะไร?
โมดูลกำหนดฟังก์ชันการทำงานของแอปพลิเคชันที่ใช้กับหน้า HTML ทั้งหมดโดยใช้คำสั่ง ng-app โดยจะกำหนดฟังก์ชันการทำงาน เช่น บริการ คำสั่ง และตัวกรอง ในลักษณะที่ทำให้ง่ายต่อการนำกลับมาใช้ใหม่ในแอปพลิเคชันต่างๆ
ในบทช่วยสอนก่อนหน้านี้ทั้งหมด คุณคงสังเกตเห็นไดเร็กทิฟ ng-app ที่ใช้ในการกำหนดแอปพลิเคชัน Angular หลักของคุณ ซึ่งเป็นหนึ่งในแนวคิดหลักของโมดูลใน Angular.JS
วิธีสร้างโมดูลใน AngularJS
ก่อนที่เราจะเริ่มด้วยโมดูลคืออะไร เรามาดูตัวอย่างแอปพลิเคชัน AngularJS ที่ไม่มีโมดูลก่อน จากนั้นจึงทำความเข้าใจถึงความจำเป็นในการมีโมดูลในแอปพลิเคชันของคุณ
ลองพิจารณาสร้างไฟล์ชื่อ “DemoController.js” และเพิ่มโค้ดด้านล่างลงในไฟล์
Function Democontroller($scope) { $scope.a=1; $scope.b=2; $scope.c=$scope.b + $scope.a; });
ในโค้ดข้างต้น เราได้สร้างฟังก์ชันที่เรียกว่า “DemoController” ซึ่งจะทำหน้าที่เป็นตัวควบคุมภายในแอปพลิเคชันของเรา
ในคอนโทรลเลอร์นี้ เราเพียงดำเนินการเพิ่มตัวแปร a และ b 2 ตัว แล้วกำหนดการเพิ่มตัวแปรเหล่านี้ให้กับตัวแปรใหม่ c และกำหนดกลับให้กับอ็อบเจ็กต์ขอบเขต
ตอนนี้เรามาสร้าง Sample.html หลักของเราซึ่งจะเป็นแอปพลิเคชันหลักของเรา มาแทรกข้อมูลโค้ดด้านล่างนี้ในหน้า HTML ของเรา
<body ng-app=""> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
ในโค้ดด้านบน เราจะรวม DemoController ของเราไว้ จากนั้นเรียกใช้ค่าของตัวแปร $scope.c ผ่านนิพจน์
แต่สังเกตคำสั่ง ng-app ของเราว่ามันมีค่าว่างไว้
- โดยพื้นฐานแล้วหมายความว่าสามารถเข้าถึงคอนโทรลเลอร์ทั้งหมดที่ถูกเรียกภายในบริบทของคำสั่ง ng-app ได้ทั่วโลก ไม่มีขอบเขตที่แยกตัวควบคุมหลายตัวออกจากกัน
- ในการเขียนโปรแกรมยุคใหม่ ถือเป็นแนวทางปฏิบัติที่ไม่ดีที่จะไม่ต้องแนบคอนโทรลเลอร์เข้ากับโมดูลใดๆ และทำให้สามารถเข้าถึงได้ทั่วโลก จะต้องมีขอบเขตทางลอจิคัลที่กำหนดไว้สำหรับคอนโทรลเลอร์
และนี่คือที่มาของโมดูล โมดูลต่างๆ ถูกใช้เพื่อสร้างการแยกขอบเขตและช่วยในการแยกตัวควบคุมตามฟังก์ชันการทำงาน
มาเปลี่ยนโค้ดด้านบนเพื่อใช้งานโมดูลและแนบคอนโทรลเลอร์ของเราเข้ากับโมดูลนี้
var sampleApp = angular.module('sampleApp',[]); sampleApp.controller('DemoController', function($scope) { $scope.a=1; $scope.b=2; $scope.c=$scope.b + $scope.a; });
มาดูความแตกต่างที่สำคัญในโค้ดที่เขียนด้านบนกัน
-
var sampleApp = angular.module('sampleApp',[]);
เรากำลังสร้างโมดูล AngularJS ชื่อ 'sampleApp' โดยเฉพาะ สิ่งนี้จะสร้างขอบเขตตรรกะสำหรับฟังก์ชันการทำงานที่โมดูลนี้จะมี ในตัวอย่างข้างต้น เรามีโมดูลที่มีตัวควบคุมที่ทำหน้าที่เพิ่มวัตถุขอบเขต 2 รายการ ดังนั้นเราจึงสามารถมีหนึ่งโมดูลที่มีขอบเขตตรรกะซึ่งระบุว่าโมดูลนี้จะดำเนินการเฉพาะฟังก์ชันการคำนวณทางคณิตศาสตร์สำหรับแอปพลิเคชันเท่านั้น
-
sampleApp.controller('DemoController', function($scope)
ขณะนี้เรากำลังแนบคอนโทรลเลอร์เข้ากับโมดูล AngularJS ของเรา “SampleApp” ซึ่งหมายความว่าหากเราไม่อ้างอิงโมดูล 'sampleApp' ในโค้ด HTML หลักของเรา เราจะไม่สามารถอ้างอิงฟังก์ชันการทำงานของคอนโทรลเลอร์ของเราได้
โค้ด HTML หลักของเราจะไม่มีลักษณะดังที่แสดงด้านล่าง
<body ng-app="'sampleApp'"> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
เรามาสังเกตความแตกต่างที่สำคัญในโค้ดที่เขียนด้านบนและโค้ดก่อนหน้าของเรา
<body ng-app="'sampleApp'">
ในแท็กร่างกายของเรา
- แทนที่จะมีคำสั่ง ng-app ที่ว่างเปล่า เรากำลังเรียกโมดูล SampleApp
- ด้วยการเรียกโมดูลแอปพลิเคชันนี้ ขณะนี้เราสามารถเข้าถึงคอนโทรลเลอร์ 'DemoController' และฟังก์ชันการทำงานที่มีอยู่ในคอนโทรลเลอร์สาธิตได้
โมดูลและตัวควบคุมใน AngularJS
In เชิงมุม.JSรูปแบบที่ใช้ในการพัฒนาเว็บแอปพลิเคชันยุคใหม่คือการสร้างโมดูลและตัวควบคุมหลายตัวเพื่อแยกฟังก์ชันการทำงานหลายระดับอย่างมีเหตุผล
โดยปกติโมดูลจะถูกจัดเก็บแยกกัน Javascript ซึ่งจะแตกต่างจากไฟล์แอปพลิเคชันหลัก
ลองดูตัวอย่างว่าสิ่งนี้สามารถทำได้อย่างไร
ในตัวอย่างด้านล่าง
- เราจะสร้างไฟล์ชื่อ Utilities.js ซึ่งจะเก็บ 2 โมดูล หนึ่งโมดูลสำหรับดำเนินการฟังก์ชันการบวก และอีกโมดูลสำหรับดำเนินการฟังก์ชันการลบ
- จากนั้นเราจะสร้างไฟล์แอปพลิเคชันแยกกัน 2 ไฟล์และเข้าถึงไฟล์ยูทิลิตี้จากไฟล์แอปพลิเคชันแต่ละไฟล์
- ในไฟล์แอปพลิเคชันหนึ่ง เราจะเข้าถึงโมดูลสำหรับการบวก และในอีกไฟล์หนึ่ง เราจะเข้าถึงโมดูลสำหรับการลบ
ขั้นตอน 1) กำหนดรหัสสำหรับหลายโมดูลและคอนโทรลเลอร์
var AdditionApp = angular.module('AdditionApp',[]); AdditionApp.controller('DemoAddController', function($scope) { $scope.a=5; $scope.b=6; $scope.c=$scope.a + $scope.b; }); var SubractionApp = angular.module('SubtractionApp',[]); SubractionApp.controller('DemoSubtractController', function($scope) { $scope.a=8; $scope.b=6; $scope.d=$scope.a - $scope.b; });
เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน
-
var AdditionApp = angular.module('AdditionApp',[]); var SubractionApp = angular.module('SubtractionApp',[]);
มีการสร้างโมดูลเชิงมุมแยกกัน 2 โมดูล โมดูลแรกชื่อ 'AdditionApp' และโมดูลที่สองชื่อ 'SubtractionApp'
-
AdditionApp.controller('DemoAddController', function($scope) SubractionApp.controller('DemoSubtractController', function($scope)
มีการกำหนดตัวควบคุมแยกกัน 2 ตัวสำหรับแต่ละโมดูล โดยตัวหนึ่งเรียกว่า DemoAddController และอีกตัวหนึ่งเรียกว่า DemoSubtractController ตัวควบคุมแต่ละตัวมีตรรกะแยกกันสำหรับการบวกและลบตัวเลข
ขั้นตอน 2) สร้างไฟล์แอปพลิเคชันหลักของคุณ มาสร้างไฟล์ชื่อ ApplicationAddition.html และเพิ่มโค้ดด้านล่างนี้
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "AdditionApp" ng-controller="DemoAddController"> Addition :{{c}} </div> </body> </html>
เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน
-
<script src="/lib/Utilities.js"></script>
เรากำลังอ้างอิงไฟล์ Utilities.js ของเราในไฟล์แอปพลิเคชันหลักของเรา สิ่งนี้ช่วยให้เราสามารถอ้างอิงโมดูล AngularJS ใด ๆ ที่กำหนดไว้ในไฟล์นี้
-
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
เรากำลังเข้าถึงโมดูล 'AdditionApp' และ DemoAddController โดยใช้คำสั่ง ng-app และ NG-คอนโทรลเลอร์ ตามลำดับ
-
{{c}}
เนื่องจากเรากำลังอ้างอิงถึงโมดูลและคอนโทรลเลอร์ที่กล่าวมาข้างต้น เราจึงสามารถอ้างอิงตัวแปร $scope.c ผ่านนิพจน์ได้ นิพจน์จะเป็นผลมาจากการเพิ่มตัวแปรขอบเขต 2 ตัว a และ b ซึ่งดำเนินการในคอนโทรลเลอร์ 'DemoAddController'
แบบเดียวกับที่เราจะทำกับฟังก์ชันการลบ
ขั้นตอน 3) สร้างไฟล์แอปพลิเคชันหลักของคุณ มาสร้างไฟล์ชื่อ “ApplicationSubtraction.html” และเพิ่มโค้ดด้านล่างนี้
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "SubtractionApp" ng-controller="DemoSubtractController"> Subtraction :{{d}} </div> </body> </html>
เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน
-
<script src="/lib/Utilities.js"></script>
เรากำลังอ้างอิงไฟล์ Utilities.js ของเราในไฟล์แอปพลิเคชันหลักของเรา สิ่งนี้ช่วยให้เราสามารถอ้างอิงโมดูลใด ๆ ที่กำหนดไว้ในไฟล์นี้
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
เรากำลังเข้าถึง 'โมดูล SubtractionApp และ DemoSubtractController โดยใช้คำสั่ง ng-app และ ng-controller ตามลำดับ
-
{{d}}
เนื่องจากเรากำลังอ้างอิงถึงโมดูลและคอนโทรลเลอร์ที่กล่าวมาข้างต้น เราจึงสามารถอ้างอิงตัวแปร $scope.d ผ่านนิพจน์ได้ นิพจน์จะเป็นผลมาจากการลบตัวแปรขอบเขต 2 ตัว a และ b ซึ่งดำเนินการใน 'ตัวควบคุมการลบการสาธิต' ตัวควบคุม
สรุป
- หากไม่มีการใช้โมดูล AngularJS ตัวควบคุมจะเริ่มมีขอบเขตทั่วโลกซึ่งนำไปสู่แนวทางปฏิบัติในการเขียนโปรแกรมที่ไม่ดี
- โมดูลถูกใช้เพื่อแยกตรรกะทางธุรกิจ สามารถสร้างหลายโมดูลเพื่อให้แยกกันแบบลอจิคัลภายในโมดูลต่างๆ เหล่านี้ได้
- แต่ละโมดูล AngularJS สามารถมีชุดคอนโทรลเลอร์ของตัวเองที่กำหนดและกำหนดให้กับมันได้
- เมื่อกำหนดโมดูลและคอนโทรลเลอร์ โดยปกติแล้วจะกำหนดแยกกัน Javaต้นฉบับ ไฟล์. เหล่านี้ Javaจากนั้นไฟล์สคริปต์จะถูกอ้างอิงในไฟล์แอปพลิเคชันหลัก