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 let 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øglekoncepterne for moduler i Angular.JS.
I denne vejledning lærer du-
- Sådan oprettes et modul i AngularJS
- Moduler og controllere
Sådan oprettes et modul i AngularJS
Før vi starter med, hvad der er et modul, skal vi 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", der vil fungere som en controller i vores applikation.
I denne controller udfører vi bare tilføjelsen af 2 variabler a og b og tildeler tilføjelsen af disse variabler til en ny variabel, c og tildeler den tilbage til scope-objektet.
Lad os nu oprette vores hovedeksempel.html, som vil være vores hovedapplikation. Lad os indsætte nedenstående kodestykke på vores HTML-side.
Guru99 global begivenhed
{{c}}I koden ovenfor inkluderer vi vores DemoController og påkalder derefter værdien af variablen $ scope.c via et udtryk.
Men bemærk vores ng-app-direktiv, det har en tom værdi.
- Dette betyder grundlæggende, at alle controllere, der kaldes inden for rammerne af ng-app-direktivet, kan fås globalt. Der er ingen grænser, der adskiller flere controllere fra hinanden.
- Nu i moderne programmering er dette en dårlig praksis at have controllere, der ikke er knyttet til nogen moduler og gør dem tilgængelige globalt. Der skal være en eller anden logisk grænse defineret for controllere.
Og det er her moduler kommer ind. Moduler bruges til at skabe denne adskillelse af grænser og hjælpe med at adskille controllere baseret på funktionalitet.
Lad os ændre koden ovenfor for at implementere moduler og vedhæfte 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 opretter 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, der indeholder en controller, der udfører rollen som tilføjelsen af 2 scope-objekter. Derfor kan vi have et modul med en logisk grænse, der siger, at dette modul kun udfører funktionaliteten af matematiske beregninger til applikationen.
sampleApp.controller('DemoController', function($scope)Vi vedhæfter nu controlleren til vores AngularJS-modul "SampleApp". Dette betyder, at hvis vi ikke henviser til modulet 'sampleApp' i vores vigtigste HTML-kode, vil vi ikke være i stand til at henvise til funktionaliteten af vores controller.
Vores vigtigste HTML-kode ser ikke ud som vist nedenfor
Guru99 Global Event
{{c}}Lad os bemærke de vigtigste forskelle i koden skrevet ovenfor og vores tidligere kode
I vores kropskode,
- 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 demo-controlleren.
Moduler og controllere
I Angular.JS er det mønster, der bruges til at udvikle moderne webapplikationer, at oprette flere moduler og controllere til logisk at adskille flere niveauer af funktionalitet.
Normalt gemmes moduler i separate Javascript-filer, som adskiller sig fra hovedapplikationsfilen.
Lad os se på et eksempel på, hvordan dette kan opnås.
I eksemplet nedenfor,
- Vi opretter en fil, der hedder Utilities.js, der indeholder 2 moduler, en til at udføre additionsfunktionalitet og den anden til at udføre subtraktionens funktionalitet.
- Vi opretter derefter 2 separate applikationsfiler og får adgang til Utility-filen fra hver applikationsfil.
- I den ene applikationsfil får vi adgang til modulet til tilføjelse, og i den anden får vi adgang til modulet til subtraktion.
Trin 1) Definer koden til 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 nøglepunkterne i koden skrevet ovenfor
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Der er oprettet 2 separate vinkelmoduler, en der får navnet 'AdditionApp' og den anden 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
Addition Addition :{{c}}Lad os bemærke nøglepunkterne i koden skrevet ovenfor
Vi henviser til vores Utilities.js-fil i vores vigtigste applikationsfil. Dette giver os mulighed for at henvise til alle AngularJS-moduler, der er defineret i denne fil.
Vi får adgang til modulet 'AdditionApp' og DemoAddController ved at bruge henholdsvis ng-app-direktivet og ng-controlleren.
{{c}}Da vi refererer til ovennævnte modul og controller, er vi i stand til at henvise til $ scope.c-variablen via et udtryk. Udtrykket vil være resultatet af tilføjelsen af de to omfangsvariabler a og b, som blev udført i 'DemoAddController' -controlleren
På samme måde som vi vil gøre for subtraktionsfunktion.
Trin 3) Opret dine vigtigste applikationsfiler. Lad os oprette en fil kaldet "ApplicationSubtraction.html" og tilføje nedenstående kode
Addition Subtraction :{{d}}Lad os bemærke nøglepunkterne i koden skrevet ovenfor
Vi henviser til vores Utilities.js-fil i vores vigtigste applikationsfil. Dette giver os mulighed for at henvise til alle moduler, der er defineret i denne fil.
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 henvise til $ scope.d-variablen via et udtryk. Udtrykket vil være resultatet af subtraktion af de to omfangsvariabler a og b, som blev udført i 'DemoSubtractController' -controlleren
Resumé
- Uden brug af AngularJS-moduler begynder controllere at have et globalt anvendelsesområde, der fører til dårlig programmeringspraksis.
- Moduler bruges til at adskille forretningslogik. Flere moduler kan oprettes, så de er logisk adskilt inden for disse forskellige moduler.
- Hvert AngularJS-modul kan have sit eget sæt controllere defineret og tildelt det.
- Når moduler og controllere defineres, defineres de normalt i separate JavaScript-filer. Disse JavaScript-filer henvises derefter til i hovedapplikationsfilen.