Module AngularJS

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Modulele din AngularJS acționează ca niște containere care grupează controlere, servicii, directive și filtre în spatele unei limite logice, astfel încât directiva ng-app încarcă doar funcționalitatea de care o singură pagină are nevoie la momentul execuției.

  • 🔘 Definiție: angular.module înregistrează și preia fiecare componentă utilizată de o aplicație.
  • ☑️ Creare: Un tablou de dependențe creează un modul; omiterea acestuia preia unul.
  • ✅ Bootstrapping: ng-app denumește modulul Angular loads pentru regiunea respectivă.
  • 🧪 Separare: Controlerele cu scop de modul evită numele globale și conflictele între controlere.
  • 📊 Notă privind versiunea: Suportul pentru AngularJS s-a încheiat în ianuarie 2022; Angular preferă componentele independente.
Citește mai mult

Grup de module AngularJSping controlere, servicii, directive și filtre sub o singură graniță ng-app

Ce este un modul AngularJS?

Un modul definește funcționalitatea aplicației care se aplică întregii pagini HTML folosind directiva ng-app. Acesta definește funcționalități, cum ar fi serviciile, instrucțiuniși filtre, într-un mod care să faciliteze reutilizarea lor în diferite aplicații.

Ilustrația de mai sus rezumă această limită.

În toate lucrările noastre anterioare tutoriale, ați fi observat directiva ng-app utilizată pentru a defini aplicația Angular principală. Acesta este unul dintre conceptele cheie ale modulelor din AngularJS.

⚠️ Notă privind versiunea: Suportul AngularJS s-a încheiat în ianuarie 2022. Modern Unghiular folosește @NgModule, iar componentele independente sunt implicite. Codul de mai jos este un cod istoric.

Cum se creează un modul în AngularJS

Înainte de a începe cu ce este un modul, haideți să vedem un exemplu de Aplicație AngularJS fără un modul și apoi să înțelegeți necesitatea de a avea module în aplicația dvs.

Să luăm în considerare crearea unui fișier numit „DemoController.js” și adăugarea codului de mai jos în fișier

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

În codul de mai sus, am creat o funcție numită „DemoController” care va acționa ca un controler în aplicația noastră.

În acest controler, efectuăm doar adunarea a 2 variabile a și b și atribuim adunarea acestor variabile unei noi variabile, c, pe care o atribuim înapoi variabilei... domeniu obiect.

Acum să creăm principalul nostru Sample.html, care va fi aplicația noastră principală. Să inserăm fragmentul de cod de mai jos în pagina noastră HTML.

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

În codul de mai sus, includem DemoController și apoi invocăm valoarea variabilei $scope.c printr-o expresie.

Dar observați directiva noastră ng-app, are o valoare goală.

  • Acest lucru înseamnă practic că toate controlerele care sunt apelate în contextul directivei ng-app pot fi accesate la nivel global. Nu există o limită care să separe mai multe controlere unele de altele.
  • Acum, în programarea modernă, aceasta este o practică proastă să nu aibă controlere atașate la niciun modul și să le facă accesibile la nivel global. Trebuie să existe o limită logică definită pentru controlori.

Și aici intervin modulele. Modulele sunt folosite pentru a crea acea separare a granițelor și pentru a ajuta la separarea controlerelor pe baza funcționalității.

Să schimbăm codul de mai sus pentru a implementa module și să atașăm controlerul nostru la acest modul

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

Să notăm diferențele cheie în codul scris mai sus

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

    Creăm în mod special un modul AngularJS numit „sampleApp”. Aceasta va forma o limită logică pentru funcționalitatea pe care o va conține acest modul. Deci, în exemplul nostru de mai sus, avem un modul care conține un controler care îndeplinește rolul de adăugare a 2 obiecte scope. Prin urmare, putem avea un modul cu o limită logică care spune că acest modul va efectua doar funcționalitatea calculelor matematice pentru aplicație.

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

    Acum atașăm controlerul la modulul nostru AngularJS „sampleApp”. Aceasta înseamnă că, dacă nu facem referire la modulul „sampleApp” în codul nostru HTML principal, nu vom putea face referire la funcționalitatea controlerului nostru.

Setter versus getter: unghiular.modul creează un modul numai atunci când dependenţă se transmite un array; fără acesta, apelul preia un modul existent.

Codul nostru HTML principal va arăta acum așa cum se arată mai jos

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

Să notăm diferențele cheie dintre codul scris mai sus și codul nostru anterior

<body ng-app="sampleApp">

În eticheta noastră corporală,

  • În loc să avem o directivă ng-app goală, acum numim modulul sampleApp.
  • Apelând acest modul de aplicație, acum putem accesa controlerul „DemoController” și funcționalitatea prezentă în controlerul demo.

Module și controlere în AngularJS

In AngularJS, modelul folosit pentru dezvoltareping Aplicațiile web moderne constă în crearea mai multor module și controlere pentru a separa logic mai multe niveluri de funcționalitate.

În mod normal, modulele vor fi stocate separat JavaScenariu fișiere, care ar fi diferite de fișierul principal al aplicației.

Să ne uităm la un exemplu despre cum se poate realiza acest lucru.

În exemplul de mai jos,

  • Vom crea un fișier numit Utilities.js care va conține 2 module, unul pentru îndeplinirea funcționalității de adunare și celălalt pentru îndeplinirea funcționalității de sub-modulare.tracTION.
  • Apoi vom crea 2 fișiere de aplicație separate și vom accesa fișierul Utility din fiecare fișier de aplicație.
  • Într-un fișier de aplicație vom accesa modulul pentru adunare, iar în celălalt vom accesa modulul pentru sub-modulare.tracTION.

Pas 1) Definiți codul pentru mai multe module și controlere.

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

Să notăm punctele cheie din codul scris mai sus

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

    Sunt create 2 module AngularJS separate, unul numit „AdditionApp”, iar al doilea numit „Sub”.tractionApp'.

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

    Există 2 controllere separate definite pentru fiecare modul, unul se numește DemoAddController, iar celălalt este DemoSub.tractController. Fiecare controler are o logică separată pentru adunare și subconfigurare.tracțiune de numere.

Pas 2) Creați fișierele principale ale aplicației. Să creăm un fișier numit ApplicationAddition.html și să adăugăm codul de mai jos

<!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>
Nu ratați:

Să notăm punctele cheie din codul scris mai sus

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

    Facem referință la fișierul nostru Utilities.js în fișierul nostru principal de aplicație. Acest lucru ne permite să facem referire la orice module AngularJS definite în acest fișier.

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

    Accesăm modulul „AdditionApp” și DemoAddController utilizând directiva ng-app și ng-controller respectiv.

  3. {{c}}

    Deoarece facem referire la modulul și controlerul menționat mai sus, putem face referire la variabila $scope.c printr-o expresie. Expresia va fi rezultatul adunării celor 2 variabile de domeniu a și b care a fost efectuată în controlerul „DemoAddController”

    La fel cum vom face și pentru subtracfuncția de țiune.

Pas 3) Creați fișierele principale ale aplicației. Să creăm un fișier numit „ApplicationSubtraction.html” și adăugați codul de mai jos

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

Să notăm punctele cheie din codul scris mai sus

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

    Facem referință la fișierul nostru Utilities.js în fișierul nostru principal de aplicație. Acest lucru ne permite să facem referință la orice module definite în acest fișier.

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

    Accesăm „Sub”tracModulul tionApp și DemoSubtractController utilizând directiva ng-app și respectiv ng-controller.

  3. {{d}}

    Întrucât facem referire la modulul și controlerul menționate mai sus, putem face referire la variabila $scope.d prin intermediul unei expresii. Expresia va fi rezultatul subtracțiunea celor 2 variabile de domeniu a și b, care a fost efectuată în 'DemoSubtracControler tController

Întrebări frecvente

Furnizarea matricei creează un modul. Omiterea acesteia preia modulul înregistrat, astfel încât mai multe fișiere extind unul injecție spațiu de nume.

Nu. AngularJS bootează doar prima aplicație ng găsită; modulele ulterioare necesită un apel manual angular.bootstrap pe elementul lor.

config() rulează în timp ce furnizorii se înregistrează, deci doar furnizorii și constantele se injectează acolo. run() se execută odată ce injectorul este gata.

Valoarea ng-app nu se potrivește cu niciun modul înregistrat. Greșelile de scriere, numele între ghilimele sau încărcarea fișierului modulului după AngularJS o cauzează.

Încărcați-l prin angular.mock.module, apoi rezolvați controllerele cu inject(). În schimb, pagina este controlată de acoperirea la nivel de browser, în mod tradițional cu ProtracTdR.

@NgModule a preluat controlul în Angular 2, iar componentele independente sunt acum implicite, declarând dependențele prin propriul array imports.

Instrumentele de învățare automată citesc fiecare apel angular.module, construiesc un grafic de dependențe și clasifică modulele în funcție de riscul de migrare. RevVizualizatorii verifică fiecare directivă Hartăping.

Copilotul GitHub și asistenți agenți similari emit schelete de module, controlere și fișiere dintr-un singur prompt. Codul generat necesită revizuire.

Rezumați această postare cu: