Angular 设计模式 : MVC, MVVM 还是 MV*？

Question

Angular 1.x (AngularJS) 或多或少遵循 MV* 设计原则，因为它具有双向数据绑定(bind)功能。

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

这意味着在 Angular 2 中没有 Controller 也没有指令。相反，一个组件有一个选择器，它对应于该组件将表示的 html 标记和一个 @View 来指定要填充的组件的 HTML 模板。

Angular2 仍然实现双向数据绑定(bind)，但不包含模型，例如，如果我有一个显示文章列表的 @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 具有开创性有几个原因，但其中一个主要原因是因为它使用了依赖注入(inject)。与 Backbone 和 Knockout 等其他 JS 框架相比，这是一个新概念。

然后 React 出来了，彻底改造了前端架构。它让 Front End 更多地考虑 MVC 和 MVVM 之外的其他选择。相反，它创造了基于组件的架构的想法。这可以说是自 HTML & JavaScript 以来前端架构最重大的变革之一。

Angular 2(和 Angular 1.5.x)决定采用 React 的方法并使用基于组件的架构。但是，您可以在 MVC、MVVM 和 Angular 2 之间画出细微的相似之处，这就是我认为它可能有点令人困惑的原因。

话虽如此，Angular 2 中没有 Controller 或 View 模型(除非您手工制作它们)。取而代之的是组件，它们由模板(如 View )、类和元数据(装饰器)组成。

例如，模型是保存数据的类(例如，使用@angular/http 保存由 http 服务返回的数据的数据契约)。我们可以创建一个新类，添加方法和属性(逻辑)，然后合并模型和类。这会创建类似于 ViewModel 的东西。然后我们可以在我们的组件中使用这个 ViewModel。

但是将组件的类或服务称为 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

Is angular2 mvc?