Vad är en AngularJS-modul?
En modul definierar applikationsfunktionaliteten som tillämpas på hela HTML-sidan med hjälp av ng-app-direktivet. Den definierar funktionalitet, såsom tjänster, direktiv och filter, på ett sätt som gör det enkelt att återanvända den i olika applikationer.
I alla våra tidigare självstudier hade du lagt märke till ng-app-direktivet som användes för att definiera din huvudsakliga Angular-applikation. Detta är ett av de viktigaste begreppen för moduler i Angular.JS.
I den här handledningen lär du dig-
- Hur man skapar en modul i AngularJS
- Moduler och styrenheter
Hur man skapar en modul i AngularJS
Innan vi börjar med vad som är en modul, låt oss titta på ett exempel på en AngularJS-applikation utan en modul och förstå sedan behovet av att ha moduler i din applikation.
Låt oss överväga att skapa en fil som heter "DemoController.js" och lägga till koden nedan i filen
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
I ovanstående kod har vi skapat en funktion som heter "DemoController" som kommer att fungera som en controller i vår applikation.
I den här styrenheten utför vi bara tillägget av två variabler a och b och tilldelar tillägget av dessa variabler till en ny variabel, c och tilldelar den tillbaka till scope-objektet.
Låt oss nu skapa vårt huvudprov.html, som kommer att vara vår huvudapplikation. Låt oss infoga nedanstående kodavsnitt på vår HTML-sida.
Guru99 globalt evenemang
{{c}}I koden ovan inkluderar vi vår DemoController och anropar sedan värdet på variabeln $ scope.c via ett uttryck.
Men lägg märke till vårt ng-app-direktiv, det har ett tomt värde.
- Detta innebär i princip att alla styrenheter som anropas inom ramen för ng-app-direktivet kan nås globalt. Det finns ingen gräns som skiljer flera styrenheter från varandra.
- Nu i modern programmering är detta en dålig praxis att ha kontroller som inte är anslutna till några moduler och gör dem globalt tillgängliga. Det måste finnas en viss logisk gräns definierad för styrenheter.
Och det är här moduler kommer in. Moduler används för att skapa den separationen av gränser och hjälpa till att separera styrenheter baserat på funktionalitet.
Låt oss ändra koden ovan för att implementera moduler och bifoga vår styrenhet till den här modulen
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Låt oss notera de viktigaste skillnaderna i koden ovan
var sampleApp = angular.module('sampleApp',[]);Vi skapar specifikt en AngularJS-modul som heter 'sampleApp'. Detta kommer att bilda en logisk gräns för funktionaliteten som denna modul kommer att innehålla. Så i vårt ovanstående exempel har vi en modul som innehåller en styrenhet som utför rollen som tillägg av två omfångsobjekt. Därför kan vi ha en modul med en logisk gräns som säger att den här modulen bara kommer att utföra funktionaliteten hos matematiska beräkningar för applikationen.
sampleApp.controller('DemoController', function($scope)Vi ansluter nu styrenheten till vår AngularJS-modul "SampleApp". Det betyder att om vi inte refererar till modulen 'sampleApp' i vår huvudsakliga HTML-kod kommer vi inte att kunna hänvisa till funktionaliteten hos vår controller.
Vår huvudsakliga HTML-kod ser inte ut som visas nedan
Guru99 Global Event
{{c}}Låt oss notera de viktigaste skillnaderna i koden skriven ovan och vår tidigare kod
I vår kroppskod,
- Istället för att ha ett tomt ng-app-direktiv kallar vi nu modulen sampleApp.
- Genom att ringa den här applikationsmodulen kan vi nu komma åt styrenheten 'DemoController' och den funktion som finns i demokontrollen.
Moduler och styrenheter
I Angular.JS är mönstret som används för att utveckla dagens webbapplikationer att skapa flera moduler och styrenheter för att logiskt separera flera nivåer av funktionalitet.
Normalt lagras moduler i separata Javascript-filer, som skiljer sig från huvudapplikationsfilen.
Låt oss titta på ett exempel på hur detta kan uppnås.
I exemplet nedan,
- Vi kommer att skapa en fil som heter Utilities.js som innehåller två moduler, en för att utföra funktionaliteten för addition och den andra för att utföra funktionen för subtraktion.
- Vi ska sedan skapa två separata applikationsfiler och komma åt verktygsfilen från varje applikationsfil.
- I en applikationsfil kommer vi åt modulen för tillägg och i den andra kommer vi åt modulen för subtraktion.
Steg 1) Definiera koden för flera moduler och styrenheter.
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;});Låt oss notera nyckelpunkterna i koden ovan
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Det finns två separata vinkelmoduler skapade, en som får namnet 'AdditionApp' och den andra får namnet 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Det finns två separata styrenheter definierade för varje modul, en heter DemoAddController och den andra är DemoSubtractController. Varje styrenhet har separat logik för att addera och subtrahera tal.
Steg 2) Skapa dina huvudapplikationsfiler. Låt oss skapa en fil som heter ApplicationAddition.html och lägga till koden nedan
Addition Addition :{{c}}Låt oss notera nyckelpunkterna i koden ovan
Vi refererar till vår Utilities.js-fil i vår huvudsakliga applikationsfil. Detta gör att vi kan referera till alla AngularJS-moduler som definieras i den här filen.
Vi kommer åt 'AdditionApp'-modulen och DemoAddController genom att använda ng-app-direktivet respektive ng-controller.
{{c}}Eftersom vi refererar till ovannämnda modul och styrenhet kan vi referera till variabeln $ scope.c via ett uttryck. Uttrycket kommer att vara resultatet av tillägget av de två omfattningsvariablerna a och b som utfördes i 'DemoAddController' -kontrollen
På samma sätt som vi kommer att göra för subtraktionsfunktion.
Steg 3) Skapa dina huvudapplikationer. Låt oss skapa en fil som heter "ApplicationSubtraction.html" och lägga till koden nedan
Addition Subtraction :{{d}}Låt oss notera nyckelpunkterna i koden ovan
Vi refererar till vår Utilities.js-fil i vår huvudsakliga applikationsfil. Detta gör att vi kan referera till alla moduler som definierats i den här filen.
Vi kommer åt 'SubtractionApp-modulen och DemoSubtractController genom att använda ng-app-direktivet respektive ng-controller.
{{d}}Eftersom vi refererar till ovan nämnda modul och styrenhet kan vi hänvisa till $ scope.d-variabeln via ett uttryck. Uttrycket kommer att vara resultatet av subtraktion av de två omfångsvariablerna a och b som utfördes i 'DemoSubtractController' -kontrollen
Sammanfattning
- Utan att använda AngularJS-moduler börjar regulatorer att ha ett globalt omfång som leder till dåliga programmeringsmetoder.
- Moduler används för att separera affärslogik. Flera moduler kan skapas för att logiskt separeras inom dessa olika moduler.
- Varje AngularJS-modul kan ha sin egen uppsättning styrenheter definierade och tilldelade.
- När moduler och kontroller definieras definieras de normalt i separata JavaScript-filer. Dessa JavaScript-filer refereras sedan till i huvudapplikationsfilen.