โมดูล AngularJS

โมดูล AngularJS คืออะไร?

โมดูลกำหนดฟังก์ชันการทำงานของแอปพลิเคชันที่จะนำไปใช้กับหน้า HTML ทั้งหมดโดยใช้คำสั่ง ng-app โดยจะกำหนดฟังก์ชันการทำงานต่างๆ เช่น บริการ เป็นต้น สั่งและตัวกรอง ในลักษณะที่ทำให้สามารถนำไปใช้ซ้ำในแอปพลิเคชันต่างๆ ได้อย่างง่ายดาย

ภาพประกอบด้านบนสรุปขอบเขตดังกล่าวได้เป็นอย่างดี

ในทุก ๆ ครั้งก่อนหน้านี้ของเรา บทเรียนคุณคงสังเกตเห็นคำสั่ง ng-app ที่ใช้ในการกำหนดแอปพลิเคชัน Angular หลักของคุณ นี่เป็นหนึ่งในแนวคิดหลักของโมดูลใน AngularJS

⚠️ หมายเหตุเกี่ยวกับเวอร์ชัน: การสนับสนุน AngularJS สิ้นสุดลงในเดือนมกราคม 2022. ทันสมัย เชิงมุม ใช้ @NgModule และส่วนประกอบแบบสแตนด์อโลนเป็นค่าเริ่มต้น โค้ดด้านล่างเป็นโค้ดเก่า

วิธีสร้างโมดูลใน AngularJS

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

ลองสร้างไฟล์ชื่อ “DemoController.js” แล้วเพิ่มโค้ดด้านล่างลงในไฟล์นั้นดู

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

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

ในตัวควบคุมนี้ เราเพียงแค่ทำการบวกตัวแปร 2 ตัว คือ a และ b แล้วกำหนดผลบวกของตัวแปรเหล่านี้ให้กับตัวแปรใหม่ คือ c จากนั้นจึงกำหนดค่า 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;
                         });

มาดูความแตกต่างที่สำคัญในโค้ดที่เขียนด้านบนกัน

1. var sampleApp = angular.module('sampleApp',[]);

   เรากำลังสร้างโมดูล AngularJS ชื่อ 'sampleApp' โดยเฉพาะ สิ่งนี้จะสร้างขอบเขตตรรกะสำหรับฟังก์ชันการทำงานที่โมดูลนี้จะมี ในตัวอย่างข้างต้น เรามีโมดูลที่มีตัวควบคุมที่ทำหน้าที่เพิ่มวัตถุขอบเขต 2 รายการ ดังนั้นเราจึงสามารถมีหนึ่งโมดูลที่มีขอบเขตตรรกะซึ่งระบุว่าโมดูลนี้จะดำเนินการเฉพาะฟังก์ชันการคำนวณทางคณิตศาสตร์สำหรับแอปพลิเคชันเท่านั้น

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 AngularJSรูปแบบที่ใช้ในการพัฒนาping การพัฒนาเว็บแอปพลิเคชันในยุคปัจจุบันนั้นจำเป็นต้องสร้างโมดูลและตัวควบคุมหลายตัวเพื่อแยกฟังก์ชันการทำงานหลายระดับออกจากกันอย่างเป็นระบบ

โดยปกติโมดูลจะถูกจัดเก็บแยกกัน Javaต้นฉบับ ซึ่งจะแตกต่างจากไฟล์แอปพลิเคชันหลัก

ลองดูตัวอย่างว่าสิ่งนี้สามารถทำได้อย่างไร

ในตัวอย่างด้านล่าง

• เราจะสร้างไฟล์ชื่อ Utilities.js ซึ่งจะประกอบด้วย 2 โมดูล โมดูลหนึ่งทำหน้าที่เกี่ยวกับการบวก และอีกโมดูลหนึ่งทำหน้าที่เกี่ยวกับการลบtraction
• จากนั้นเราจะสร้างไฟล์แอปพลิเคชันแยกกัน 2 ไฟล์และเข้าถึงไฟล์ยูทิลิตี้จากไฟล์แอปพลิเคชันแต่ละไฟล์
• ในไฟล์แอปพลิเคชันหนึ่ง เราจะเข้าถึงโมดูลสำหรับการบวก และในอีกไฟล์หนึ่ง เราจะเข้าถึงโมดูลสำหรับการลบtraction

ขั้นตอน 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;
});

เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน

1.  var AdditionApp = angular.module('AdditionApp',[]);
    var SubractionApp = angular.module('SubtractionApp',[]);

   มีการสร้างโมดูล AngularJS แยกกัน 2 โมดูล โมดูลแรกชื่อว่า 'AdditionApp' และโมดูลที่สองชื่อว่า 'Sub'tractionApp'.

2. AdditionApp.controller('DemoAddController', function($scope)
   SubractionApp.controller('DemoSubtractController', function($scope)

   แต่ละโมดูลจะมีตัวควบคุมแยกกัน 2 ตัว ตัวหนึ่งชื่อ DemoAddController และอีกตัวชื่อ DemoSubtracตัวควบคุมแต่ละตัวมีตรรกะแยกต่างหากสำหรับการบวกและการลบtracลำดับของตัวเลข

ขั้นตอน 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>

เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน

1. <script src="/lib/Utilities.js"></script>

   เรากำลังอ้างอิงไฟล์ Utilities.js ของเราในไฟล์แอปพลิเคชันหลักของเรา สิ่งนี้ช่วยให้เราสามารถอ้างอิงโมดูล AngularJS ใด ๆ ที่กำหนดไว้ในไฟล์นี้

2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

   เรากำลังเข้าถึงโมดูล 'AdditionApp' และ DemoAddController โดยใช้คำสั่ง ng-app และ NG-คอนโทรลเลอร์ ตามลำดับ

3. {{c}}

   เนื่องจากเรากำลังอ้างอิงถึงโมดูลและคอนโทรลเลอร์ที่กล่าวมาข้างต้น เราจึงสามารถอ้างอิงตัวแปร $scope.c ผ่านนิพจน์ได้ นิพจน์จะเป็นผลมาจากการเพิ่มตัวแปรขอบเขต 2 ตัว a และ b ซึ่งดำเนินการในคอนโทรลเลอร์ 'DemoAddController'

   เราจะทำแบบเดียวกันสำหรับซับtracฟังก์ชัน tion

ขั้นตอน 3) สร้างไฟล์แอปพลิเคชันหลักของคุณ มาสร้างไฟล์ชื่อ “ApplicationSub” กันtracแก้ไขไฟล์ “tion.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>

เรามาสังเกตประเด็นสำคัญในโค้ดที่เขียนด้านบนกัน

1. <script src="/lib/Utilities.js"></script>

   เรากำลังอ้างอิงไฟล์ Utilities.js ของเราในไฟล์แอปพลิเคชันหลักของเรา สิ่งนี้ช่วยให้เราสามารถอ้างอิงโมดูลใด ๆ ที่กำหนดไว้ในไฟล์นี้

2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

   เรากำลังเข้าถึง 'Sub'tracโมดูล 'tionApp' และ DemoSubtractController โดยใช้คำสั่ง ng-app และ ng-controller ตามลำดับ

3. {{d}}

   เนื่องจากเราอ้างอิงถึงโมดูลและคอนโทรลเลอร์ที่กล่าวถึงข้างต้น เราจึงสามารถอ้างอิงถึงตัวแปร `$scope.d` ผ่านนิพจน์ได้ โดยนิพจน์นั้นจะเป็นผลลัพธ์จากซับรูทีนtracการกำหนดค่าตัวแปรขอบเขต 2 ตัว คือ a และ b ซึ่งดำเนินการใน 'DemoSub'tracตัวควบคุม' ตัวควบคุม

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