デザインパターンは、一般的に発生する問題に適用できるコードを記述する保守可能で再利用可能な方法に過ぎません。 MVC、MVVM、DIなどの多数の設計パターンがあります。 それは、どのデザインパターンに従う必要があるかという問題に依存します。このブログでは、AngularJSを参照してMVCとMVVMのデザインパターンを強調しています。
始めましょう
始めましょう
:
MVC Design Pattern
まず、MVC design patternはAngularJSに固有のものではなく、他の多くのプログラミング言語でこのパターンを見たり実装したりしている必要があります。MVCデザインパターンはAngularJSで見ることができますが、それに入る前に、MVCデザインパターンには何が含まれているのかを見てみましょう：
- Model:Model is nothing but data.
- ビュー：ビューは、このデータを表します。
- コントローラ：コントローラは、二つの間を仲介します。
以下のコードを見てみましょう:
<!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つのものが含まれています：
- モデル
- ビュー
- ビューモデル
コントローラは、実際には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デザインパターンを非常に明確に示しています。
上の図は、コードをモデル、ビュー、ビューモデルに分離します。私は最初にviewから始めています。
ビューはHTMLであることがわかっているので、数値テキストボックスに「6」、除数テキストボックスに「3」と入力して更新します。 ビューで変更が行われるとすぐに、ビューモデルはそれについて知るようになり、これらの値がモデルに更新されます。 これとは別に、主な仕事は、ビューモデルで起こっていることは除算であり、数は除数で除算され、結果は”データ”に割り当てられているということです。結果’変数。 ここでは、’データ以来。result’は私たちのモデルであり、ここでは初期値の’0’から’2’に変更があるため、ビューが更新され、除算の結果がHTMLに表示されます。これが、AngularJSがMVVMデザインパターンに従うと言う理由です。
私に従ってください
Github