AngularJS moduli

By: James Hartman James Hartman
Hours Ažurirano

⚡ Pametni sažetak

Moduli u AngularJS-u djeluju kao spremnici koji grupiraju kontrolere, servise, direktive i filtere iza jedne logičke granice, tako da direktiva ng-app učitava samo funkcionalnosti koje jedna stranica zapravo treba tijekom izvođenja.

  • 🔘 Definicija: angular.module registrira i dohvaća svaku komponentu koju aplikacija koristi.
  • ☑️ Stvaranje: Niz ovisnosti stvara modul; izostavljanjem se dohvaća jedan.
  • ✅ Bootstrapping: ng-app imenuje modul Kutna opterećenja za to područje.
  • 🧪 odvajanje: Kontroleri s opsegom modula izbjegavaju globalna imena i sukobe među kontrolerima.
  • 📊 Napomena o verziji: Podrška za AngularJS završila je u siječnju 2022.; Angular preferira samostalne komponente.
Pročitaj više

AngularJS modul grupaping kontroleri, servisi, direktive i filteri pod jednom ng-app granicom

Što je AngularJS modul?

Modul definira funkcionalnost aplikacije koja se primjenjuje na cijelu HTML stranicu pomoću direktive ng-app. Definira funkcionalnosti, kao što su usluge, direktivei filtere na način koji olakšava njihovu ponovnu upotrebu u različitim aplikacijama.

Gornja ilustracija sažima tu granicu.

U svim našim ranijim tutoriali, primijetili ste direktivu ng-app koja se koristi za definiranje vaše glavne Angular aplikacije. Ovo je jedan od ključnih koncepata modula u AngularJS-u.

⚠️ Napomena o verziji: Podrška za AngularJS završila je u siječnju 2022., moderan Kutni koristi @NgModule, a samostalne komponente su mu zadane. Donji kod je povijesni.

Kako stvoriti modul u AngularJS

Prije nego što počnemo s time što je modul, pogledajmo primjer AngularJS aplikacija bez modula, a zatim razumjeti potrebu za modulima u vašoj aplikaciji.

Razmotrimo stvaranje datoteke pod nazivom „DemoController.js“ i dodavanje donjeg koda u datoteku

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

U gornjem kodu stvorili smo funkciju pod nazivom "DemoController" koja će djelovati kao kontroler unutar naše aplikacije.

U ovom kontroleru samo vršimo zbrajanje 2 varijable a i b te dodjeljujemo zbrajanje tih varijabli novoj varijabli c, a zatim je dodjeljujemo natrag djelokrug objekt.

Kreirajmo sada naš glavni Sample.html, koji će biti naša glavna aplikacija. Umetnimo donji isječak koda u našu HTML stranicu.

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

U gornjem kodu uključujemo naš DemoController, a zatim pozivamo vrijednost varijable $scope.c putem izraza.

Ali primijetite da naša direktiva ng-app ima praznu vrijednost.

  • To u osnovi znači da se svim kontrolerima koji se pozivaju unutar konteksta direktive ng-app može pristupiti globalno. Ne postoji granica koja razdvaja više kontrolera jedne od drugih.
  • Sada je u modernom programiranju loša praksa imati upravljače koji nisu priključeni ni na jedan modul i učiniti ih globalno dostupnima. Mora postojati neka logična granica definirana za kontrolere.

I tu na scenu stupaju moduli. Moduli se koriste za stvaranje tog odvajanja granica i pomažu u odvajanju kontrolera na temelju funkcionalnosti.

Promijenimo gornji kod da implementiramo module i pripojimo naš kontroler ovom modulu

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

Zabilježimo ključne razlike u gore napisanom kodu

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

    Posebno stvaramo AngularJS modul pod nazivom 'sampleApp'. To će oblikovati logičnu granicu za funkcionalnost koju će ovaj modul sadržavati. Dakle, u našem gornjem primjeru imamo modul koji sadrži kontroler koji obavlja ulogu dodavanja 2 objekta opsega. Dakle, možemo imati jedan modul s logičkom granicom koja kaže da će ovaj modul obavljati samo funkcionalnost matematičkih izračuna za aplikaciju.

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

    Sada pridružujemo kontroler našem AngularJS modulu "sampleApp". To znači da ako ne referenciramo modul 'sampleApp' u našem glavnom HTML kodu, nećemo moći referencirati funkcionalnost našeg kontrolera.

Postavljač nasuprot primatelju: kutni.modul kreira modul samo kada je zavisnost prosljeđuje se niz; bez njega poziv dohvaća postojeći modul.

Naš glavni HTML kod sada će izgledati kao što je prikazano dolje

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

Zabilježimo ključne razlike u gore napisanom kodu i našem prethodnom kodu

<body ng-app="sampleApp">

U našoj oznaci tijela,

  • Umjesto prazne direktive ng-app, sada nazivamo modul sampleApp.
  • Pozivanjem ovog aplikacijskog modula sada možemo pristupiti kontroleru 'DemoController' i funkcionalnosti prisutne u demo kontroleru.

Moduli i kontroleri u AngularJS

In AngularJS, uzorak koji se koristi za razvojping Suština modernih web aplikacija je stvaranje više modula i kontrolera za logičko odvajanje više razina funkcionalnosti.

Moduli se obično pohranjuju zasebno JavaScript datoteke, koje bi se razlikovale od glavne aplikacijske datoteke.

Pogledajmo primjer kako se to može postići.

U donjem primjeru,

  • Napravit ćemo datoteku pod nazivom Utilities.js koja će sadržavati 2 modula, jedan za izvršavanje funkcionalnosti zbrajanja i drugi za izvršavanje funkcionalnosti podračuna.traction.
  • Zatim ćemo stvoriti 2 zasebne aplikacijske datoteke i pristupiti Utility datoteci iz svake aplikacijske datoteke.
  • U jednoj aplikacijskoj datoteci pristupit ćemo modulu za zbrajanje, a u drugoj ćemo pristupiti modulu za pod-naloge.traction.

Korak 1) Definirajte kod za više modula i kontrolera.

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

Zabilježimo ključne točke u gore napisanom kodu

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

    Kreirana su dva odvojena AngularJS modula, jedan nazvan 'AdditionApp', a drugi nazvan 'Sub'.tractionApp'.

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

    Za svaki modul definirana su 2 odvojena kontrolera, jedan se zove DemoAddController, a drugi DemoSub.tractController. Svaki kontroler ima zasebnu logiku za zbrajanje i podračunavanjetraccija brojeva.

Korak 2) Izradite svoje glavne aplikacijske datoteke. Kreirajmo datoteku pod nazivom ApplicationAddition.html i dodamo donji kod

<!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>
Ne propustite:

Zabilježimo ključne točke u gore napisanom kodu

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

    Referenciramo našu datoteku Utilities.js u našoj glavnoj aplikacijskoj datoteci. To nam omogućuje referenciranje bilo kojeg AngularJS modula definiranog u ovoj datoteci.

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

    Modulu 'AdditionApp' i DemoAddControlleru pristupamo pomoću direktive ng-app i ng-kontroler odnosno.

  3. {{c}}

    Budući da se pozivamo na gore spomenuti modul i kontroler, možemo referencirati varijablu $scope.c putem izraza. Izraz će biti rezultat dodavanja 2 varijable opsega a i b koje je izvršeno u kontroleru 'DemoAddController'

    Na isti način ćemo učiniti i za subtracciona funkcija.

Korak 3) Izradite glavne datoteke aplikacije. Izradimo datoteku pod nazivom „ApplicationSubtraction.html” i dodajte donji kod

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

Zabilježimo ključne točke u gore napisanom kodu

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

    Referenciramo našu datoteku Utilities.js u našoj glavnoj aplikacijskoj datoteci. To nam omogućuje referenciranje bilo kojeg modula definiranog u ovoj datoteci.

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

    Pristupamo 'Sub'tractionApp' modul i DemoSubtractController korištenjem direktive ng-app i ng-controller.

  3. {{d}}

    Budući da referenciramo gore spomenuti modul i kontroler, možemo referencirati varijablu $scope.d putem izraza. Izraz će biti rezultat podnaredbetraccija dviju varijabli opsega a i b koja je provedena u 'DemoSub'-utracKontroler tControllera

Pitanja i odgovori

Navođenjem niza stvara se modul. Izostavljanjem se dohvaća registrirani modul, pa nekoliko datoteka proširuje jedan ubrizgavanje prostor imena.

Ne. AngularJS bootstrap-uje samo prvu pronađenu ng-aplikaciju; daljnji moduli trebaju ručni poziv angular.bootstrap na svom elementu.

config() se izvršava dok se provideri registriraju, tako da se tamo ubrizgavaju samo provideri i konstante. run() se izvršava kada je injektor spreman.

Vrijednost ng-app ne odgovara nijednom registriranom modulu. To uzrokuju tipografske pogreške, navodnici ili učitavanje datoteke modula nakon AngularJS-a.

Učitajte ga putem angular.mock.module, a zatim razriješite kontrolere pomoću inject(). Pokrivenost na razini preglednika umjesto toga pokreće stranicu, povijesno s PROtrachumka.

@NgModule preuzeo je u Angularu 2, a samostalne komponente su sada zadane, deklarirajući ovisnosti putem vlastitog niza imports.

Alati za strojno učenje čitaju svaki poziv angular.module, grade graf ovisnosti i rangiraju module prema riziku migracije. RevPregledači provjeravaju svaki Direktiva kartaping.

GitHub kopilot i slični agentski asistenti emitiraju kosture modula, kontrolera i datoteka iz jednog prompta. Generirani kod treba pregledati.

Sažmite ovu objavu uz: