โมดูล 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;
                         });

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

  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 เชิงมุม.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;
});

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

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

    มีการสร้างโมดูลเชิงมุมแยกกัน 2 โมดูล โมดูลแรกชื่อ 'AdditionApp' และโมดูลที่สองชื่อ 'SubtractionApp'

  2. 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>

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

  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'

    แบบเดียวกับที่เราจะทำกับฟังก์ชันการลบ

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

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

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

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

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

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

  3. {{d}}

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

สรุป

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

จดหมายข่าว Guru99 รายวัน

เริ่มต้นวันใหม่ของคุณด้วยข่าวสาร AI ล่าสุดและสำคัญที่สุดที่ส่งมอบทันที