Angular2:MVC,MVVM还是MV*？

Question

由于其双向数据绑定功能,Angular one或多或少遵循MVV*设计原则.

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

这意味着在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最接近的设计模式呢？

Answer 1

Angular 2并不是真正的MVC(但我想你可以画出相似之处).它是基于组件的.让我解释:

Angular 1是MVC和MVVM(MV*).Angular 1开创性有几个原因,但其中一个主要原因是因为它使用了依赖注入.与Backbone和Knockout等其他JS框架相比,这是一个新概念.

然后React出来并彻底改变了前端架构.它使Front End更多地考虑除了MVC和MVVM之外的其他选项.相反,它创造了基于组件的架构的想法.从HTML和JavaScript开始,这可以被视为前端架构最重要的转变之一.

Angular 2(和Angular 1.5.x)决定采用React的方法并使用基于组件的体系结构.但是,你可以在MVC,MVVM和Angular 2之间略微相似,这就是为什么我认为它可能有点令人困惑.

话虽如此,Angular 2中没有Controllers或ViewModel(除非你手工制作它们).相反,有些组件由模板(如视图),类和元数据(装饰器)组成.

例如,模型是保存数据的类(例如,使用@ angular/http保存http服务返回的数据的数据协定).我们可以创建一个添加方法和属性(逻辑)的新类,然后合并Model和Class.这会创建类似ViewModel的东西.然后我们可以在Component中使用这个ViewModel.

但要调用Component的类或服务,ViewModel或Controller实际上并不正确.组件包含模板和类.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

是angular2 mvc？

Answer 2

Angular 1和Angular 2都遵循MVC(模型,视图,控制器)模式.

在Angular 1中,HTML标记是视图,控制器是控制器和服务(当它用于检索数据时)是模型.

在Angular 2中,模板是View,类是Controller&Service(当它用于检索数据时)是模型.

因为Angular是一个客户端框架,所以MVC模式Angular跟随可以称为MVVC(模型,视图,视图控制器).

Answer 3

我不太热衷于使用M**符号(有点滥用和模糊).无论如何,在我看来,最简单和最有效的方法是在Angular2:

类(在您的情况下为文章)代表模型

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

我希望它有所帮助

Answer 4

MVC 和 MVVM 与 AngularJS

MVC 设计模式

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

MVC 设计模式可以在 AngularJS 中看到，但在开始之前让我们看看 MVC 设计模式包括什么：

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

在 MVC 中，如果我们在视图中进行任何更改，它不会在模型中更新。但是在 AngularJS 中，我们听说有一种叫做 2-way binding 的东西，这种 2-way binding 启用了 MVVM 设计模式。

MVVM 基本上包括 3 件事：

Model View View Model Controller 实际上在MMVM 设计模式中被View Model 取代。View Model 只不过是一个 JavaScript 函数，它又像一个控制器，负责维护视图和模型之间的关系，但这里的区别在于，如果我们更新视图中的任何内容，它会在模型​​中更新，更改模型中的任何内容，它出现在视图中，这就是我们所说的 2 路绑定。

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

Answer 5

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

Answer 6

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

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

该技术与 PRISM 和 WPF 中可用的技术非常相似，您可以使用 MVVM 开发所有内容（如果您愿意）。