wzorcem projektowym jest niczym innym jak łatwym do utrzymania i wielokrotnego użytku sposobem pisania kodu, który można zastosować do często występujących problemów. Istnieje wiele wzorców projektowych, takich jak MVC, MVVM, DI itp. To zależy od problemu, który wzór projektowy musi być przestrzegane.

Ten blog kładzie nacisk na wzorce projektowe MVC i MVVM w odniesieniu do AngularJS.

zaczynajmy:

wzorzec projektowy MVC

aby rozpocząć, wzorzec projektowy MVC nie jest specyficzny dla AngularJS, musisz widzieć / zaimplementować ten wzorzec w wielu innych językach programowania.

wzorzec projektowy MVC można zobaczyć w AngularJS, ale zanim przejdziemy do tego, zobaczmy, co zawiera wzorzec projektowy MVC:

  1. Model: Model to nic innego jak dane.
  2. View: View przedstawia te dane.
  3. Controller: Kontroler pośredniczy między nimi.

zobaczmy poniższy kod:

w powyższym fragmencie nasz tekst jest reprezentowany przez zmienną „sampleText”. To nasz model. Kontroler aktualizuje Widok poprzez wyświetlenie danych w widoku poprzez zastąpienie „” wartością zmiennej sampleText. Jest to kontroler, który zarządza relacją między naszym modelem a widokiem, który jest HTML.

W MVC jeśli dokonamy jakiejkolwiek zmiany w widoku nie zostanie on zaktualizowany w modelu. Ale w AngularJS słyszeliśmy, że istnieje coś, co nazywa się wiązaniem 2-drożnym i to Wiązanie 2-drożne umożliwia wzór projektowy MVVM. MVVM zasadniczo zawiera 3 rzeczy:

  1. Model
  2. Widok
  3. Widok modelu

kontroler jest w rzeczywistości zastąpiony przez model widoku we wzorze projektowym MMVM. Model widoku to nic innego jak funkcja JavaScript, która jest znowu jak kontroler i jest odpowiedzialna za utrzymywanie relacji między widokiem a modelem, ale różnica polega na tym, że jeśli aktualizujemy cokolwiek w widoku, to jest aktualizowane w modelu, zmieniamy cokolwiek w modelu, pojawia się w widoku, co nazywamy wiązaniem 2-drogowym.

zobaczmy przykład podany poniżej:

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

powyższy kod zawiera 2 pola wejściowe, które pobierają liczbę i dzielnik, aby podzielić tę liczbę. Wynik podziału jest pokazany przed etykietą „wynik”.

ponadto, cokolwiek jest wprowadzone w tych dwóch polach wejściowych, jest wyświetlane przed samym polem wejściowym. Ten kod bardzo wyraźnie pokazuje wzorzec projektowy MVVM w JavaScript, tutaj możesz zobaczyć jak:

MVVM.jpg

powyższy diagram dzieli kod na Model, widok i model widoku.

zaczynam od widoku. Wiemy,że widok jest naszym HTML, więc aktualizujemy go wpisując '6′ w polu tekstowym numer i '3′ w polu tekstowym dzielnik. Po wprowadzeniu jakichkolwiek zmian w widoku, model widoku dowiaduje się o tym, a wartości te są następnie aktualizowane w modelu. Poza tym główną pracą jest to, że dzieje się w modelu widoku jest dzielenie, liczba jest dzielona przez dzielnik i jest wynik jest przypisany do ’ danych.result ’ zmienna. Proszę, od „data”.wynik 'jest naszym modelem, a ponieważ zmienia się tutaj z początkowej wartości’ 0 'na’ 2′, widok zostaje zaktualizowany, a wynik podziału jest wyświetlany w HTML.

dlatego mówimy, że AngularJS stosuje się do wzorca projektowego MVVM.

Follow me

Github

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.