AngularJS moodulid

Mis on AngularJS moodul?

Moodul määratleb rakenduse funktsioonid, mida rakendatakse ng-app direktiivi abil kogu HTML-lehele. See määratleb funktsioonid, nagu teenused, direktiivid ja filtrid, nii, et seda on lihtne erinevates rakendustes uuesti kasutada.

Kõigis meie varasemates õpetustes oleksite märganud ng-app direktiivi, mida kasutati teie peamise Angular-rakenduse määratlemiseks. See on üks Angular.JS-i moodulite põhikontseptsioone.

Kuidas AngularJS-is moodulit luua

Enne kui alustame mooduliga, vaatame näidet ilma moodulita AngularJS-i rakendusest ja mõistame seejärel, et teie rakenduses on mooduleid.

Kaaluge faili nimega "DemoController.js" ja lisades failile alloleva koodi

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

Ülaltoodud koodis oleme loonud funktsiooni "DemoController", mis hakkab toimima meie rakenduses kontrollerina.

Selles kontrolleris lisame lihtsalt 2 muutujat a ja b ning määrame nende muutujate lisamise uuele muutujale c ja määrame selle tagasi ulatuse objektile.

Nüüd loome oma peamise Sample.html-i, millest saab meie peamine rakendus. Sisestame alloleva koodilõigu oma HTML-lehele.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

Ülaltoodud koodi kaasame oma DemoControlleri ja kutsume seejärel avaldise kaudu välja muutuja $scope.c väärtuse.

Kuid pange tähele meie ng-app direktiivi, sellel on tühi väärtus.

  • See tähendab põhimõtteliselt, et kõikidele kontrolleritele, mida ng-app direktiivi kontekstis kutsutakse, on juurdepääs globaalselt. Puudub piir, mis eraldaks mitu kontrollerit üksteisest.
  • Kaasaegses programmeerimises on see halb tava, et kontrollereid ei ole ühendatud ühegi mooduli külge ja muudab need ülemaailmselt juurdepääsetavaks. Kontrollerite jaoks peab olema defineeritud mingi loogiline piir.

Ja siin tulevadki sisse moodulid. Moodulid kasutatakse piiride eraldamiseks ja abistavad kontrollerite eraldamisel funktsionaalsuse alusel.

Muudame ülaltoodud koodi moodulite juurutamiseks ja ühendame oma kontrolleri selle mooduliga

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

Märgime peamisi erinevusi ülalkirjeldatud koodis

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

    Loome spetsiaalselt AngularJS-i moodulit nimega "sampleApp". See loob loogilise piiri selle mooduli funktsioonidele. Nii et meie ülaltoodud näites on meil moodul, mis sisaldab kontrollerit, mis täidab 2 ulatuseobjekti lisamise rolli. Seega võib meil olla üks moodul, millel on loogiline piir, mis ütleb, et see moodul täidab ainult rakenduse matemaatiliste arvutuste funktsioone.

  2. sampleApp.controller('DemoController', function($scope)

    Nüüd ühendame kontrolleri meie AngularJS-i mooduli "SampleApp" külge. See tähendab, et kui me oma põhilises HTML-koodis moodulile „sampleApp” ei viita, ei saa me oma kontrolleri funktsionaalsusele viidata.

Meie peamine HTML-kood ei näe välja selline, nagu allpool näidatud

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Märgime üles peamised erinevused ülalkirjeldatud koodis ja meie eelmises koodis

<body ng-app="'sampleApp'">

Meie kehasildis

  • Tühja ng-rakenduse direktiivi asemel kutsume nüüd moodulit proovirakenduseks.
  • Sellele rakendusmoodulile helistades pääseme nüüd juurde kontrollerile "DemoController" ja demokontrolleri funktsioonidele.

AngularJS-i moodulid ja kontrollerid

In Nurk.JS, tänapäeva veebirakenduste arendamiseks kasutatav muster on mitme mooduli ja kontrollerite loomine, et loogiliselt eraldada mitu funktsionaalsustaset.

Tavaliselt hoitakse mooduleid eraldi Javascript failid, mis erineksid põhirakenduse failist.

Vaatame näidet, kuidas seda on võimalik saavutada.

Allolevas näites

  • Loome faili nimega Utilities.js, mis sisaldab 2 moodulit, millest üks on liitmise ja teine ​​lahutamise funktsiooni jaoks.
  • Seejärel loome 2 eraldi rakendusfaili ja pääseme igast rakendusefailist juurde utiliidifailile.
  • Ühes rakendusefailis pääseme juurde liitmise moodulile, teises aga lahutamise moodulile.

Step 1) Määratlege mitme mooduli ja kontrolleri kood.

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;
});

Märgime ülal kirjutatud koodi põhipunktid

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

    Loodud on 2 eraldiseisvat nurgamoodulit, millest ühele antakse nimi AdditionApp ja teisele nimi on SubtractionApp.

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

    Iga mooduli jaoks on määratletud 2 eraldi kontrollerit, üks on DemoAddController ja teine ​​on DemoSubtractController. Igal kontrolleril on arvude liitmiseks ja lahutamiseks eraldi loogika.

Step 2) Looge oma peamised rakendusfailid. Loome faili nimega ApplicationAddition.html ja lisame alloleva koodi

<!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>

Märgime ülal kirjutatud koodi põhipunktid

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

    Viitame oma põhirakenduse failis olevale failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud AngularJS-i moodulitele.

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

    Me pääseme juurde moodulile AdditionApp ja DemoAddControllerile, kasutades ng-app direktiivi ja ng-kontroller võrra.

  3. {{c}}

    Kuna me viitame ülalmainitud moodulile ja kontrollerile, saame avaldise kaudu viidata muutujale $scope.c. Avaldis on 2 ulatuse muutuja a ja b lisamise tulemus, mis viidi läbi kontrolleris 'DemoAddController'

    Samamoodi teeme lahutamisfunktsiooni puhul.

Step 3) Looge oma peamised rakendusfailid. Loome faili nimega “ApplicationSubtraction.html” ja lisame alloleva koodi

<!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>

Märgime ülal kirjutatud koodi põhipunktid

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

    Viitame oma põhirakenduse failis olevale failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud moodulitele.

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

    Me pääseme juurde moodulile SubtractionApp ja DemoSubtractControllerile, kasutades vastavalt ng-app direktiivi ja ng-kontrollerit.

  3. {{d}}

    Kuna me viitame ülalmainitud moodulile ja kontrollerile, saame avaldise kaudu viidata muutujale $scope.d. Avaldis on kahe ulatuse muutuja a ja b lahutamise tulemus, mis viidi läbi 'DemoSubtractController' kontroller

kokkuvõte

  • Ilma AngularJS-i mooduleid kasutamata hakkab kontrolleritel olema ülemaailmne ulatus, mis viib halbade programmeerimistavadeni.
  • Moodulid kasutatakse äriloogika eraldamiseks. Nende erinevate moodulite sees loogiliselt eraldamiseks saab luua mitu moodulit.
  • Igal AngularJS-moodulil võib olla oma kontrollerite komplekt, mis on määratletud ja sellele määratud.
  • Moodulite ja kontrollerite määratlemisel määratletakse need tavaliselt eraldi JavaScript failid. Need JavaSeejärel viidatakse skriptifailidele põhirakenduse failis.