AngularJS moodulid

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i moodulid toimivad konteineritena, mis grupeerivad kontrollerid, teenused, direktiivid ja filtrid ühe loogilise piiri taha, seega laadib ng-app direktiiv ainult need funktsioonid, mida üks leht käitusajal tegelikult vajab.

  • 🔘 Määratlus: angular.module registreerib ja hangib kõik rakenduse kasutatavad komponendid.
  • ☑️ Loomine: Sõltuvusmassiiv loob mooduli; selle väljajätmine toob selle tagasi.
  • ✅ Bootstrapping: ng-app nimetab mooduli selle piirkonna jaoks nurkkoormusteks.
  • 🧪 Eraldamine: Mooduli ulatusega kontrollerid väldivad globaalseid nimesid ja kontrolleritevahelisi kokkupõrkeid.
  • 📊 Versiooni märkus: AngularJS tugi lõppes jaanuaris 2022; Angular eelistab eraldiseisvaid komponente.
Loe rohkem

AngularJS mooduli gruppping kontrollerid, teenused, direktiivid ja filtrid ühe ng-rakenduse piiri all

Mis on AngularJS moodul?

Moodul määratleb rakenduse funktsionaalsuse, mida rakendatakse kogu HTML-lehele ng-app direktiivi abil. See määratleb funktsionaalsuse, näiteks teenused, direktiividja filtreid viisil, mis teeb selle taaskasutamise erinevates rakendustes lihtsaks.

Ülaltoodud illustratsioon võtab selle piiri kokku.

Kõigis meie varasemates õpetused, oleksite kindlasti märganud ng-app direktiivi, mida kasutatakse teie peamise Angulari rakenduse määratlemiseks. See on üks AngularJS-i moodulite põhimõisteid.

⚠️ Versiooni märkus: AngularJS tugi lõppes jaanuaris 2022. Kaasaegne nurgeline kasutab @NgModule'i ja vaikimisi on kasutusel eraldiseisvad komponendid. Allolev kood on ajalooline.

Kuidas AngularJS-is moodulit luua

Enne kui alustame mooduli olemuse selgitamisega, vaatame näidet AngularJS rakendus ilma moodulita ja seejärel mõista moodulite vajadust oma rakenduses.

Vaatleme faili nimega „DemoController.js” loomist ja sellele järgmise koodi lisamist.

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

Ülaltoodud koodis oleme loonud funktsiooni "DemoController", mis hakkab toimima meie rakenduses kontrollerina.

Selles kontrolleris teostame lihtsalt kahe muutuja a ja b liitmise ning määrame nende muutujate liitmise uuele muutujale c ja määrame selle tagasi muutujale c. ulatus objekt

Nüüd loome oma peamise Sample.html-i, millest saab meie peamine rakendus. Sisestame alloleva koodilõigu oma HTML-lehele.

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

Ülaltoodud koodi kaasame oma DemoControlleri ja kutsume seejärel avaldise kaudu välja muutuja $scope.c väärtuse.

Kuid pange tähele meie ng-app direktiivi, sellel on tühi väärtus.

  • See tähendab põhimõtteliselt, et kõikidele kontrolleritele, mida ng-app direktiivi kontekstis kutsutakse, on juurdepääs globaalselt. Puudub piir, mis eraldaks mitu kontrollerit üksteisest.
  • Kaasaegses programmeerimises on see halb tava, et kontrollereid ei ole ühendatud ühegi mooduli külge ja muudab need ülemaailmselt juurdepääsetavaks. Kontrollerite jaoks peab olema defineeritud mingi loogiline piir.

Ja siin tulevadki sisse moodulid. Moodulid kasutatakse piiride eraldamiseks ja abistavad kontrollerite eraldamisel funktsionaalsuse alusel.

Muudame ülaltoodud koodi moodulite juurutamiseks ja ühendame oma kontrolleri selle mooduliga

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

Märgime peamisi erinevusi ülalkirjeldatud koodis

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

    Loome spetsiaalselt AngularJS-i moodulit nimega "sampleApp". See loob loogilise piiri selle mooduli funktsioonidele. Nii et meie ülaltoodud näites on meil moodul, mis sisaldab kontrollerit, mis täidab 2 ulatuseobjekti lisamise rolli. Seega võib meil olla üks moodul, millel on loogiline piir, mis ütleb, et see moodul täidab ainult rakenduse matemaatiliste arvutuste funktsioone.

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

    Nüüd ühendame kontrolleri oma AngularJS mooduliga „sampleApp“. See tähendab, et kui me oma põhi-HTML-koodis moodulile „sampleApp“ ei viita, ei saa me oma kontrolleri funktsionaalsusele viidata.

Setter versus getter: nurgeline.moodul loob mooduli ainult siis, kui sõltuvust Massiiv edastatakse; ilma selleta hangib kutse olemasoleva mooduli.

Meie peamine HTML-kood näeb nüüd välja selline, nagu allpool näidatud

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

Märgime üles peamised erinevused ülalkirjeldatud koodis ja meie eelmises koodis

<body ng-app="sampleApp">

Meie kehasildis

  • Tühja ng-rakenduse direktiivi asemel kutsume nüüd moodulit proovirakenduseks.
  • Sellele rakendusmoodulile helistades pääseme nüüd juurde kontrollerile "DemoController" ja demokontrolleri funktsioonidele.

AngularJS-i moodulid ja kontrollerid

In AngularJS, arenduses kasutatud musterping Tänapäeva veebirakenduste eesmärk on luua mitu moodulit ja kontrollerit, et loogiliselt eraldada mitu funktsionaalsuse taset.

Tavaliselt hoitakse mooduleid eraldi JavaScript failid, mis erineksid põhirakenduse failist.

Vaatame näidet, kuidas seda on võimalik saavutada.

Allolevas näites

  • Loome faili nimega Utilities.js, mis sisaldab kahte moodulit, millest üks täidab liitmise ja teine ​​alamülesannete funktsioone.tracmise kohta.
  • Seejärel loome 2 eraldi rakendusfaili ja pääseme igast rakendusefailist juurde utiliidifailile.
  • Ühes rakenduse failis pääseme ligi liitmismoodulile ja teises alammoodulile.tracmise kohta.

Step 1) Määratlege mitme mooduli ja kontrolleri kood.

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

Märgime ülal kirjutatud koodi põhipunktid

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

    Luuakse kaks eraldi AngularJS moodulit, millest üks saab nimeks „AdditionApp” ja teine ​​„Sub”.tractionApp'.

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

    Iga mooduli jaoks on defineeritud kaks eraldi kontrollerit, üks kannab nime DemoAddController ja teine ​​on DemoSub.tractKontroller. Igal kontrolleril on liitmise ja alamfunktsioonide jaoks eraldi loogika.tracnumbrite tsioon.

Step 2) Looge oma peamised rakendusfailid. Loome faili nimega ApplicationAddition.html ja lisame alloleva 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>
Ära jäta:

Märgime ülal kirjutatud koodi põhipunktid

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

    Viitame oma põhirakenduse failis olevale failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud AngularJS-i moodulitele.

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

    Me pääseme juurde moodulile AdditionApp ja DemoAddControllerile, kasutades ng-app direktiivi ja ng-kontroller võrra.

  3. {{c}}

    Kuna me viitame ülalmainitud moodulile ja kontrollerile, saame avaldise kaudu viidata muutujale $scope.c. Avaldis on 2 ulatuse muutuja a ja b lisamise tulemus, mis viidi läbi kontrolleris 'DemoAddController'

    Samamoodi teeme alamfoorumi puhultractsioonifunktsioon.

Step 3) Looge oma peamised rakenduse failid. Loome faili nimega „ApplicationSubtraction.html” ja lisage allolev kood

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

Märgime ülal kirjutatud koodi põhipunktid

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

    Viitame oma põhirakenduse failis olevale failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud moodulitele.

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

    Me pääseme ligi alammenüületractionApp' moodul ja DemoSubtractController, kasutades vastavalt ng-app direktiivi ja ng-controllerit.

  3. {{d}}

    Kuna me viitame ülalmainitud moodulile ja kontrollerile, saame muutujale $scope.d viidata avaldise kaudu. Avaldis on alamoperaatori tulemus.trackahe ulatusmuutuja a ja b defineerimine, mis viidi läbi 'DemoSub'-istractController'i kontroller

KKK

Massiivi esitamine loob mooduli. Selle väljajätmine annab registreeritud mooduli, seega laiendab üks moodul mitut faili. süst nimeruumi.

Ei. AngularJS käivitab ainult esimese leitud ng-rakenduse; edasised moodulid vajavad oma elemendi käsitsi angular.bootstrap-käsku.

config() käivitub pakkujate registreerimise ajal, seega sinna sisestatakse ainult pakkujad ja konstandid. run() käivitub, kui injektor on valmis.

ng-app väärtus ei vasta ühelegi registreeritud moodulile. Selle põhjuseks on trükivead, jutumärkides nimed või moodulifaili laadimine pärast AngularJS-i.

Laadi see läbi angular.mock.module ja seejärel lahenda kontrollerid inject() abil. Lehekülge juhib hoopis brauseritasemel katvus, nagu varemgi Protractor.

@NgModule võttis selle üle Angular 2-s ja eraldiseisvad komponendid on nüüd vaikimisi, deklareerides sõltuvusi oma impordimassiivi kaudu.

Masinõppe tööriistad loevad iga angular.module'i kõne, koostavad sõltuvusgraafiku ja järjestavad moodulid migratsiooniriski järgi. Revvaatajad kontrollivad igaüht Direktiivi kaartping.

GitHubi koopia ja sarnased agentlikud assistendid väljastavad mooduli, kontrolleri ja faili skelette ühest käsuviibast. Genereeritud kood vajab ülevaatamist.

Võta see postitus kokku järgmiselt: