AngularJS-moduler

Hvad er et AngularJS-modul?

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

I alle vores tidligere tutorials ville du have bemærket ng-app-direktivet, der blev brugt til at definere din vigtigste Angular-applikation. Dette er et af nøglebegreberne for moduler i Angular.JS.

Sådan opretter du et modul i AngularJS

Før vi starter med, hvad der er et modul, lad os se på et eksempel på en 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 tilføjelsen af 2 variable a og b og tildeler tilføjelsen af disse variable til en ny variabel, c, og tildeler den tilbage til scope-objektet.

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

```
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.
```
sampleApp.controller('DemoController', function($scope)
```
Vi tilslutter 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.

Vores primære HTML-kode vil ikke 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 Angular.JS, er det mønster, der bruges til at udvikle moderne webapplikationer, at skabe flere moduler og controllere for logisk at adskille flere funktionsniveauer.

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 vil oprette en fil kaldet Utilities.js, som vil indeholde 2 moduler, et til at udføre funktionaliteten af addition og det andet til at udføre funktionaliteten af subtraktion.
Vi vil derefter oprette 2 separate applikationsfiler og få adgang til Utility-filen fra hver applikationsfil.
I den ene ansøgningsfil får vi adgang til modulet til addition, og i den anden får vi adgang til modulet til subtraktion.

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

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
Der er oprettet 2 separate Angular Module, det ene som får navnet 'AdditionApp' og det andet får navnet 'SubtractionApp'.
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Der er 2 separate controllere defineret for hvert modul, den ene kaldes DemoAddController og den anden er DemoSubtractController. Hver controller har separat logik til addition og subtraktion 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

```
<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.
```
<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.
```
{{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 subtraktionsfunktion.

Trin 3) Opret dine vigtigste applikationsfiler. Lad os oprette en fil kaldet "ApplicationSubtraction.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 = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

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

```
<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.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Vi får adgang til 'SubtractionApp-modulet og DemoSubtractController ved at bruge henholdsvis ng-app-direktivet og ng-controlleren.
```
{{d}}
```
Da vi refererer til ovennævnte modul og controller, er vi i stand til at referere til $scope.d-variablen via et udtryk. Udtrykket vil være resultatet af subtraktionen af de 2 omfangsvariable a og b, som blev udført i 'DemoSubtractController' controller

Resumé

Uden brug af AngularJS-moduler begynder controllere at have et globalt omfang, hvilket fører til dårlig programmeringspraksis.
Moduler bruges til at adskille forretningslogik. Flere moduler kan oprettes for at være logisk adskilte inden for disse forskellige moduler.
Hvert AngularJS-modul kan have sit eget sæt af controllere defineret og tildelt det.
Når moduler og regulatorer defineres, er de normalt defineret separat JavaScript filer. Disse JavaDer henvises derefter til scriptfiler i hovedapplikationsfilen.

AngularJS-moduler

Hvad er et AngularJS-modul?

Sådan opretter du et modul i AngularJS

Moduler og controllere i AngularJS

Resumé

Opsummer dette indlæg med:

Tilmeld dig nyhedsbrevet