Module AngularJS

prin: James Hartman James Hartman
Hours Actualizat

Ce este un modul AngularJS?

Un modul definește funcționalitatea aplicației care este aplicată întregii pagini HTML folosind directiva ng-app. Acesta definește funcționalitatea, cum ar fi serviciile, directivele și filtrele, într-un mod care facilitează reutilizarea în diferite aplicații.

În toate tutorialele noastre anterioare, ați fi observat directiva ng-app folosită pentru a vă defini aplicația principală Angular. Acesta este unul dintre conceptele cheie ale modulelor din Angular.JS.

Cum se creează un modul în AngularJS

Înainte de a începe cu ceea ce este un modul, să ne uităm la 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 la 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 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 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.

Codul nostru HTML principal nu va arăta 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 Angular.JS, modelul utilizat pentru dezvoltarea aplicațiilor web moderne este de a crea mai multe module și controlere pentru a separa logic mai multe niveluri de funcționalitate.

În mod normal, modulele vor fi stocate separat Javascript 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 efectuarea funcționalității de adunare și celălalt pentru efectuarea funcționalității de scădere.
  • 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 scădere.

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',[]);

    Au fost create 2 module unghiulare separate, unul căruia i se dă numele „AdditionApp”, iar al doilea i se numește „SubtractionApp”.

  2. 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 o logică separată pentru adunarea și scăderea numerelor.

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>

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”

    Același mod vom proceda pentru funcția de scădere.

Pas 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

<!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 modulul „SubtractionApp” și DemoSubtractController utilizând directiva ng-app și, respectiv, ng-controller.

  3. {{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 a fost efectuată în „DemoSubtractController” operator de date cu caracter personal,

Rezumat

  • Fără utilizarea modulelor AngularJS, controlerele încep să aibă un domeniu de aplicare global, ceea ce duce la practici proaste de programare.
  • Modulele sunt folosite pentru a separa logica de afaceri. Pot fi create 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.
  • La definirea modulelor și controlerelor, acestea sunt în mod normal definite separat JavaScenariu fișiere. Aceste JavaFișierele script sunt apoi menționate în fișierul principal al aplicației.

Buletin informativ zilnic Guru99

Începe-ți ziua cu cele mai recente și importante știri despre inteligența artificială, livrate chiar acum.