Angular2+はMVVMなのか

そのことは今までいろんなところで読んできたよ。 “Angular is MVVM “とか “Angular is MVC “とか。 はて、そうなのでしょうか？ 4812>

実はこの質問にはイエスかノーで答えることはできないのです。 まず、angular 2+ は MVC ではありません! 正直、よくそんなことを思いつくものだと思います。

これはアフィリエイトのリンクです。 このリンクを経由して購入された場合、弊社は手数料を受け取ることがあります。

その代わり、コンポーネント指向のアーキテクチャに従います。 ですから、MVVM でもありません。 しかし、angular は MVVM のコンセプトの多くを実装しています。 したがって、必要であれば、angular は MVVM の原則に従うと言うことができます。 類似性を見るために、angular コンポーネントのコンテキストでこの原則を詳しく見ていきます。

「とても素晴らしい…しかし、MVVM とは何ですか」

MVVM は Model, View, ViewModel の略称です。 ソフトウェアの設計パターンの 1 つで、コードを前述の 3 つのセクションに分割することで、ソース コードの可読性と保守性を高めることを目的としています。

Model

モデルは、オブジェクト指向の原則に従って、エンティティの構造を定義するコンテナです。 それはあなたのコンテンツによって定義されます。 つまり、Userにモデルを使いたい場合、次のようになります。

class User { name:string; email:string; address:string;}

angularでは、通常、モデルを定義するのにTypescriptクラスまたはインターフェイスを使用します。 しかし、モデルは単なる古い Javascript オブジェクトです。

View

View は、ユーザーの画面に表示されるすべての視覚的要素を含む、アプリケーションの視覚的レイヤーです。 Angular 2 の場合、ビューはテンプレートで定義されます。 これらのテンプレートは HTML と CSS で書かれていますが、Angular 固有の要素も含まれています。 これらのテンプレートはデータバインディングによって ViewModel に接続されます。 テンプレートは常にコンポーネントの一部です。

ViewModel

ViewModel はビューの抽象的な部分で、画面に表示するモデルやプロパティを管理します。 ページのためのすべてのロジックを含んでいます。 View と ViewModel は、しばしばデータバインディングによって接続されます。 つまり、ViewModel の変更、例えばプロパティの変更は即座にビューに反映され、例えば画面に表示されるテキストが変更されます。 angular では、ViewModel はコンポーネントの Typescript 部分で表されます。

そこで、angular コンポーネントは 2 つの部分で構成されていることがわかりました。 テンプレート (View) とクラス (ViewModel) です。 ここでは、アンギュラーコンポーネントの概要を説明します。

Angular Components

アンギュラーにおける基本コンポーネントは、2つの部分で構成されています。 最初の部分は、コンポーネントの定義です。 これは @Component({}) で囲まれています。 その定義の内部では、セレクタのようなコンポーネントのプロパティを指定することができ、HTML を介してコンポーネントを配置することができます。 これは、インラインで HTML を追加するか、追加のファイルを使用することで行えます。 私は通常、読みやすさとこれら 2 つの要素の明確な分離のために、2 番目のオプションを好みます。

@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })

2番目の部分は、ロジックを実装するための対応するクラスです。 このクラスは定義のすぐ下の同じファイルに配置されます。

export class NavBar{}

画面上にコンポーネントを表示するには、すでに表示されている html ビューにそれを添付する必要があります。 出発点は、app.component.html です。 そこで、

<nav-bar></nav-bar>

と書くことで、コンポーネントはビューに追加されます。 Angular では、コンポーネントはそれ自体で存在することはできず、常にモジュールに追加される必要があります。 そのためには、親モジュールの宣言セクションにコンポーネントを追加するだけです。 ルートモジュールは app.module.ts

@NgModule({ declarations: })

コンポーネントの html ファイルで定義されたすべてのものは、コンポーネントの selector タグの中に置かれるので画面上に表示されることになります。 このリンクを経由して購入された場合、弊社は手数料を受け取ることがあります。