AngularJS-moduulit

by: James Hartman James Hartman
Hours Päivitetty

Mikä on AngularJS-moduuli?

Moduuli määrittelee sovelluksen toiminnallisuuden, jota sovelletaan koko HTML-sivulle ng-app-direktiivin avulla. Se määrittelee toiminnallisuudet, kuten palvelut, käskyt ja suodattimet, tavalla, jonka avulla sitä on helppo käyttää uudelleen eri sovelluksissa.

Kaikissa aiemmissa opetusohjelmissamme olisit huomannut ng-app-direktiivin, jota käytetään pääasiallisen Angular-sovelluksesi määrittämiseen. Tämä on yksi Angular.JS:n moduulien keskeisistä käsitteistä.

Kuinka luoda moduuli AngularJS: ssä

Ennen kuin aloitamme moduulin kanssa, katsotaanpa esimerkkiä AngularJS-sovelluksesta ilman moduulia ja ymmärretään sitten moduulien tarve sovelluksessasi.

Harkitsemme tiedoston luomista nimeltä "DemoController.js" ja lisäämällä alla oleva koodi tiedostoon

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

Yllä olevaan koodiin olemme luoneet toiminnon nimeltä "DemoController", joka toimii ohjaimena sovelluksessamme.

Tässä ohjaimessa lisäämme vain 2 muuttujaa a ja b ja lisäämme nämä muuttujat uuteen muuttujaan c ja määritämme sen takaisin laajuusobjektiin.

Luodaan nyt pääasiallinen Sample.html, josta tulee pääsovelluksemme. Lisätään alla oleva koodinpätkä HTML-sivullemme.

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

Yllä olevaan koodiin sisällytämme DemoControllerimme ja kutsumme sitten $scope.c-muuttujan arvon lausekkeen kautta.

Mutta huomaa ng-app-direktiivimme, sillä on tyhjä arvo.

  • Tämä tarkoittaa pohjimmiltaan sitä, että kaikki ng-app-direktiivin puitteissa kutsutut ohjaimet ovat käytettävissä maailmanlaajuisesti. Ei ole rajaa, joka erottaisi useita ohjaimia toisistaan.
  • Nykypäivän ohjelmoinnissa tämä on huono käytäntö, että ohjaimia ei ole liitetty mihinkään moduuleihin ja tehdä niistä maailmanlaajuisesti saatavilla. Jokin looginen raja on määriteltävä ohjaimille.

Ja tässä moduulit tulevat käyttöön. Moduuleja käytetään luomaan tuo rajojen erottelu ja auttamaan ohjaimien erottamisessa toiminnallisuuden perusteella.

Muutetaan yllä oleva koodi moduulien toteuttamiseksi ja liitetään ohjain tähän moduuliin

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

Huomioikaa yllä kirjoitetun koodin keskeiset erot

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

    Olemme luomassa erityisesti AngularJS-moduulia nimeltä "sampleApp". Tämä muodostaa loogisen rajan tämän moduulin sisältämille toiminnoille. Joten yllä olevassa esimerkissämme meillä on moduuli, joka sisältää ohjaimen, joka suorittaa 2 laajuusobjektin lisäämisen roolin. Näin ollen meillä voi olla yksi moduuli, jolla on looginen raja, joka sanoo, että tämä moduuli suorittaa vain sovelluksen matemaattisten laskelmien toiminnot.

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

    Kiinnitämme nyt ohjaimen AngularJS-moduuliimme “SampleApp”. Tämä tarkoittaa, että jos emme viittaa moduuliin "sampleApp" pääHTML-koodissamme, emme voi viitata ohjaimemme toimivuuteen.

PääHTML-koodimme ei näytä alla esitetyltä

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

Huomioi tärkeimmät erot yllä kirjoitetussa koodissa ja edellisessä koodissamme

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

Kehotunnisteessamme

  • Sen sijaan, että meillä olisi tyhjä ng-app-direktiivi, kutsumme nyt moduulia sampleApp:ksi.
  • Kutsumalla tätä sovellusmoduulia voimme nyt käyttää ohjainta "DemoController" ja demo-ohjaimen toimintoja.

Moduulit ja ohjaimet AngularJS:ssä

In Kulmikas.JS, nykyajan web-sovellusten kehittämisessä käytetty malli on luoda useita moduuleja ja ohjaimia eri toimintotasojen loogisesti erottamiseksi.

Normaalisti moduulit säilytetään erillään Javascript tiedostot, jotka olisivat erilaisia ​​kuin pääsovellustiedosto.

Katsotaanpa esimerkkiä, kuinka tämä voidaan saavuttaa.

Alla olevassa esimerkissä

  • Luomme Utilities.js-nimisen tiedoston, joka sisältää 2 moduulia, joista toinen suorittaa yhteenlaskutoiminnon ja toinen vähennystoiminnon suorittamista varten.
  • Luomme sitten 2 erillistä sovellustiedostoa ja käytämme apuohjelmatiedostoa kustakin sovellustiedostosta.
  • Yhdessä sovellustiedostossa käytämme moduulia yhteenlaskua varten ja toisessa moduulia vähennyslaskua varten.

Vaihe 1) Määritä koodi useille moduuleille ja ohjaimille.

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

Huomioikaa yllä kirjoitetun koodin avainkohdat

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

    On luotu 2 erillistä Angular Module -moduulia, joista toinen on nimeltään "AdditionApp" ja toinen "SubtractionApp".

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

    Jokaiselle moduulille on määritetty 2 erillistä ohjainta, joista toista kutsutaan DemoAddControlleriksi ja toista DemoSubtractControlleriksi. Jokaisella ohjaimella on erillinen logiikka lukujen yhteen- ja vähennyslaskua varten.

Vaihe 2) Luo tärkeimmät sovellustiedostot. Luodaan tiedosto nimeltä ApplicationAddition.html ja lisätään alla oleva koodi

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

Huomioikaa yllä kirjoitetun koodin avainkohdat

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

    Viitaamme Utilities.js-tiedostoomme pääsovellustiedostossamme. Tämän avulla voimme viitata mihin tahansa tässä tiedostossa määritettyihin AngularJS-moduuleihin.

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

    Pääsemme AdditionApp-moduuliin ja DemoAddControlleriin käyttämällä ng-app-direktiiviä ja ng-ohjain vastaavasti.

  3. {{c}}

    Koska viittaamme edellä mainittuun moduuliin ja ohjaimeen, voimme viitata $scope.c-muuttujaan lausekkeen kautta. Lauseke on tulos kahden laajuusmuuttujan a ja b lisäämisestä, jotka suoritettiin 'DemoAddController'-ohjaimessa

    Samoin teemme vähennysfunktiolle.

Vaihe 3) Luo tärkeimmät sovellustiedostot. Luodaan tiedosto nimeltä "ApplicationSubtraction.html" ja lisätään alla oleva koodi

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

Huomioikaa yllä kirjoitetun koodin avainkohdat

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

    Viitaamme Utilities.js-tiedostoomme pääsovellustiedostossamme. Tämän avulla voimme viitata mihin tahansa tässä tiedostossa määritettyihin moduuleihin.

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

    Käytämme SubtractionApp-moduulia ja DemoSubtractController-ohjelmaa käyttämällä ng-app-direktiiviä ja vastaavasti ng-ohjainta.

  3. {{d}}

    Koska viittaamme edellä mainittuun moduuliin ja ohjaimeen, voimme viitata muuttujaan $scope.d lausekkeen kautta. Lauseke on tulos kahden laajuusmuuttujan a ja b vähentämisestä, jotka suoritettiin "DemoSubtractController" ohjain

Yhteenveto

  • Ilman AngularJS-moduuleita ohjaimilla alkaa olla globaali ulottuvuus, mikä johtaa huonoihin ohjelmointikäytäntöihin.
  • Moduuleita käytetään erottamaan liiketoimintalogiikka. Useita moduuleja voidaan luoda loogisesti erillään näiden eri moduulien sisällä.
  • Jokaisella AngularJS-moduulilla voi olla omat ohjaimet, jotka on määritetty ja määritetty sille.
  • Moduuleja ja ohjaimia määriteltäessä ne määritellään normaalisti erikseen JavaKäsikirjoitus tiedostot. Nämä JavaKomentosarjatiedostoihin viitataan sitten pääsovellustiedostossa.

Tiivistä tämä viesti seuraavasti: