AngularJS-moduulit

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n moduulit toimivat kontteina, jotka ryhmittelevät ohjaimet, palvelut, direktiivit ja suodattimet yhden loogisen rajan taakse, joten ng-app-direktiivi lataa vain ne toiminnot, joita yksittäinen sivu todella tarvitsee suorituksen aikana.

  • 🔘 Määritelmä: angular.module rekisteröi ja hakee kaikki sovelluksen käyttämät komponentit.
  • ☑️ Creation: Riippuvuustaulukko luo moduulin; sen poisjättäminen noutaa sellaisen.
  • ✅ Bootstrapping: ng-app nimeää moduulin kyseisen alueen kulmakuormituksiksi.
  • 🧪 etäisyys: Moduulikohtaiset ohjaimet välttävät globaaleja nimiä ja ohjainten välisiä yhteenottoja.
  • 📊 Versiohuomautus: AngularJS-tuki päättyi tammikuussa 2022; Angular suosii erillisiä komponentteja.
Lue lisää

AngularJS-moduuliryhmäping ohjaimet, palvelut, direktiivit ja suodattimet yhden ng-sovelluksen rajan alla

Mikä on AngularJS-moduuli?

Moduuli määrittelee sovelluksen toiminnallisuuden, jota sovelletaan koko HTML-sivuun ng-app-direktiivin avulla. Se määrittelee toiminnallisuuden, kuten palvelut, direktiivienja suodattimia tavalla, joka helpottaa niiden uudelleenkäyttöä eri sovelluksissa.

Yllä oleva kuva tiivistää tuon rajan.

Kaikissa aiemmissa opetusohjelmat, olisit varmasti huomannut ng-app-direktiivin, jota käytetään Angular-pääsovelluksesi määrittelemiseen. Tämä on yksi AngularJS:n moduulien keskeisistä käsitteistä.

⚠️ Versiohuomautus: AngularJS-tuki päättyi tammikuussa 2022. Moderni Kulma- käyttää @NgModule-moduulia, ja oletuksena on käytössä erilliset komponentit. Alla oleva koodi on historiallista.

Kuinka luoda moduuli AngularJS: ssä

Ennen kuin aloitamme moduulin tarkastelun, katsotaanpa esimerkkiä AngularJS-sovellus ilman moduulia ja sitten ymmärrät moduulien tarpeen sovelluksessasi.

Tarkastellaanpa tiedoston ”DemoController.js” luomista ja alla olevan koodin lisäämistä 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 suoritamme vain kahden muuttujan a ja b yhteenlaskun ja näiden muuttujien yhteenlaskun määritämme uudelle muuttujalle c ja määritämme sen takaisin muuttujalle c. laajuus esine.

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)

    Liitämme nyt ohjaimen AngularJS-moduuliimme "sampleApp". Tämä tarkoittaa, että jos emme viittaa 'sampleApp'-moduuliin HTML-koodissamme, emme voi viitata ohjaimemme toiminnallisuuteen.

Setteri vastaan ​​getter: angular.module luo moduulin vain, kun riippuvuus taulukko välitetään; ilman sitä kutsu hakee olemassa olevan moduulin.

Pää-HTML-koodimme näyttää nyt alla olevalta

<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 angularjs, kehityksessä käytetty malliping Nykyaikaisten verkkosovellusten ydin on luoda useita moduuleja ja ohjaimia useiden toiminnallisuustasojen loogiseksi erottamiseksi.

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

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

Alla olevassa esimerkissä

  • Luomme tiedoston nimeltä Utilities.js, joka sisältää kaksi moduulia, toisen yhteenlaskun ja toisen alilaskun suorittamiseen.tracseen.
  • Luomme sitten 2 erillistä sovellustiedostoa ja käytämme apuohjelmatiedostoa kustakin sovellustiedostosta.
  • Toisessa sovellustiedostossa käytämme moduulia yhteenlaskua varten ja toisessa moduulia alilaskuja varten.tracseen.

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',[]);

    Luodaan kaksi erillistä AngularJS-moduulia, joista toinen on nimeltään 'AdditionApp' ja toinen 'Sub'.tractionApp'.

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

    Jokaiselle moduulille on määritelty kaksi erillistä ohjainta, toinen on nimeltään DemoAddController ja toinen on DemoSub.tractOhjain. Jokaisella ohjaimella on erillinen logiikka yhteenlaskulle ja alilaskulle.tracnumeroiden jakaminen.

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>

AIHEESEEN LIITTYVÄT ARTIKKELIT

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

    Samalla tavalla teemme sub-tiedostoilletraction funktio.

Vaihe 3) Luo pääsovellustiedostosi. Luodaan tiedosto nimeltä “ApplicationSubtraction.html” ja lisää 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 'Sub'-valikkoatractionApp'-moduuli ja DemoSubtractController käyttämällä ng-app-direktiiviä ja ng-controlleria.

  3. {{d}}

    Koska viittaamme edellä mainittuun moduuliin ja ohjaimeen, voimme viitata $scope.d-muuttujaan lausekkeen kautta. Lauseke on alifunktion tulos.trackahden laajuusmuuttujan a ja b määritys, joka suoritettiin 'DemoSub'-ohjelmassatractController-ohjain

UKK

Taulukon syöttäminen luo moduulin. Sen poisjättäminen noutaa rekisteröidyn moduulin, joten useat tiedostot laajentavat yhtä injektio nimitila.

Ei. AngularJS käynnistää vain ensimmäisen löydetyn ng-sovelluksen; muut moduulit tarvitsevat manuaalisen angular.bootstrap-kutsua elementilleen.

config() suoritetaan palveluntarjoajien rekisteröityessä, joten vain palveluntarjoajat ja vakiot injektoidaan sinne. run() suoritetaan, kun injektori on valmis.

Ng-app-arvo ei vastaa rekisteröityä moduulia. Kirjoitusvirheet, lainausmerkeissä olevat nimet tai moduulitiedoston lataaminen AngularJS:n jälkeen aiheuttavat tämän.

Lataa se angular.mock.module-funktion kautta ja ratkaise sitten ohjaimet inject():llä. Selaintason kattavuus ohjaa sen sijaan sivua, kuten aiemmin on käynyt kohtitracTor.

@NgModule otti haltuunsa Angular 2:ssa, ja itsenäiset komponentit ovat nyt oletusarvoisia ja ne ilmoittavat riippuvuudet omien import-taulukoidensa kautta.

Koneoppimistyökalut lukevat jokaisen angular.module-kutsun, rakentavat riippuvuusgraafin ja luokittelevat moduulit migraatioriskin mukaan. Revkatsojat tarkistavat jokaisen Direktiivi karttaping.

GitHub Copilot ja vastaavat agenttiavustajat lähettävät moduuli-, ohjain- ja tiedostorunkoja yhdestä kehotteesta. Luotu koodi on tarkistettava.

Tiivistä tämä viesti seuraavasti: