デザインパターンは、一般的に発生する問題に適用できるコードを記述する保守可能で再利用可能な方法に過ぎません。 MVC、MVVM、DIなどの多数の設計パターンがあります。 それは、どのデザインパターンに従う必要があるかという問題に依存します。このブログでは、AngularJSを参照してMVCとMVVMのデザインパターンを強調しています。

始めましょう

始めましょう

:

MVC Design Pattern

まず、MVC design patternはAngularJSに固有のものではなく、他の多くのプログラミング言語でこのパターンを見たり実装したりしている必要があります。MVCデザインパターンはAngularJSで見ることができますが、それに入る前に、MVCデザインパターンには何が含まれているのかを見てみましょう:

  1. Model:Model is nothing but data.
  2. ビュー:ビューは、このデータを表します。
  3. コントローラ:コントローラは、二つの間を仲介します。

以下のコードを見てみましょう:

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

上記のスニペットでは、テキストは”sampleText”変数で表されます。 これが私たちのモデルです。 コントローラは、””をsampleText変数値に置き換えて、ビュー上のデータを表示することにより、ビューを更新しています。 私たちのモデルとHTMLであるビューとの関係を管理しているのはコントローラです。MVCでは、ビューに変更を加えると、モデルでは更新されません。 しかし、AngularJSでは、2-way bindingと呼ばれるものがあり、この2-way bindingがMVVMデザインパターンを可能にすると聞いています。 MVVMには基本的に3つのものが含まれています:

  1. モデル
  2. ビュー
  3. ビューモデル

コントローラは、実際にはMMVMデザイ ビューモデルは、コントローラのようなJavaScript関数に過ぎず、ビューとモデルの関係を維持する責任がありますが、ここでの違いは、ビューで何かを更新すると、モデ

以下の例を見てみましょう:

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

上記のコードには、数値とその数値を除算する除数を取る2つの入力ボックスが含まれています。 分割の結果は、ラベル’Result’の前に表示されます。また、これらの2つの入力ボックスに入力されたものは、入力ボックス自体の前に表示されます。 このコードは、JAVASCRIPTでMVVMデザインパターンを非常に明確に示しています。

MVVM。jpg

上の図は、コードをモデル、ビュー、ビューモデルに分離します。私は最初にviewから始めています。

ビューはHTMLであることがわかっているので、数値テキストボックスに「6」、除数テキストボックスに「3」と入力して更新します。 ビューで変更が行われるとすぐに、ビューモデルはそれについて知るようになり、これらの値がモデルに更新されます。 これとは別に、主な仕事は、ビューモデルで起こっていることは除算であり、数は除数で除算され、結果は”データ”に割り当てられているということです。結果’変数。 ここでは、’データ以来。result’は私たちのモデルであり、ここでは初期値の’0’から’2’に変更があるため、ビューが更新され、除算の結果がHTMLに表示されます。これが、AngularJSがMVVMデザインパターンに従うと言う理由です。

私に従ってください

Github

コメントを残す

メールアドレスが公開されることはありません。