角度设计模式: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:
角度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& amp; amp;以来的最重要的前端体系结构转换之一. 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中没有Controller或ViewModel(除非您手工制作).而是有一些组件，它们由一个模板(如视图)，类和元数据(装饰器)组成.
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).
例如，模型是保存数据的类(例如，数据契约，用于保存http服务使用@ angular/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称为Component的Class或Service并不是真正正确的.组件包含模板和类. 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还使用Modules，它是即将发布的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
这篇关于角度设计模式:MVC，MVVM或MV *?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
