Mikä on AngularJS-moduuli?
Moduuli määrittelee sovellustoiminnot, joita käytetään koko HTML-sivulla ng-app-direktiivillä. Se määrittelee toiminnallisuuden, kuten palvelut, direktiivit ja suodattimet, tavalla, joka helpottaa sen uudelleenkäyttöä eri sovelluksissa.
Kaikissa aiemmissa oppaissamme olisit huomannut ng-app-direktiivin, jota käytetään määrittämään pääkulmasovelluksesi. Tämä on yksi Angular.JS-moduulien keskeisistä käsitteistä.
Tässä opetusohjelmassa opit-
- Kuinka luoda moduuli AngularJS: ssä
- Moduulit ja ohjaimet
Kuinka luoda moduuli AngularJS: ssä
Ennen kuin aloitamme moduulilla, katsotaanpa esimerkki AngularJS-sovelluksesta ilman moduulia ja ymmärretään sitten tarve pitää moduulit sovelluksessasi.
Harkitaan 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 lisäämisen ja osoitamme näiden muuttujien lisäämisen uudelle muuttujalle c ja osoitamme sen takaisin laajuusobjektille.
Luodaan nyt tärkein Sample.html, joka on tärkein sovelluksemme. Lisätään alla oleva koodinpätkä HTML-sivuillemme.
Guru99: n maailmanlaajuinen tapahtuma
{{c}}Yllä olevaan koodiin sisällytämme DemoController-sovelluksemme ja kutsumme sitten $ scope.c -muuttujan arvon lausekkeen avulla.
Huomaa kuitenkin ng-app-direktiivimme, sillä sillä on tyhjä arvo.
- Tämä tarkoittaa periaatteessa, että kaikkiin ohjaimiin, joihin kutsutaan ng-app-direktiivin yhteydessä, pääsee käsiksi maailmanlaajuisesti. Ei ole rajaa, joka erottaisi useita ohjaimia toisistaan.
- Nykypäivän ohjelmoinnissa tämä on huono käytäntö, jos ohjaimia ei ole liitetty mihinkään moduuliin, mikä tekee niistä maailmanlaajuisesti käytettävissä. Ohjaimille on määritettävä jokin looginen raja.
Ja tässä moduulit tulevat sisään. Moduuleja käytetään luomaan tuo rajojen erotus ja auttamaan ohjaimien erottamisessa toiminnallisuuden perusteella.
Vaihdetaan yllä oleva koodi moduulien toteuttamiseksi ja kiinnitetää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;});Otetaan huomioon keskeiset erot yllä kirjoitetussa koodissa
var sampleApp = angular.module('sampleApp',[]);Luomme nimenomaan AngularJS-moduulin nimeltä "sampleApp". Tämä muodostaa loogisen rajan toiminnoille, joita tämä moduuli sisältää. Joten yllä olevassa esimerkissä meillä on moduuli, joka sisältää ohjaimen, joka suorittaa kahden laajuusobjektin lisäämisen roolin. Siksi meillä voi olla yksi moduuli, jolla on looginen raja, joka sanoo, että tämä moduuli suorittaa vain sovelluksen matemaattisten laskelmien toiminnot.
sampleApp.controller('DemoController', function($scope)Kiinnitämme ohjaimen nyt AngularJS-moduuliin "SampleApp". Tämä tarkoittaa sitä, että jos emme viittaa moduuliin 'sampleApp' pää HTML-koodissamme, emme voi viitata ohjaimen toimintoihin.
Pää HTML-koodimme ei näytä olevan alla esitetty
Guru99 Global Event
{{c}}Otetaan huomioon keskeiset erot yllä kirjoitetussa koodissa ja edellisessä koodissamme
Kehomme tagissa,
- Sen sijaan, että meillä olisi tyhjä ng-app-direktiivi, kutsumme nyt moduulia sampleApp.
- Soittamalla tälle sovellusmoduulille voimme nyt käyttää ohjainta 'DemoController' ja demo-ohjaimessa olevia toimintoja.
Moduulit ja ohjaimet
Angular.JS: ssä nykypäivän verkkosovellusten kehittämiseen käytetty malli on luoda useita moduuleja ja ohjaimia erilaisten toiminnallisuustasojen loogiseksi erottamiseksi.
Normaalisti moduulit tallennetaan erillisiin Javascript-tiedostoihin, jotka poikkeavat sovelluksen päätiedostosta.
Katsotaanpa esimerkkiä siitä, miten tämä voidaan saavuttaa.
Alla olevassa esimerkissä
- Luomme Utilities.js-nimisen tiedoston, johon mahtuu 2 moduulia, joista toinen suoritetaan lisäyksen toiminnalle ja toinen vähennyksen toiminnalle.
- Aiomme sitten luoda 2 erillistä sovellustiedostoa ja käyttää Utility-tiedostoa kustakin sovellustiedostosta.
- Yhdessä sovellustiedostossa pääsemme moduuliin lisäämistä varten ja toisessa - vähennettäväksi moduuliin.
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;});Otetaan huomioon avainkohdat yllä kirjoitetussa koodissa
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Luotu on 2 erillistä kulmamoduulia, joista yhdelle annetaan nimi 'AdditionApp' ja toiselle nimi 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Jokaiselle moduulille on määritelty 2 erillistä ohjainta, joista toinen on nimeltään DemoAddController ja toinen on DemoSubtractController. Jokaisella ohjaimella on erillinen logiikka numeroiden yhteenlaskemista ja vähentämistä varten.
Vaihe 2) Luo tärkeimmät sovellustiedostot. Luodaan tiedosto nimeltä ApplicationAddition.html ja lisätään alla oleva koodi
Addition Addition :{{c}}Otetaan huomioon avainkohdat yllä kirjoitetussa koodissa
Viittaamme Utilities.js -tiedostoon pääsovellustiedostossamme. Tämän avulla voimme viitata kaikkiin tässä tiedostossa määriteltyihin AngularJS-moduuleihin.
Pääset AdditionApp-moduuliin ja DemoAddControlleriin vastaavasti ng-app-direktiivillä ja ng-controller-ohjaimella.
{{c}}Koska viittaamme edellä mainittuun moduuliin ja ohjaimeen, voimme viitata muuttujaan $ scope.c lausekkeen avulla. Lauseke on tulosta kahden laajuusmuuttujan a ja b lisäyksestä, joka suoritettiin 'DemoAddController' -ohjaimessa
Samoin kuin teemme vähennysfunktiolle.
Vaihe 3) Luo tärkeimmät sovellustiedostot. Luodaan tiedosto nimeltä "ApplicationSubtraction.html" ja lisätään alla oleva koodi
Addition Subtraction :{{d}}Otetaan huomioon avainkohdat yllä kirjoitetussa koodissa
Viittaamme Utilities.js -tiedostoon pääsovellustiedostossamme. Tämän avulla voimme viitata kaikkiin tässä tiedostossa määriteltyihin moduuleihin.
Pääset SubtractionApp-moduuliin ja DemoSubtractControlleriin vastaavasti ng-app-direktiivillä ja ng-controller-ohjaimella.
{{d}}Koska viittaamme yllä mainittuun moduuliin ja ohjaimeen, voimme viitata muuttujaan $ scope.d lausekkeen avulla. Lauseke on tulos 2 laajuusmuuttujan a ja b vähentämisestä, joka suoritettiin 'DemoSubtractController' -ohjaimessa
Yhteenveto
- Ilman AngularJS-moduuleja ohjaimilla on maailmanlaajuinen laajuus, mikä johtaa huonoon ohjelmointikäytäntöön.
- Moduuleja käytetään erillään liiketoimintalogiikkaa. Useita moduuleja voidaan luoda loogisesti eroteltuina näiden eri moduulien sisällä.
- Jokaisella AngularJS-moduulilla voi olla oma joukko ohjaimia, jotka on määritelty ja osoitettu sille.
- Moduuleja ja ohjaimia määritettäessä ne määritellään yleensä erillisissä JavaScript-tiedostoissa. Näihin JavaScript-tiedostoihin viitataan sitten sovelluksen päätiedostossa.