Ce este un modul AngularJS?
Un modul definește funcționalitatea aplicației care se aplică întregii pagini HTML utilizând directiva ng-app. Acesta definește funcționalitatea, cum ar fi serviciile, directivele și filtrele, într-un mod care facilitează reutilizarea acesteia în diferite aplicații.
În toate tutorialele noastre anterioare, ați fi observat directiva ng-app folosită pentru a defini aplicația dvs. angulară principală. Acesta este unul dintre conceptele cheie ale modulelor din Angular.JS.
În acest tutorial, veți învăța-
- Cum se creează un modul în AngularJS
- Module și controlere
Cum se creează un modul în AngularJS
Înainte de a începe cu ceea ce este un modul, să analizăm un exemplu de aplicație AngularJS fără modul și apoi să înțelegem 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 cadrul aplicației noastre.
În acest controler, efectuăm doar adăugarea a 2 variabile a și b și atribuim adăugarea acestor variabile unei noi variabile, c și o atribuim înapoi obiectului scop.
Acum să creăm Sample.html principal, care va fi aplicația noastră principală. Să introducem fragmentul de cod de mai jos în pagina noastră HTML.
Eveniment global Guru99
{{c}}În codul de mai sus, includem DemoController-ul nostru și apoi invocăm valoarea variabilei $ scope.c printr-o expresie.
Dar observați directiva noastră ng-app, are o valoare necompletată.
- Aceasta înseamnă practic că toate controlerele care sunt apelate în contextul directivei ng-app pot fi accesate la nivel global. Nu există nicio graniță care să separe mai multe controlere între ele.
- Acum, în programarea modernă, aceasta este o practică proastă de a avea controlere care nu sunt atașate la niciun modul și care le fac accesibile la nivel global. Trebuie să existe o limită logică definită pentru controlere.
Și aici intervin modulele. Modulele sunt utilizate pentru a crea acea separare a limitelor și 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ă observăm diferențele cheie în codul scris mai sus
var sampleApp = angular.module('sampleApp',[]);Creăm în mod special un modul AngularJS numit „sampleApp”. Aceasta va forma o graniță 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 scop. Prin urmare, putem avea un modul cu o delimitare logică care spune că acest modul va efectua doar funcționalitatea calculelor matematice pentru aplicație.
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.
Codul nostru HTML principal nu va arăta așa cum se arată mai jos
Guru99 Global Event
{{c}}Să observăm diferențele cheie în codul scris mai sus și codul nostru anterior
În eticheta corpului nostru,
- În loc să avem o directivă ng-app goală, apelăm acum modulul sampleApp.
- Apelând acest modul de aplicație, putem accesa acum controlerul „DemoController” și funcționalitatea prezentă în controlerul demo.
Module și controlere
În Angular.JS, modelul utilizat pentru dezvoltarea aplicațiilor web moderne este crearea de module și controlere multiple pentru a separa logic mai multe niveluri de funcționalitate.
În mod normal, modulele vor fi stocate în fișiere Javascript separate, care ar fi diferite de fișierul principal al aplicației.
Să ne uităm la un exemplu de 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 realizarea funcționalității adunării și celălalt pentru realizarea funcționalității scăderii.
- Vom crea apoi 2 fișiere de aplicații 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 adăugare și în celălalt, vom accesa modulul pentru scădere.
Pasul 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
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Există 2 module unghiulare separate create, unul care primește numele „AdditionApp”, iar al doilea este denumit „SubtractionApp”.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Există 2 controlere separate definite pentru fiecare modul, unul se numește DemoAddController și celălalt este DemoSubtractController. Fiecare controler are logică separată pentru adunarea și scăderea numerelor.
Pasul 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
Addition Addition :{{c}}Să notăm punctele cheie din codul scris mai sus
Ne referim la fișierul nostru Utilities.js în fișierul nostru principal al aplicației. Acest lucru ne permite să referim orice module AngularJS definite în acest fișier.
Accesăm modulul „AdditionApp” și DemoAddController utilizând directiva ng-app și respectiv ng-controller.
{{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 adăugării celor 2 variabile de domeniu a și b care au fost efectuate în controlerul „DemoAddController”
La fel vom face și pentru funcția de scădere.
Pasul 3) Creați fișierele principale ale aplicației. Să creăm un fișier numit „ApplicationSubtraction.html” și să adăugăm codul de mai jos
Addition Subtraction :{{d}}Să notăm punctele cheie din codul scris mai sus
Ne referim la fișierul nostru Utilities.js în fișierul nostru principal al aplicației. Acest lucru ne permite să referim orice module definite în acest fișier.
Accesăm modulul „SubtractionApp și DemoSubtractController utilizând directiva ng-app și respectiv ng-controller.
{{d}}Deoarece facem referire la modulul și controlerul menționat mai sus, putem face referire la variabila $ scope.d printr-o expresie. Expresia va fi rezultatul scăderii celor 2 variabile de domeniu a și b care au fost efectuate în controlerul „DemoSubtractController”
rezumat
- Fără utilizarea modulelor AngularJS, controlerele încep să aibă un domeniu global care duce la practici proaste de programare.
- Modulele sunt utilizate pentru a separa logica de afaceri. Se pot crea mai multe module pentru a fi separate logic în cadrul acestor module diferite.
- Fiecare modul AngularJS poate avea propriul set de controlere definite și atribuite acestuia.
- Când se definesc module și controlere, acestea sunt definite în mod normal în fișiere JavaScript separate. Aceste fișiere JavaScript sunt apoi menționate în fișierul principal al aplicației.