AngularJS-moduler

By: James Hartman James Hartman
Hours Uppdaterad

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 det i olika applikationer.

I alla våra tidigare handledningar skulle du ha märkt ng-app-direktivet som används för att definiera din huvudsakliga Angular-applikation. Detta är ett av nyckelbegreppen för moduler i Angular.JS.

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 modul och sedan förstå 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 kontroller i vår applikation.

I den här kontrollern utför vi bara tillägget av 2 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år huvudsakliga Sample.html, som kommer att vara vår huvudapplikation. Låt oss infoga kodavsnittet nedan i vår HTML-sida.

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

I koden ovan inkluderar vi vår DemoController och anropar sedan värdet för 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 kontroller som anropas inom ramen för ng-app-direktivet kan nås globalt. Det finns ingen gräns som skiljer flera kontroller från varandra.
  • Nu i modern programmering är det en dålig praxis att ha kontroller som inte är kopplade till några moduler och göra dem globalt tillgängliga. Det måste finnas någon logisk gräns definierad för styrenheter.

Och det är här moduler kommer in. Moduler används för att skapa den där 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 koppla vår styrenhet till denna modul

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 som skrivits ovan

  1. var sampleApp = angular.module('sampleApp',[]);

    Vi skapar specifikt en AngularJS-modul som heter 'sampleApp'. Detta kommer att utgöra en logisk gräns för den funktionalitet som denna modul kommer att innehålla. Så i vårt exempel ovan har vi en modul som innehåller en kontroller som utför rollen som tillägg av 2 scope-objekt. Därför kan vi ha en modul med en logisk gräns som säger att denna modul endast kommer att utföra funktionaliteten för matematiska beräkningar för applikationen.

  2. sampleApp.controller('DemoController', function($scope)

    Vi kopplar nu styrenheten till vår AngularJS-modul "SampleApp". Det betyder att om vi inte hänvisar till modulen 'sampleApp' i vår huvudsakliga HTML-kod, kommer vi inte att kunna referera till funktionaliteten hos vår kontroller.

Vår huvudsakliga HTML-kod kommer inte att se ut som visas nedan

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

Låt oss notera de viktigaste skillnaderna i koden skriven ovan och vår tidigare kod

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

I vår kroppsetikett,

  • Istället för att ha ett tomt ng-app-direktiv kallar vi nu modulen sampleApp.
  • Genom att anropa den här applikationsmodulen kan vi nu komma åt styrenheten 'DemoController' och funktionaliteten som finns i demokontrollern.

Moduler och styrenheter i AngularJS

In Angular.JS, är mönstret som används för att utveckla moderna webbapplikationer att skapa flera moduler och kontroller för att logiskt separera flera funktionalitetsnivåer.

Normalt lagras moduler separat Javascript filer, som skulle skilja sig från huvudprogramfilen.

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 kommer att innehålla 2 moduler, en för att utföra funktionaliteten för addition och den andra för att utföra funktionaliteten av subtraktion.
  • Vi kommer sedan att skapa 2 separata applikationsfiler och komma åt Utility-filen från varje applikationsfil.
  • I en applikationsfil kommer vi åt modulen för addition och i den andra kommer vi åt modulen för subtraktion.

Steg 1) Definiera koden för de flera modulerna och styrenheterna.

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 som skrivits ovan

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Det finns 2 separata vinkelmoduler skapade, en som får namnet 'AdditionApp' och den andra får namnet 'SubtractionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Det finns 2 separata kontroller definierade för varje modul, en kallas DemoAddController och den andra är DemoSubtractController. Varje styrenhet har separat logik för addition och subtraktion av tal.

Steg 2) Skapa dina huvudsakliga programfiler. Låt oss skapa en fil som heter ApplicationAddition.html och lägga till koden nedan

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

Låt oss notera nyckelpunkterna i koden som skrivits ovan

  1. <script src="/lib/Utilities.js"></script>

    Vi hänvisar till vår Utilities.js-fil i vår huvudprogramfil. Detta tillåter oss att referera till alla AngularJS-moduler som definieras i den här filen.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Vi kommer åt modulen 'AdditionApp' och DemoAddController genom att använda ng-app-direktivet och ng-kontroller respektive.

  3. {{c}}

    Eftersom vi refererar till den ovan nämnda modulen och styrenheten kan vi referera till variabeln $scope.c via ett uttryck. Uttrycket kommer att vara resultatet av tillägget av de två omfångsvariablerna a och b som utfördes i 'DemoAddController'-kontrollern

    På samma sätt kommer vi att göra för subtraktionsfunktion.

Steg 3) Skapa dina huvudsakliga programfiler. Låt oss skapa en fil som heter "ApplicationSubtraction.html" och lägga till koden nedan

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

Låt oss notera nyckelpunkterna i koden som skrivits ovan

  1. <script src="/lib/Utilities.js"></script>

    Vi hänvisar till vår Utilities.js-fil i vår huvudprogramfil. Detta gör att vi kan referera till alla moduler som definieras i den här filen.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Vi kommer åt 'SubtractionApp-modulen och DemoSubtractController genom att använda ng-app-direktivet respektive ng-controllern.

  3. {{d}}

    Eftersom vi refererar till den ovan nämnda modulen och styrenheten kan vi referera till variabeln $scope.d via ett uttryck. Uttrycket kommer att vara resultatet av subtraktionen av de två omfångsvariablerna a och b som utfördes i 'DemoSubtractController' Regulator

Sammanfattning

  • Utan användning av AngularJS-moduler börjar styrenheter ha ett globalt omfång vilket leder till dålig programmeringspraxis.
  • 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.
  • Vid definition av moduler och regulatorer definieras de normalt separat JavaScript filer. Dessa JavaSkriptfiler refereras sedan till i huvudprogramfilen.

Du kanske gillar: