角度设计模式：MVC，MVVM或MV *？

Angular 1.x（AngularJS）由于具有双向数据绑定功能，因此或多或少遵循MV *设计原理。

Angular2正在采用基于组件的UI，这是React开发人员可能熟悉的概念。从某种意义上说，Angular 1.x控制器和指令会模糊到新的Angular 2组件中。

这意味着在Angular 2中没有控制器，也没有指令。相反，组件具有一个与该组件将代表的html标签相对应的选择器，以及一个@View，用于指定要填充的HTML模板。

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具有突破性的原因有很多，但主要原因之一是因为它使用了依赖注入。与Backbone和Knockout等其他JS框架相比，这是一个新概念。

然后，React出现并彻底改变了前端架构。它使前端可以更多地考虑除MVC和MVVM之外的其他选项。相反，它创建了基于组件的体系结构的想法。自HTML和JavaScript以来，这可以看作是前端体系结构最重大的转变之一。

Angular 2（和Angular 1.5.x）决定采用React的方法并使用基于组件的架构。但是，您可以在MVC，MVVM和Angular 2之间绘制些许相似之处，这就是为什么我认为它可能会有些混乱。

话虽如此，但Angular 2中没有控制器或视图模型（除非您手工制作）。而是有一些组件，它们由一个模板（如视图），类和元数据（装饰器）组成。

例如，模型是保存数据的类（例如，用于保存http服务使用@ angular / http返回的数据的数据协定）。我们可以创建一个新类，添加方法和属性（逻辑），然后合并Model和Class。这将创建类似于ViewModel的内容。然后，我们可以在Component中使用此ViewModel。

但是，将组件的类或服务称为ViewModel或Controller并不是真正正确的方法。组件包含模板和类。IMO有点像Liskov的理论-鸭子不是鸭子-不要试图将MVC或MVVM模式强加到不同的组件中。将Angular 2视为组件。但是我可以理解为什么人们会采取相似的方式来帮助他们初步理解。

Angular还使用Modules，它是即将发布的JavaScript（ECMAScript 6）版本的一部分。这非常强大，因为JavaScript一直在命名空间和代码组织方面遇到问题。这就是组件进出口的地方。

有用的链接：

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

是angular2 mvc吗？

Angular 1和Angular 2都遵循MVC（模型，视图，控制器）模式。

在Angular 1中，HTML标记是View，Controller是Controller，而Service（当它用于检索数据时）是模型。

在Angular 2中，模板是View，类是Controller，服务是模型（用于检索数据时）。

由于Angular是客户端框架，因此Angular遵循的MVC模式可以称为MVVC（模型，视图，视图控制器）。

我不太喜欢使用M **表示法（有点受虐和模糊）。无论如何，我认为最简单，最有效的表达方式是在Angular2中：

类（您所用的文章）代表模型

组件合并视图（在模板中）和控制器（Typescript逻辑）

希望对您有所帮助

带有AngularJS的MVC和MVVM

MVC设计模式

首先，MVC设计模式并非特定于AngularJS，您必须已经在许多其他编程语言中看到/实现了该模式。

可以在AngularJS中看到MVC设计模式，但在深入探讨之前，让我们先了解一下MVC设计模式包括哪些内容：

模型：模型不过是数据。视图：视图代表此数据。控制器：控制器在两者之​​间进行中介。

在MVC中，如果我们在视图中进行任何更改，则不会在模型中进行更新。但是在AngularJS中，我们听说有一种叫做2向绑定的东西，这种2向绑定使MVVM设计模式成为可能。

MVVM基本上包括三件事：

模型视图在MMVM设计模式中，视图模型控制器实际上已由视图模型代替。视图模型不过是一个JavaScript函数，它又像一个控制器，负责维护视图和模型之间的关系，但是这里的区别是，如果我们更新视图中的任何内容，它将在模型中进行更新，而在模型中进行任何更改，显示在视图中，这就是我们所说的2向绑定。

这就是为什么我们说AngularJS遵循MVVM设计模式。

以我的拙见，如果您想使用一些约定，则可以使用MVVM在Angular 2中进行开发：

1. 组件包含视图（模板）和视图模型（类）。
2. 您只需错过模型，即可将其创建为普通的TypeScript类，并将其作为构造函数参数传递给viewmodel。

该技术与PRISM和WPF中可用的技术非常相似，您可以在其中使用MVVM开发一切（如果需要）。

在Angular（不包括版本2和更高版本）中，我们使用数据绑定功能。此数据绑定功能可在ng应用程序中强制使用MVVM模式，因为在这种情况下，控制器会导致V＆M之间的绑定（视图更改导致模型更改，反之亦然），因此在MVC术语中，我们可以将“ C”替换为“ VM”，从而得到“ MVVM”