AngularJS-moduler

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

Moduler i AngularJS fungerar som containrar som grupperar kontroller, tjänster, direktiv och filter bakom en logisk gräns, så ng-app-direktivet laddar bara den funktionalitet som en enskild sida faktiskt behöver vid körning.

  • 🔘 Definition: angular.module registrerar och hämtar varje komponent som en applikation använder.
  • ☑️ Skapande: En beroendematris skapar en modul; om den utelämnas hämtas en.
  • ✅ Bootstrapping: ng-app namnger modulen Angular loads för den regionen.
  • 🧪 Separation: Modulbaserade styrenheter undviker globala namn och kollisioner mellan styrenheter.
  • 📊 Versionsnotering: Stödet för AngularJS upphörde i januari 2022; Angular föredrar fristående komponenter.
Läs mer

AngularJS-modulgruppping kontroller, tjänster, direktiv och filter under en ng-app-gräns

Vad är en AngularJS-modul?

En modul definierar den applikationsfunktionalitet som tillämpas på hela HTML-sidan med hjälp av ng-app-direktivet. Den definierar funktioner, såsom tjänster, direktivoch filter, på ett sätt som gör det enkelt att återanvända det i olika applikationer.

Illustrationen ovan sammanfattar den gränsen.

I alla våra tidigare självstudiekurser, du har säkert lagt märke till ng-app-direktivet som används för att definiera din huvudsakliga Angular-applikation. Detta är ett av nyckelbegreppen för moduler i AngularJS.

⚠️ Versionsinformation: Stödet för AngularJS upphörde i januari 2022. Modern Vinkel använder @NgModule, och fristående komponenter är standard. Koden nedan är historisk.

Hur man skapar en modul i AngularJS

Innan vi börjar med vad en modul är, låt oss titta på ett exempel på en AngularJS-applikation utan en 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 adderar vi bara två variabler a och b och tilldelar additionen av dessa variabler till en ny variabel, c, och tilldelar den tillbaka till omfattning objekt.

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 kontrollanten 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 referera till funktionaliteten hos vår kontrollant.

Setter kontra getter: vinkel.modul skapar endast en modul när beroende arrayen skickas; utan den hämtar anropet en befintlig modul.

Vår huvudsakliga HTML-kod kommer nu 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 AngularJS, mönstret som används för utvecklingping Moderna webbapplikationer går ut på 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 två moduler, en för att utföra additionsfunktionen och den andra för att utföra subfunktionaliteten.traction.
  • 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 subtraction.

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 två separata AngularJS-moduler skapade, en som har fått namnet 'AdditionApp' och den andra har fått namnet 'Sub'.tractionApp'.

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

    Det finns två separata styrenheter definierade för varje modul, en kallas DemoAddController och den andra är DemoSub.tract-regulator. Varje regulator har separat logik för addition och subtraction av siffror.

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>
Missa inte:

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 subtractionsfunktion.

Steg 3) Skapa dina huvudsakliga programfiler. Nu skapar vi en fil som heter "ApplicationSubtraction.html” och lägg 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 använder 'Sub'tractionApp-modulen och DemoSubtractController med hjälp av ng-app-direktivet respektive ng-controller.

  3. {{d}}

    Eftersom vi refererar till ovan nämnda modul och kontrollenhet kan vi referera variabeln $scope.d via ett uttryck. Uttrycket kommer att vara resultatet av sub-variabelntraction av de två omfångsvariablerna a och b som utfördes i 'DemoSubtractController' Controller

Vanliga frågor

Att ange arrayen skapar en modul. Om den utelämnas hämtas den registrerade modulen, så flera filer utökar en injektion namnområde.

Nej. AngularJS bootstrapar bara den första ng-appen som hittas; ytterligare moduler behöver ett manuellt angular.bootstrap-anrop på sitt element.

config() körs medan providers registreras, så endast providers och konstanter injicerar där. run() körs när injektorn är redo.

Värdet ng-app matchar ingen registrerad modul. Stavfel, namn i citattecken eller att modulfilen laddas efter AngularJS orsakar det.

Ladda den via angular.mock.module, och lös sedan upp kontroller med inject(). Webbläsarnivåtäckning styr istället sidan, historiskt sett med Protractor.

@NgModule tog över i Angular 2, och fristående komponenter är nu standard och deklarerar beroenden genom sin egen imports-array.

Maskininlärningsverktyg läser varje angular.module-anrop, bygger en beroendegraf och rangordnar moduler efter migrationsrisk. Revtittare verifierar varje Direktiven kartaping.

GitHub Copilot och liknande agentassistenter genererar modul-, kontroll- och filskelett från en och samma prompt. Genererad kod behöver granskas.

Sammanfatta detta inlägg med: