Angular2：MVC、MVVM、またはMV *？
角度のあるものは、その双方向のデータバインディング機能のために、MVV *の設計原則に多少なりとも従っていました。
Angular2は、コンポーネントベースのUIを採用しています。これは、React開発者になじみのある概念です。ある意味では、Angular 1.xコントローラーおよびディレクティブは、新しいAngular 2コンポーネントにぼやけています。
つまり、Angular 2にはコントローラーもディレクティブもありません。代わりに、コンポーネントには、コンポーネントが表すhtmlタグに対応するセレクターと、コンポーネントが取り込むHTMLテンプレートを指定する@Viewがあります。
Angular2は引き続き双方向のデータバインディングを実装していますが、たとえば、記事のリストを表示する@Componentと記事オブジェクトを定義するclassがある場合、モデルで構成されていません。
class Article {
title: string;
link: string;
votes: number;
constructor(title: string, link: string, votes?: number){
this.title = title;
this.link = link;
this.votes = votes || 0;
}
これは、MVCパターンではモデルと見なされます。
これを考慮して、どのデザインパターンがAngularに最も近いのでしょうか？
Angular 2は実際にはMVCではありません（ただし、平行線を描画できると思います）。コンポーネントベースです。説明させてください：
角度1はMVCおよびMVVM（MV *）です。 Angular 1はいくつかの理由で画期的でしたが、主な理由の1つは依存性注入を使用したためです。これは、BackboneやKnockoutなどの他のJSフレームワークと比較して、新しい概念でした。
その後、Reactが登場し、フロントエンドアーキテクチャが完全に変換されました。これにより、フロントエンドはMVCおよびMVVM以外の他のオプションについてより深く考えるようになりました。代わりに、コンポーネントベースのアーキテクチャのアイデアを作成しました。これは、HTMLとJavaScript以来、フロントエンドアーキテクチャの最も重要な変換の1つと見なすことができます。
Angular 2（およびAngular 1.5.x）は、Reactのアプローチを採用してコンポーネントベースのアーキテクチャを使用することを決定しました。ただし、MVC、MVVM、およびAngular 2の間にわずかな類似点を描くことができるため、少し混乱する可能性があると思います。
とはいえ、Angular 2にはコントローラーやViewModelはありません（手動で作成しない限り）。代わりに、テンプレート（ビューなど）、クラス、およびメタデータ（装飾）で構成されるコンポーネントがあります。
たとえば、モデルはデータを保持するクラスです（たとえば、@ angular/httpを使用してhttpサービスによって返されたデータを保持するデータコントラクト）。メソッドとプロパティ（ロジック）を追加する新しいクラスを作成し、モデルとクラスをマージできます。これにより、ViewModelのようなものが作成されます。コンポーネント内でこのViewModelを使用できます。
しかし、コンポーネントのクラスまたはサービスをViewModelまたはコントローラーと呼ぶことは、実際には正しくありません。コンポーネントには、テンプレートとクラスが含まれます。 IMOはLiskovの理論に少し似ています-アヒルはアヒルではありません-MVCまたはMVVMパターンを異なるコンポーネントに強制しようとしないでください。 Angular 2をコンポーネントと考えてください。しかし、なぜ人々が最初の理解を助けるために類似点を描くのかがわかります。
Angularは、JavaScriptの今後のバージョン（ECMAScript 6）の一部であるモジュールも使用します。 JavaScriptは常に名前空間とコード編成に問題を抱えているため、これは非常に強力です。これがコンポーネントへのインポートとエクスポートの出番です。
便利なリンク：
https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c
Angular 1とAngular 2の両方は、MVC（モデル、ビュー、コントローラー）パターンに従っています。
Angular 1では、HTMLマークアップがビューで、コントローラーがコントローラーであり、サービス（データの取得に使用された場合）がモデルです。
Angular 2では、テンプレートはビュー、クラスはコントローラーおよびサービス（データの取得に使用された場合）はモデルです。
Angularはクライアント側フレームワークであるため、Angularに続くMVCパターンはMVVC（モデル、ビュー、View Controller）と呼ばれる場合があります。
私はM **表記（乱用や霧のようなもの）を使うことにあまり熱心ではありません。とにかく私の意見では、最も簡単で効果的な方法はAngular2のそれです：
クラス（あなたのケースでは記事）はモデルを表します
コンポーネントマージビュー（テンプレート内）とコントローラー（TypeScriptロジック）
私はそれが役立つことを願っています
AngularJSを使用したMVCおよびMVVM
MVCデザインパターン
はじめに、MVCデザインパターンはAngularJSに固有のものではありません。他の多くのプログラミング言語でこのパターンを見たり実装したりする必要があります。
MVCデザインパターンはAngularJSで見ることができますが、その前に、MVCデザインパターンに含まれるものを見てみましょう。
モデル：モデルはデータに他なりません。ビュー：ビューはこのデータを表します。コントローラー：コントローラーは2つの間を仲介します。
MVCでは、ビューに変更を加えても、モデルでは更新されません。しかし、AngularJSでは、2方向バインディングと呼ばれるものがあり、この2方向バインディングによってMVVM設計パターンが有効になると聞いています。
MVVMには基本的に3つの要素が含まれます。
モデルビュービューモデルコントローラーは、実際にはMMVMデザインパターンのビューモデルに置き換えられます。 View Modelは、コントローラーのようなJavaScript関数であり、ビューとモデルの関係を維持する役割を果たしますが、ここでの違いは、ビューで何かを更新すると、モデルで更新され、モデルで何かを変更し、ビューに表示されます。これを2方向バインディングと呼びます。
これが、AngularJSがMVVMデザインパターンに従うと言う理由です。
私の謙虚な意見では、いくつかの規則を使用したい場合、MVVMを使用してAngular 2で開発できます。
- コンポーネントには、ビュー（テンプレート）とビューモデル（クラス）が含まれます。
- モデルを見逃すだけで、通常のTypeScriptクラスとして作成し、コンストラクターパラメーターとしてビューモデルに渡すことができます。
このテクノロジーは、PRISMおよびWPFで利用可能なものと非常に似ており、MVVMを使用してすべてを開発します（必要な場合）。
Angular（バージョン2以降を除く）では、データバインディング機能を使用しています。このデータバインディング機能はngアプリケーションでMVVMパターンを強制します。この場合、コントローラーはV＆M間のバインディングを引き起こすためです（ビューの変更はモデルの変更を引き起こし、逆も同様です）。したがって、MVCの用語では、「C」を「MVVM