AngularJS-modulopplæring med eksempel

Hva er en AngularJS-modul?

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

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

I denne veiledningen vil du lære-

Hvordan lage en modul i AngularJS
Moduler og kontrollere

Hvordan lage en modul i AngularJS

Før vi begynner med hva som er en modul, la oss se på et eksempel på en AngularJS-applikasjon uten modul, og forstå deretter 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 opprettet en funksjon kalt "DemoController" som skal fungere som en kontroller i applikasjonen vår.

I denne kontrolleren utfører vi bare tillegg av to variabler a og b og tilordner tillegg av disse variablene til en ny variabel, c, og tilordner den tilbake til omfangsobjektet.

La oss nå lage vår viktigste Sample.html, som vil være vår viktigste applikasjon. La oss sette inn kodebiten nedenfor på HTML-siden vår.


Guru99 Global Event
{{c}}

I koden ovenfor inkluderer vi vår DemoController og påkaller deretter verdien av $ 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 er kalt i sammenheng med ng-app-direktivet, er tilgjengelige globalt. Det er ingen grense som skiller flere kontrollere fra hverandre.
Nå i moderne programmering er dette en dårlig praksis å ha kontrollere ikke koblet til noen moduler og gjøre dem tilgjengelig globalt. Det må være noen logiske grenser definert for kontrollere.

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

La oss endre koden ovenfor for å implementere moduler og feste 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 oss nøkkelforskjellene i koden som er 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 inneholder. Så i vårt eksempel ovenfor har vi en modul som inneholder en kontroller som utfører rollen som tillegg av to omfangsobjekter. 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 AngularJS-modulen vår "SampleApp". Dette betyr at hvis vi ikke refererer til modulen 'sampleApp' i vår viktigste HTML-kode, vil vi ikke kunne referere til funksjonaliteten til kontrolleren vår.

Vår viktigste HTML-kode ser ikke ut som vist nedenfor


Guru99 Global Event
{{c}}

La oss merke oss nøkkelforskjellene i koden som er skrevet ovenfor og vår forrige kode

I kroppskoden vår,

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

Moduler og kontrollere

I Angular.JS er mønsteret som brukes til å utvikle moderne webapplikasjoner å lage flere moduler og kontrollere for å logisk skille flere nivåer av funksjonalitet.

Normalt lagres moduler i separate Javascript-filer, som vil være forskjellige fra hovedprogramfilen.

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

I eksemplet nedenfor,

Vi vil lage en fil som heter Utilities.js som inneholder to moduler, en for å utføre funksjonalitet for tillegg og den andre for å utføre funksjonalitet for subtraksjon.
Vi skal da lage 2 separate applikasjonsfiler og få tilgang til Utility-filen fra hver applikasjonsfil.
I en applikasjonsfil får vi tilgang til modulen for tillegg, og i den andre får vi tilgang til modulen for subtraksjon.

Trinn 1) Definer koden for flere moduler og kontrollere.

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 merke oss nøkkelpunktene i koden som er skrevet ovenfor

```
 var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);
```
Det er opprettet to 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 2 separate kontrollere definert for hver modul, den ene kalles DemoAddController og den andre er DemoSubtractController. Hver kontroller har egen logikk for oppføring og subtraksjon av tall.

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

AdditionAddition :{{c}}

La oss merke oss nøkkelpunktene i koden som er skrevet ovenfor

Vi refererer til Utilities.js-filen i hovedprogramfilen. Dette lar oss referere til alle AngularJS-moduler som er definert i denne filen.
Vi får tilgang til 'AdditionApp' -modulen og DemoAddController ved å bruke henholdsvis ng-app-direktivet og ng-kontrolleren.
```
{{c}}
```
Siden vi refererer til ovennevnte modul og kontroller, kan vi referere til $ scope.c-variabelen via et uttrykk. Uttrykket vil være resultatet av tillegg av de to omfangsvariablene a og b som ble utført i 'DemoAddController' -kontrolleren

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

Trinn 3) Opprett de viktigste applikasjonsfilene. La oss lage en fil kalt "ApplicationSubtraction.html" og legge til koden nedenfor

AdditionSubtraction :{{d}}

La oss merke oss nøkkelpunktene i koden som er skrevet ovenfor

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

Sammendrag

Uten bruk av AngularJS-moduler begynner kontrollere å ha et globalt omfang som fører til dårlig programmeringspraksis.
Moduler brukes til å skille forretningslogikk. Flere moduler kan opprettes for å være logisk skilt innenfor disse forskjellige modulene.
Hver AngularJS-modul kan ha sitt eget sett med kontrollere definert og tilordnet.
Når du definerer moduler og kontrollere, defineres de normalt i separate JavaScript-filer. Disse JavaScript-filene blir deretter referert til i hovedprogramfilen.