Angular 设计模式:MVC、MVVM 还是 MV*? [英] Angular design pattern: MVC, MVVM or MV*?
问题描述
Angular 1.x (AngularJS) 或多或少遵循 MV* 设计原则，因为它具有双向数据绑定功能.
Angular 1.x (AngularJS) was following more or less the MV* design principle because of its two-way data binding functionality.
Angular2 正在采用基于组件的 UI，React 开发人员可能熟悉这个概念.从某种意义上说，Angular 1.x 控制器和指令融入了新的 Angular 2 组件.
Angular2 is adopting a component-based UI, a concept that might be familiar to React developers. In a sense, the Angular 1.x controllers and directives blur into the new Angular 2 Component.
这意味着在 Angular 2 中没有控制器和指令.相反，组件有一个选择器，它对应于组件将表示的 html 标签，还有一个 @View 来指定要填充的组件的 HTML 模板.
This means that in Angular 2 there are no controllers and no directives. Instead, a component has a selector which corresponds to the html tag that the component will represent and a @View to specify an HTML template for the component to populate.
Angular2 仍然实现双向数据绑定，但不包含模型，例如，如果我有一个 @Component 显示文章列表和一个 class定义文章对象:
Angular2 still implements two-way data-binding but does not consist of models for example if I have a @Component that displays a list of articles and a class that defines the article object:
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模式中会被认为是模型.
This, in the MVC pattern would be considered the model.
那么考虑到这一点，Angular 遵循什么设计模式最接近?
So considering this what design pattern does Angular follow the closest?
推荐答案
Angular 2 并不是真正的 MVC(但我想你可以得出相似之处).它是基于组件的.让我解释一下:
Angular 2 isn't really MVC (but I suppose you can draw parallels). It is Component Based. Let me explain:
Angular 1 是 MVC 和 MVVM (MV*).Angular 1 具有开创性有几个原因，但主要原因之一是因为它使用了依赖注入.与 Backbone 和 Knockout 等其他 JS 框架相比，这是一个新概念.
Angular 1 is MVC and MVVM (MV*). Angular 1 was groundbreaking for several reasons, but one of the main reasons was because it used Dependency Injection. This was a new concept compared with other JS Frameworks like Backbone and Knockout.
然后 React 出现并彻底改变了前端架构.它让前端更多地考虑了除 MVC 和 MVVM 之外的其他选项.相反，它创造了基于组件的架构的想法.这可以看作是 HTML & 以来前端架构最重大的变革之一.JavaScript.
Then React came out and completely transformed front end architecture. It made Front End think more about other options other than MVC and MVVM. Instead it created the idea of Component Based Architecture. This can be regarded as one of the most significant transformation of front-end architecture since HTML & JavaScript.
Angular 2(和 Angular 1.5.x)决定采用 React 的方法并使用基于组件的架构.但是，您可以在 MVC、MVVM 和 Angular 2 之间绘制出细微的相似之处，这就是为什么我认为它可能有点令人困惑.
Angular 2 (and Angular 1.5.x) decided to take React's approach and use Component Based Architecture. However, you can draw slight parallels between MVC, MVVM and Angular 2, which is why I think it can be a little confusing.
话虽如此，Angular 2 中没有控制器或视图模型(除非您手工制作它们).取而代之的是组件，它们由模板(如视图)、类和元数据(装饰器)组成.
Having said this, there are no Controllers or ViewModels in Angular 2 (unless you hand craft them). Instead, there are components, which are made up of a Template (like a view), Classes and MetaData (Decorators).
例如，模型是保存数据的类(例如，使用@angular/http 保存http 服务返回的数据的数据契约).我们可以创建一个添加方法和属性(逻辑)的新类，然后合并模型和类.这会创建类似于 ViewModel 的东西.然后我们可以在我们的组件中使用这个 ViewModel.
For example, The Models are the classes that holds the data (eg a data contract to hold data returned by the http service using @angular/http). We can create a new class that adds methods and properties (logic), then merge the Model and the Class. This creates something like a ViewModel. We could then use this ViewModel within our Component.
但是将组件的类或服务称为 ViewModel 或 Controller 是不正确的.组件包含模板和类.IMO 这有点像 Liskov 的理论 - 鸭子不是鸭子 - 不要试图将 MVC 或 MVVM 模式强加到组件中，因为它们是不同的.将 Angular 2 视为组件.但我可以理解为什么人们会通过类比来帮助他们初步理解.
But to call a Component's Class or a Service a ViewModel or a Controller isn't really correct. The Component contains the Template and the Class. IMO it's a bit like Liskov's Theory - a duck is not a duck - don't try to force the MVC or MVVM pattern into Components as they are different. Think of Angular 2 as Components. But I can see why people would draw parallels to help their initial understanding.
Angular 还使用模块，它是即将推出的 JavaScript 版本(ECMAScript 6)的一部分.这非常强大，因为 JavaScript 在命名空间和代码组织方面一直存在问题.这就是导入和导出进入组件的地方.
Angular also uses Modules which is part of an upcoming version of JavaScript (ECMAScript 6). This is very powerful because JavaScript has always had problems with Namespaces and Code Organisation. This is where imports and exports come in to components.
有用的链接:
https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c
这篇关于Angular 设计模式:MVC、MVVM 还是 MV*?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
