AngularJS Module-zelfstudie met voorbeeld

Inhoudsopgave:

Anonim

Wat is een AngularJS-module?

Een module definieert de toepassingsfunctionaliteit die wordt toegepast op de hele HTML-pagina met behulp van de ng-app-richtlijn. Het definieert functionaliteit, zoals services, richtlijnen en filters, op een manier die het gemakkelijk maakt om deze opnieuw te gebruiken in verschillende toepassingen.

In al onze eerdere tutorials zou je de ng-app-richtlijn hebben opgemerkt die werd gebruikt om je belangrijkste Angular-applicatie te definiëren. Dit is een van de belangrijkste concepten van modules in Angular.JS.

In deze tutorial leer je-

  • Hoe maak je een module aan in AngularJS
  • Modules en controllers

Hoe maak je een module aan in AngularJS

Voordat we beginnen met wat een module is, kijken we eerst naar een voorbeeld van een AngularJS-applicatie zonder module en begrijpen we de noodzaak om modules in uw applicatie te hebben.

Laten we overwegen om een ​​bestand met de naam "DemoController.js" te maken en de onderstaande code aan het bestand toe te voegen

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 zal fungeren als controller binnen onze applicatie.

In deze controller voeren we gewoon de toevoeging van 2 variabelen a en b uit en wijzen we de toevoeging van deze variabelen toe aan een nieuwe variabele, c, en wijzen we deze weer toe aan het scope-object.

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

Guru99 Wereldwijd evenement

{{c}}

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

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

  • Dit betekent in feite dat alle controllers die worden aangeroepen in de context van de ng-app-richtlijn wereldwijd toegankelijk zijn. Er is geen grens die meerdere controllers van elkaar scheidt.
  • Tegenwoordig is het in de moderne programmering 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 hier komen modules om de hoek kijken. 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 eens kijken naar de belangrijkste verschillen in de hierboven geschreven code

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

    We maken specifiek een AngularJS-module met de naam 'sampleApp'. Dit vormt een logische grens voor de functionaliteit die deze module zal bevatten. Dus in ons bovenstaande voorbeeld hebben we een module die een controller bevat die de rol vervult van de toevoeging 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 niet verwijzen naar de module 'sampleApp' in onze belangrijkste HTML-code, we niet kunnen verwijzen naar de functionaliteit van onze controller.

Onze belangrijkste HTML-code ziet er niet uit zoals hieronder weergegeven

Guru99 Global Event

{{c}}

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


In onze body-tag,

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

Modules en controllers

In Angular.JS is het patroon dat wordt gebruikt voor het ontwikkelen van moderne webapplicaties het creëren van meerdere modules en controllers om meerdere functionaliteitsniveaus logisch te scheiden.

Normaal gesproken worden modules opgeslagen in afzonderlijke Javascript-bestanden, wat anders zou zijn dan het hoofdtoepassingsbestand.

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

In het onderstaande voorbeeld

  • We zullen een bestand maken met de naam Utilities.js dat 2 modules zal bevatten, één voor het uitvoeren van de functionaliteit van optellen en de andere voor het uitvoeren van de functionaliteit van aftrekken.
  • We gaan dan 2 afzonderlijke applicatiebestanden maken en openen het Utility-bestand vanuit elk applicatiebestand.
  • In het ene aanvraagbestand hebben we toegang tot de module voor optellen en in het andere hebben we toegang tot de module voor aftrekken.

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 eens kijken naar de belangrijkste punten in de code die hierboven is geschreven

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

    Er zijn 2 aparte Angular Module gemaakt, de ene krijgt de naam 'AdditionApp' en de tweede krijgt de naam 'SubtractionApp'.

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

    Er zijn 2 aparte controllers gedefinieerd voor elke module, de ene heet de DemoAddController en de andere is de DemoSubtractController. Elke controller heeft een aparte logica voor het optellen en aftrekken van getallen.

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

Addition
Addition :{{c}}

Laten we eens kijken naar de belangrijkste punten in de code die hierboven is geschreven

  1. 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. We hebben toegang tot de 'AdditionApp'-module en DemoAddController door respectievelijk de ng-app-richtlijn en de ng-controller te gebruiken.

  3. {{c}}

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

    Op dezelfde manier zullen we doen voor de aftrekkingsfunctie.

Stap 3) Maak uw belangrijkste toepassingsbestanden. Laten we een bestand maken met de naam "ApplicationSubtraction.html" en de onderstaande code toevoegen

Addition
Subtraction :{{d}}

Laten we eens kijken naar de belangrijkste punten in de code die hierboven is geschreven

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

  2. We hebben toegang tot de 'SubtractionApp-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, zijn we in staat om via een uitdrukking naar de $ scope.d variabele te verwijzen. De uitdrukking zal het resultaat zijn van het aftrekken van de 2 bereikvariabelen a en b die werd uitgevoerd in de 'DemoSubtractController'-controller

Overzicht

  • Zonder het gebruik van AngularJS-modules krijgen controllers een globaal bereik, wat leidt tot slechte programmeerpraktijken.
  • Modules worden gebruikt om bedrijfslogica te scheiden. Er kunnen meerdere modules worden gemaakt die logisch gescheiden zijn binnen deze verschillende modules.
  • Aan elke AngularJS-module kan zijn eigen set controllers worden gedefinieerd en toegewezen.
  • Bij het definiëren van modules en controllers worden deze normaal gesproken gedefinieerd in afzonderlijke JavaScript-bestanden. Naar deze JavaScript-bestanden wordt vervolgens verwezen in het hoofdtoepassingsbestand.