AngularJS-moduler

Hva er en AngularJS-modul?

En modul definerer applikasjonsfunksjonaliteten som brukes på hele HTML-siden ved å bruke ng-app-direktivet. Den definerer funksjonalitet, som tjenester, direktiver og filtre, på en måte som gjør det enkelt å gjenbruke det i forskjellige applikasjoner.

I alle våre tidligere opplæringsprogrammer ville du ha lagt merke til ng-app-direktivet som ble brukt til å definere hovedapplikasjonen din. Dette er et av nøkkelbegrepene til moduler i Angular.JS.

Hvordan lage en modul i AngularJS

Før vi starter med hva som er en modul, la oss se på et eksempel på en AngularJS-applikasjon uten modul og deretter forstå behovet for å ha moduler i applikasjonen din.

La oss vurdere å lage en fil som heter «DemoController.js» og legge til koden nedenfor i filen

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

I koden ovenfor har vi laget en funksjon kalt "DemoController" som skal fungere som en kontroller i applikasjonen vår.

I denne kontrolleren utfører vi bare tillegg av 2 variabler a og b og tildeler tillegget av disse variablene til en ny variabel, c, og tilordner den tilbake til scope-objektet.

La oss nå lage vår hoved Sample.html, som vil være vår hovedapplikasjon. La oss sette inn kodebiten nedenfor i HTML-siden vår.

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

I koden ovenfor inkluderer vi vår DemoController og påkaller deretter verdien til $scope.c-variabelen via et uttrykk.

Men legg merke til vårt ng-app-direktiv, det har en tom verdi.

Dette betyr i utgangspunktet at alle kontrollere som kalles innenfor rammen av ng-app-direktivet kan nås globalt. Det er ingen grense som skiller flere kontrollere fra hverandre.
Nå i moderne programmering er dette en dårlig praksis å ha kontrollere som ikke er koblet til noen moduler og gjøre dem globalt tilgjengelige. Det må være en logisk grense definert for kontrollere.

Og det er her moduler kommer inn. Moduler brukes til å skape atskillelse av grenser og hjelpe til med å skille kontrollere basert på funksjonalitet.

La oss endre koden ovenfor for å implementere moduler og koble kontrolleren vår til denne modulen

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

La oss merke de viktigste forskjellene i koden skrevet ovenfor

```
var sampleApp = angular.module('sampleApp',[]);
```
Vi lager spesifikt en AngularJS-modul kalt 'sampleApp'. Dette vil danne en logisk grense for funksjonaliteten som denne modulen skal inneholde. Så i eksemplet ovenfor har vi en modul som inneholder en kontroller som utfører rollen som tillegg av 2 scope-objekter. Derfor kan vi ha en modul med en logisk grense som sier at denne modulen bare vil utføre funksjonaliteten til matematiske beregninger for applikasjonen.
```
sampleApp.controller('DemoController', function($scope)
```
Vi kobler nå kontrolleren til vår AngularJS-modul "SampleApp". Dette betyr at hvis vi ikke refererer til modulen 'sampleApp' i hoved-HTML-koden vår, vil vi ikke kunne referere til funksjonaliteten til kontrolleren vår.

Vår hoved-HTML-kode vil ikke se ut som vist nedenfor

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

La oss merke oss de viktigste forskjellene i koden skrevet ovenfor og vår forrige kode

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

I kroppsmerkingen vår,

I stedet for å ha et tomt ng-app-direktiv, kaller vi nå modulen sampleApp.
Ved å kalle denne applikasjonsmodulen kan vi nå få tilgang til kontrolleren 'DemoController' og funksjonaliteten som finnes i demokontrolleren.

Moduler og kontrollere i AngularJS

In Vinklet.JS, mønsteret som brukes for å utvikle moderne nettapplikasjoner er å lage flere moduler og kontrollere for å logisk skille flere funksjonsnivåer.

Normalt vil moduler lagres separat Javascript filer, som vil være forskjellig fra hovedprogramfilen.

La oss se på et eksempel på hvordan dette kan oppnås.

I eksemplet nedenfor,

Vi vil lage en fil kalt Utilities.js som vil inneholde 2 moduler, en for å utføre funksjonaliteten til addisjon og den andre for å utføre funksjonaliteten til subtraksjon.
Vi skal deretter lage 2 separate applikasjonsfiler og få tilgang til Utility-filen fra hver applikasjonsfil.
I den ene søknadsfilen får vi tilgang til modulen for addisjon og i den andre vil vi få tilgang til modulen for subtraksjon.

Trinn 1) Definer koden for de flere modulene og kontrollerene.

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

La oss legge merke til nøkkelpunktene i koden skrevet ovenfor

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
Det er opprettet 2 separate vinkelmoduler, en som får navnet 'AdditionApp' og den andre får navnet 'SubtractionApp'.
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Det er definert 2 separate kontrollere for hver modul, den ene kalles DemoAddController og den andre er DemoSubtractController. Hver kontroller har egen logikk for addisjon og subtraksjon av tall.

Trinn 2) Lag hovedapplikasjonsfilene dine. La oss lage en fil kalt ApplicationAddition.html og legge til koden nedenfor

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

La oss legge merke til nøkkelpunktene i koden skrevet ovenfor

```
<script src="/lib/Utilities.js"></script>
```
Vi refererer til Utilities.js-filen vår i hovedapplikasjonsfilen. Dette lar oss referere til alle AngularJS-moduler som er definert i denne filen.
```
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
```
Vi får tilgang til 'AdditionApp'-modulen og DemoAddController ved å bruke ng-app-direktivet og ng-kontroller henholdsvis.
```
{{c}}
```
Siden vi refererer til den ovennevnte modulen og kontrolleren, kan vi referere til $scope.c-variabelen via et uttrykk. Uttrykket vil være resultatet av tillegget av de 2 omfangsvariablene a og b som ble utført i 'DemoAddController'-kontrolleren

På samme måte vil vi gjøre for subtraksjonsfunksjon.

Trinn 3) Lag hovedapplikasjonsfilene dine. La oss lage en fil kalt "ApplicationSubtraction.html" og legge til koden nedenfor

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

La oss legge merke til nøkkelpunktene i koden skrevet ovenfor

```
<script src="/lib/Utilities.js"></script>
```
Vi refererer til Utilities.js-filen vår i hovedprogramfilen vår. Dette lar oss referere til alle moduler som er definert i denne filen.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Vi får tilgang til 'SubtractionApp-modulen og DemoSubtractController ved å bruke henholdsvis ng-app-direktivet og ng-kontrolleren.
```
{{d}}
```
Siden vi refererer til den ovennevnte modulen og kontrolleren, kan vi referere til $scope.d-variabelen via et uttrykk. Uttrykket vil være resultatet av subtraksjonen av de 2 omfangsvariablene a og b som ble utført i 'DemoSubtractController' controller

Sammendrag

Uten bruk av AngularJS-moduler begynner kontrollerene å ha et globalt omfang som fører til dårlig programmeringspraksis.
Moduler brukes til å skille forretningslogikk. Flere moduler kan opprettes for å ha logisk atskilt innenfor disse forskjellige modulene.
Hver AngularJS-modul kan ha sitt eget sett med kontrollere definert og tilordnet.
Ved definering av moduler og kontrollere er de normalt definert separat JavaScript filer. Disse JavaSkriptfiler blir deretter referert til i hovedprogramfilen.

AngularJS-moduler

Hva er en AngularJS-modul?

Hvordan lage en modul i AngularJS

Moduler og kontrollere i AngularJS

Sammendrag

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet