model de Design nu este altceva decât un mod de întreținere și reutilizabile de cod scris, care pot fi aplicate la problemele care apar frecvent. Există numeroase modele de design, cum ar fi MVC, MVVM, DI etc. Depinde de problema pe care modelul de design trebuie să fie urmat.

acest blog pune accentul pe modelele de design MVC și MVVM cu referire la AngularJS.

Să începem:

model de Design MVC

pentru a începe cu, model de design MVC nu este specific AngularJS, trebuie să fi văzut / implementat acest model în multe alte limbaje de programare.

model de design MVC poate fi văzut în AngularJS, dar înainte de a intra în care să vedem ce face toate MVC model de design include:

  1. Model: modelul nu este altceva decât date.
  2. View: View reprezintă aceste date.
  3. controler: controlerul mediază între cele două.

să vedem codul de mai jos:

<!DOCTYPE html><html ng-app><head> <title>MVC</title> <script type="text/javascript" src="angular.min.js"></script></head><body ng-controller="TextController"><p></p></body><script> function TextController($scope) { $scope.sampleText = 'This is a demo!'; }</script></html>

în fragmentul de mai sus, textul nostru este reprezentat de variabila „sampleText”. Acesta este modelul nostru. Controlerul actualizează vizualizarea prin afișarea datelor din vizualizare prin înlocuirea „” cu valoarea variabilei sampleText. Este controlerul care gestionează relația dintre modelul nostru și vizualizarea care este HTML.

în MVC dacă vom face orice modificare în vizualizarea nu se actualizează în model. Dar, în AngularJS, am auzit că există ceva numit 2-way obligatoriu și această legare 2-way permite model de design MVVM. MVVM include practic 3 lucruri:

  1. Model
  2. View
  3. View Model

controlerul este de fapt înlocuit cu modelul de vizualizare în modelul de proiectare MMVM. Vezi modelul nu este altceva decât o funcție JavaScript, care este din nou ca un controler și este responsabil pentru menținerea relației dintre vedere și model, dar diferența aici este, dacă vom actualiza ceva în vedere, acesta devine actualizat în model, schimba nimic în model, apare în vedere, care este ceea ce noi numim 2-way obligatoriu.

să vedem exemplul de mai jos:

<!DOCTYPE html><html ng-app><head> <title>Number Divisor</title> <script type="text/javascript" src="angular.min.js"></script></head><body><form ng-controller="DivisionController"> <label>Number :</label> <input name="number" ng-change="divisionNeeded()" ng-model="data.number"> <label>Number entered by User :</label> <br> <label>Divisor :</label> <input name="divisor" ng-change="divisionNeeded()" ng-model="data.divisor"> <label>Number entered by User :</label> <br> <label>Result :</label> </form></body><script> function DivisionController($scope) { $scope.data = {number: 0, divisor: 0, result: 0}; $scope.divisionNeeded = function () { $scope.data.result = $scope.data.number / $scope.data.divisor; } }</script></html>

codul de mai sus conține 2 cutii de intrare care ia număr și un divizor pentru a împărți acel număr. Rezultatul divizării este afișat în fața etichetei ‘rezultat’.

De asemenea, orice este introdus în aceste două casete de intrare este afișat în fața casetei de intrare în sine. Acest cod arată foarte clar modelul de proiectare MVVM în JavaScript, aici vedeți cum:

MVVM.jpg

diagrama de mai sus separă codul în Model, vizualizare și vizualizare Model.

sunt primul care începe cu vedere. Știm că vizualizarea este HTML-ul nostru,așa că îl actualizăm introducând ‘6’ în caseta de text număr și ‘3’ în caseta de text divizor. De îndată ce se face orice modificare în vizualizarea, Vezi modelul ajunge să știe despre ea, iar aceste valori sunt apoi actualizate în modelul. În afară de aceasta, lucrarea principală este că se întâmplă în vedere modelul este diviziunea, numărul este împărțit de Divizor și este rezultatul este atribuit ‘date.rezultat ‘ variabilă. Aici, din moment ce ‘ date.rezultatul ‘ este modelul nostru, și cum există o schimbare aici de la valoarea inițială a ‘0’ la ‘2’ acum, vizualizarea se actualizează și rezultatul diviziunii este afișat pe HTML.

acesta este motivul pentru care spunem AngularJS urmează modelul de design MVVM.

Urmați-mă

Github

Lasă un răspuns

Adresa ta de email nu va fi publicată.