AngularJS-moduler

Hvad er et AngularJS-modul?

Et modul definerer den applikationsfunktionalitet, der anvendes på hele HTML-siden ved hjælp af ng-app-direktivet. Det definerer funktionalitet, såsom tjenester, direktiverog filtre, på en måde der gør det nemt at genbruge det i forskellige applikationer.

Illustrationen ovenfor opsummerer denne grænse.

I alle vores tidligere tutorials, har du sikkert bemærket ng-app-direktivet, der bruges til at definere din primære Angular-applikation. Dette er et af nøglekoncepterne i moduler i AngularJS.

⚠️ Versionsnotat: AngularJS-support ophørte i januar 2022. Moderne Vinkelforskydning bruger @NgModule, og standardkoden er separate komponenter. Koden nedenfor er historisk.

Sådan opretter du et modul i AngularJS

Før vi starter med, hvad et modul er, lad os se på et eksempel på et AngularJS-applikation uden et modul og derefter forstå behovet for at have moduler i din applikation.

Lad os overveje at oprette en fil kaldet “DemoController.js” og tilføje nedenstående kode til filen.

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

I ovenstående kode har vi oprettet en funktion kaldet "DemoController", som skal fungere som en controller i vores applikation.

I denne controller udfører vi blot additionen af ​​2 variabler a og b og tildeler additionen af ​​disse variabler til en ny variabel, c, og tildeler den tilbage til rækkevidde objekt.

Lad os nu oprette vores hoved Sample.html, som vil være vores hovedapplikation. Lad os indsætte nedenstående kodestykke på vores HTML-side.

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

I koden ovenfor inkluderer vi vores DemoController og kalder derefter værdien af ​​$scope.c variablen via et udtryk.

Men bemærk vores ng-app-direktiv, det har en tom værdi.

• Dette betyder i bund og grund, at alle controllere, der kaldes inden for rammerne af ng-app-direktivet, kan tilgås globalt. Der er ingen grænse, der adskiller flere controllere fra hinanden.
• Nu i moderne programmering er det en dårlig praksis at have controllere, der ikke er knyttet til nogen moduler og gøre dem globalt tilgængelige. Der skal være en logisk grænse defineret for controllere.

Og det er her, moduler kommer ind. Moduler bruges til at skabe den adskillelse af grænser og hjælpe med at adskille controllere baseret på funktionalitet.

Lad os ændre koden ovenfor for at implementere moduler og knytte vores controller til dette modul

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

Lad os bemærke de vigtigste forskelle i koden skrevet ovenfor

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

   Vi laver specifikt et AngularJS-modul kaldet 'sampleApp'. Dette vil danne en logisk grænse for den funktionalitet, som dette modul vil indeholde. Så i vores ovenstående eksempel har vi et modul, som indeholder en controller, der udfører rollen som tilføjelse af 2 scope-objekter. Derfor kan vi have et modul med en logisk grænse, som siger, at dette modul kun vil udføre funktionaliteten af ​​matematiske beregninger for applikationen.

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

   Vi knytter nu controlleren til vores AngularJS-modul "sampleApp". Det betyder, at hvis vi ikke refererer til modulet 'sampleApp' i vores primære HTML-kode, vil vi ikke være i stand til at referere til funktionaliteten af ​​vores controller.

Setter versus getter: kantet.modul opretter kun et modul, når afhængighed array sendes; uden det henter kaldet et eksisterende modul.

Vores primære HTML-kode vil nu se ud som vist nedenfor

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

Lad os bemærke de vigtigste forskelle i koden skrevet ovenfor og vores tidligere kode

<body ng-app="sampleApp">

I vores kropsmærke,

• I stedet for at have et tomt ng-app-direktiv, kalder vi nu modulet sampleApp.
• Ved at kalde dette applikationsmodul kan vi nu få adgang til controlleren 'DemoController' og den funktionalitet, der findes i democontrolleren.

Moduler og controllere i AngularJS

In AngularJS, mønsteret der bruges til udviklingping Moderne webapplikationer handler om at oprette flere moduler og controllere for logisk at adskille flere funktionalitetsniveauer.

Normalt vil moduler blive gemt separat JavaScript filer, som ville være anderledes end hovedapplikationsfilen.

Lad os se på et eksempel på, hvordan dette kan opnås.

I eksemplet nedenfor,

• Vi opretter en fil kaldet Utilities.js, som indeholder 2 moduler, et til at udføre additionsfunktionaliteten og det andet til at udføre subfunktionaliteten.traction.
• Vi vil derefter oprette 2 separate applikationsfiler og få adgang til Utility-filen fra hver applikationsfil.
• I den ene applikationsfil tilgår vi modulet for addition, og i den anden tilgår vi modulet for sub.traction.

Trin 1) Definer koden for de flere moduler og controllere.

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

Lad os bemærke de vigtigste punkter i koden skrevet ovenfor

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

   Der er oprettet 2 separate AngularJS-moduler, det ene har fået navnet 'AdditionApp' og det andet har fået navnet 'Sub'.tractionApp'.

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

   Der er defineret 2 separate controllere for hvert modul, den ene kaldes DemoAddController og den anden er DemoSub.tractController. Hver controller har separat logik til addition og subtraction af tal.

Trin 2) Opret dine vigtigste applikationsfiler. Lad os oprette en fil kaldet ApplicationAddition.html og tilføje nedenstående kode

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

Lad os bemærke de vigtigste punkter i koden skrevet ovenfor

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

   Vi henviser til vores Utilities.js-fil i vores hovedapplikationsfil. Dette giver os mulighed for at referere til alle AngularJS-moduler, der er defineret i denne fil.

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

   Vi får adgang til 'AdditionApp'-modulet og DemoAddController ved at bruge ng-app-direktivet og ng-controller henholdsvis.

3. {{c}}

   Da vi refererer til ovennævnte modul og controller, er vi i stand til at referere til $scope.c-variablen via et udtryk. Udtrykket vil være resultatet af tilføjelsen af ​​de 2 omfangsvariabler a og b, som blev udført i 'DemoAddController'-controlleren

   På samme måde vil vi gøre for subtractionsfunktion.

Trin 3) Opret dine primære programfiler. Lad os oprette en fil kaldet "ApplicationSubtraction.html” og tilføj nedenstående kode

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

Lad os bemærke de vigtigste punkter i koden skrevet ovenfor

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

   Vi henviser til vores Utilities.js-fil i vores hovedapplikationsfil. Dette giver os mulighed for at referere til alle moduler, der er defineret i denne fil.

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

   Vi tilgår 'Sub'tractionApp'-modul og DemoSubtractController ved hjælp af henholdsvis ng-app-direktivet og ng-controller.

3. {{d}}

   Da vi refererer til ovennævnte modul og controller, kan vi referere til $scope.d-variablen via et udtryk. Udtrykket vil være resultatet af sub-udtrykket.traction af de 2 omfangsvariabler a og b, som blev udført i 'DemoSub'tracController' Controller

Ofte Stillede Spørgsmål