AngularJS-modules

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

Modules in AngularJS fungeren als containers die controllers, services, directives en filters groeperen achter één logische grens, zodat de ng-app directive alleen de functionaliteit laadt die een enkele pagina daadwerkelijk nodig heeft tijdens de uitvoering.

  • 🔘 Definitie: angular.module registreert en haalt alle componenten op die een applicatie gebruikt.
  • ☑️ Creation: Een afhankelijkheidsarray creëert een module; als je deze weglaat, haal je er een op.
  • ✅ Bootstrapping: ng-app geeft de naam aan van de module die Angular voor die regio laadt.
  • 🧪 Scheiding: Module-gebaseerde controllers voorkomen globale namen en conflicten tussen controllers.
  • 📊 Versie-opmerking: De ondersteuning voor AngularJS is in januari 2022 beëindigd; Angular geeft de voorkeur aan losstaande componenten.
Meer informatie

AngularJS-modulegroepping controllers, services, directives en filters onder één ng-app-grens

Wat is een AngularJS-module?

Een module definieert de applicatiefunctionaliteit die op de gehele HTML-pagina wordt toegepast met behulp van de ng-app-richtlijn. Het definieert functionaliteit, zoals services, richtlijnenen filters, op een manier die het gemakkelijk maakt om ze in verschillende toepassingen te hergebruiken.

De bovenstaande illustratie vat die grens samen.

In al onze eerdere tutorialsJe hebt vast wel gemerkt dat de `ng-app` directive wordt gebruikt om je hoofdapplicatie in Angular te definiëren. Dit is een van de belangrijkste concepten van modules in AngularJS.

⚠️ Versie-opmerking: De ondersteuning voor AngularJS is in januari 2022 beëindigd.​ Modern Angular Het maakt gebruik van @NgModule, en standalone componenten zijn de standaardinstelling. De onderstaande code is verouderd.

Hoe u een module maakt in AngularJS

Voordat we ingaan op wat een module is, laten we eerst eens kijken naar een voorbeeld van een module. AngularJS-applicatie zonder module en begrijp vervolgens waarom modules nodig zijn in je applicatie.

Laten we eens een bestand aanmaken met de naam "DemoController.js" en de onderstaande code aan dat bestand toevoegen.

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

In de bovenstaande code hebben we een functie gemaakt met de naam “DemoController” die als controller binnen onze applicatie gaat fungeren.

In deze controller tellen we twee variabelen a en b bij elkaar op, kennen we de som van deze variabelen toe aan een nieuwe variabele c en kennen we deze vervolgens weer toe aan de controller. omvang voorwerp.

Laten we nu onze hoofdtoepassing Sample.html maken, die onze hoofdtoepassing zal zijn. Laten we het onderstaande codefragment in onze HTML-pagina invoegen.

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

In de bovenstaande code nemen we onze DemoController op en roepen vervolgens de waarde van de variabele $scope.c aan via een expressie.

Maar let op onze ng-app-richtlijn, deze heeft een blanco waarde.

  • Dit betekent in principe dat alle controllers die worden opgeroepen in het kader van de ng-app-richtlijn wereldwijd toegankelijk zijn. Er is geen grens die meerdere controllers van elkaar scheidt.
  • In de moderne programmering is het een slechte gewoonte om controllers niet aan modules te koppelen en ze wereldwijd toegankelijk te maken. Er moet een logische grens zijn gedefinieerd voor controllers.

En dit is waar modules in beeld komen. Modules worden gebruikt om die scheiding van grenzen te creëren en te helpen bij het scheiden van controllers op basis van functionaliteit.

Laten we de bovenstaande code wijzigen om modules te implementeren en onze controller aan deze module te koppelen

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

Laten we de belangrijkste verschillen in de hierboven geschreven code noteren

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

    We maken specifiek een AngularJS-module genaamd 'sampleApp'. Dit zal een logische grens vormen voor de functionaliteit die deze module zal bevatten. In ons bovenstaande voorbeeld hebben we dus een module die een controller bevat die de rol vervult van het toevoegen van 2 scope-objecten. Daarom kunnen we één module hebben met een logische grens die zegt dat deze module alleen de functionaliteit van wiskundige berekeningen voor de toepassing zal uitvoeren.

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

    We koppelen de controller nu aan onze AngularJS-module "sampleApp". Dit betekent dat als we de module 'sampleApp' niet in onze hoofd-HTML-code opnemen, we de functionaliteit van onze controller niet kunnen gebruiken.

Setter versus getter: hoekige.module maakt alleen een module aan wanneer de afhankelijkheid Er wordt een array doorgegeven; zonder deze array haalt de aanroep een bestaande module op.

Onze belangrijkste HTML-code ziet er nu als volgt uit:

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

Laten we eens kijken naar de belangrijkste verschillen in de hierboven geschreven code en onze vorige code

<body ng-app="sampleApp">

In onze bodytag,

  • In plaats van een lege ng-app-richtlijn te hebben, roepen we nu de module sampleApp aan.
  • Door deze applicatiemodule aan te roepen, hebben we nu toegang tot de controller 'DemoController' en de functionaliteit die aanwezig is in de democontroller.

Modules en controllers in AngularJS

In angularjs, het patroon dat gebruikt wordt voor ontwikkelingping Moderne webapplicaties maken gebruik van meerdere modules en controllers om verschillende functionaliteitsniveaus logisch van elkaar te scheiden.

Normaal gesproken worden modules afzonderlijk opgeslagen JavaScript bestanden, die anders zouden zijn dan het hoofdtoepassingsbestand.

Laten we eens kijken naar een voorbeeld van hoe dit kan worden bereikt.

In het onderstaande voorbeeld

  • We maken een bestand genaamd Utilities.js aan dat twee modules bevat: één voor de optelfunctionaliteit en de andere voor de aftrekfunctionaliteit.tractie.
  • We gaan dan twee afzonderlijke applicatiebestanden maken en vanuit elk applicatiebestand toegang krijgen tot het Utility-bestand.
  • In het ene applicatiebestand gebruiken we de module voor optellen en in het andere de module voor aftrekken.tractie.

Stap 1) Definieer de code voor de meerdere modules en controllers.

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;
});

Laten we de belangrijkste punten in de hierboven geschreven code noteren

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

    Er zijn twee aparte AngularJS-modules aangemaakt, één met de naam 'AdditionApp' en de andere met de naam 'Sub'.tractionApp'.

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

    Er zijn twee aparte controllers gedefinieerd voor elke module: de DemoAddController en de DemoSub.tractController. Elke controller heeft aparte logica voor optellen en aftrekken.tracvan getallen.

Stap 2) Maak uw belangrijkste applicatiebestanden. Laten we een bestand maken met de naam ApplicationAddition.html en de onderstaande code toevoegen

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

GERELATEERDE ARTIKELEN

Laten we de belangrijkste punten in de hierboven geschreven code noteren

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

    We verwijzen naar ons Utilities.js-bestand in ons hoofdtoepassingsbestand. Hierdoor kunnen we verwijzen naar alle AngularJS-modules die in dit bestand zijn gedefinieerd.

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

    We hebben toegang tot de module 'AdditionApp' en DemoAddController met behulp van de ng-app-richtlijn en de ng-controller respectievelijk.

  3. {{c}}

    Omdat we verwijzen naar de bovengenoemde module en controller, kunnen we via een expressie naar de variabele $scope.c verwijzen. De expressie zal het resultaat zijn van de toevoeging van de 2 scopevariabelen a en b, die werd uitgevoerd in de 'DemoAddController'-controller

    Op dezelfde manier zullen we dat doen voor abonnementen.tractie-functie.

Stap 3) Maak de belangrijkste applicatiebestanden aan. Laten we een bestand maken met de naam "ApplicationSub".traction.html” en voeg de onderstaande code toe.

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

Laten we de belangrijkste punten in de hierboven geschreven code noteren

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

    We verwijzen naar ons Utilities.js-bestand in ons hoofdtoepassingsbestand. Hierdoor kunnen we verwijzen naar alle modules die in dit bestand zijn gedefinieerd.

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

    We hebben toegang tot de 'Sub'.tractionApp'-module en DemoSubtractController door respectievelijk de ng-app-richtlijn en de ng-controller te gebruiken.

  3. {{d}}

    Omdat we verwijzen naar de bovengenoemde module en controller, kunnen we de variabele $scope.d via een expressie benaderen. De expressie is het resultaat van de subroutine.tracde 2 bereikvariabelen a en b die werden uitgevoerd in de 'DemoSub'tractController' Controller

Veelgestelde vragen

Door de array mee te geven, wordt een module aangemaakt. Als je de array weglaat, wordt de geregistreerde module opgehaald, waardoor meerdere bestanden één module uitbreiden. injectie naamruimte.

Nee. AngularJS bootstrapt alleen de eerste gevonden ng-app; voor verdere modules is een handmatige aanroep van angular.bootstrap op het betreffende element nodig.

config() wordt uitgevoerd terwijl providers zich registreren, dus alleen providers en constanten worden daar geïnjecteerd. run() wordt uitgevoerd zodra de injector gereed is.

De waarde van ng-app komt niet overeen met een geregistreerde module. Dit kan komen door typefouten, namen tussen aanhalingstekens of het laden van het modulebestand na AngularJS.

Laad het via angular.mock.module en los vervolgens de controllers op met inject(). Browser-level coverage stuurt de pagina daarentegen aan, historisch gezien met Protractor.

@NgModule Dit werd overgenomen in Angular 2, en standalone componenten zijn nu de standaard, waarbij afhankelijkheden worden gedeclareerd via hun eigen imports-array.

Machine learning-tools lezen elke aanroep van angular.module, bouwen een afhankelijkheidsgrafiek op en rangschikken modules op basis van migratierisico. Revkijkers verifiëren elk Richtlijnen kaartping.

GitHub-copiloot En vergelijkbare agentachtige assistenten genereren module-, controller- en bestandssjablonen vanuit één prompt. De gegenereerde code moet nog worden nagekeken.

Vat dit bericht samen met: