为什么Angular称为MV *框架

时间:2016-09-16 04:24:12

标签: angularjs design-patterns model-view-controller mvvm

从我现在所读到的内容(这个answer),它更倾向于MVVM模式。将服务中的数据视为模型,将Angular控制器视为VM,将包含角度绑定的HTML视为视图。

  

我们可以说MVC是服务器端的模式和客户端的MVVM吗?

     

有人可以用例子(在Angular的背景下)解释我们如何做到   实现MVC和MVVM。

我已经读过使用var vm = this的概念;在角度控制器中。但是这意味着只需为我们的控制器使用别名,我们就可以将Angular应用程序从MVC转换为MVVM。

2 个答案:

答案 0 :(得分:13)

首先我想,最好先了解 MVC MVVM

不仅仅是描述更多的理论背景。我宁愿用一个简单的例子来解释。让我们买一个披萨。

MVC - 当你打电话给披萨中心并交付时,会发生这种情况。

  • 您致电呼叫中心专员(控制器)并下订单(输入)。
  • 然后呼叫中心盖伊(控制器)安排一些厨师(模型)制作比萨饼,送货员(查看)来送披萨。
  • 然后送货员(查看)从库克斯(模型)获取披萨,包装得很好(输出)并交付给您。

MVVM - 当你去商店并向服务员下订单时会发生什么。

  • 您将订单(输入)发送给服务员(查看)。
  • 服务员(查看)您订购咖啡馆经理(查看模型)。
  • 咖啡厅经理(查看模型)安排一些厨师(模型)来制作披萨。
  • Cooks(Model)准备好并将其传递给Cafe Manager(View Model)。
  • 然后咖啡厅经理(查看型号)把它放入一个漂亮的盘子里,加上叉子/刀子,酱汁机等。(演示文稿)。
  • 服务员(查看)跟踪Cafe Manager(查看模型)。一旦准备好,服务员(View)就会送给你。

enter image description here

回到你的问题时,

  

我们可以说MVC是服务器端的模式和客户端的MVVM   侧?

我能说的是一般是。 (可能有一些极端情况)。我希望,您可以使用我的上述解释来更好地处理您的问题。

除此之外,因为你指的是AngularJS,在架构中,它非常接近 MVVM (我这样说是因为它更像是没有答案)。虽然我们在AngularJS中有控制器,但实际上他们确实完成了 View-Models 的工作。

----------使用AngularJS更新特定示例----------

因为我想在Angular架构中保持我们的范围。我正在举一个例子。

enter image description here

  • 您将使用AngularJS实现组件的HTML模板。的 [查看]
  • 该HTML模板绑定到Controller,其中可能有this.controllerAs = vm之类的内容。实际上,这个术语vm指的是 View-Model 。的 [视图模型

理想情况下,在此控制器中,我们不应实施特定于业务的逻辑。如果您希望它们包含在客户端,您应该有单独的工厂,服务(自定义)等来做到这一点。您可以做的是,您可以在控制器中包含那些(工厂,服务)并调用其所需的功能/方法来执行所需的操作。否则,您可以考虑在服务器端使用业务逻辑并使用内置服务(例如:$ http)来调用它们。

所以在控制器内部,我们只有绑定的实现才能查看我们想要的逻辑(显示要求)。

  • 正如我在第二点中提到的,您有[自定义工厂,服务]或[REST服务集+ $ http],它包含您的业务逻辑。的 [模型]

因此,在沟通流程中真正发生的是,

  • 客户端(最终用户/其他组件)最好通过一些输入调用/启动HTML(查看)。
  • 然后控制器( View-Model )获取输入并知道所需任务是什么。
  • 然后控制器调用其中的工厂,服务等(模型)以准备绑定到给定输入的所需业务特定输出。
  • 模型然后处理输入并将所需的输出提供给控制器。
  • 然后控制器进行一些显示特定的调整。
  • 然后会显示HTML。

答案 1 :(得分:1)

让我们看一下MVVM的历史: MVVM最初由Microsoft定义用于Windows Presentation Foundation(WPF)和Silverlight,由John Grossman于2005年在关于Avalon(WPF的代号)的博客文章中正式宣布。它还在Adobe Flex社区中发现了一些流行,作为简单使用MVC的替代方案。 近年来,MVVM已经以结构框架的形式在JavaScript中实现,如KnockoutJS,Kendo MVVM和Knockback.js,并得到社区的积极响应。

与此同时,你是对的,AngularJS更接近MVC(或者更确切地说是其客户端变体之一),但随着时间的推移,许多重构和API改进,它现在更接近MVVM - $scope object可能是考虑由我们称之为Controller的函数装饰的ViewModel

MVC,MVP和MVVM常见的软件行为是:

1)数据层/业务逻辑(模型):这是将业务逻辑应用于应用程序数据的行为

2)表示层/ UI(视图):View负责应用程序的可视化表示。

3)应用程序逻辑(控制器,表示或视图模型):此行为包含实现模型和视图之间交互的逻辑。

<强> MVVM

MVVM在UI和应用程序逻辑之间提供了清晰的分离。

客户端库:Knockout.js,Kendo(MVVM)

服务器端库:Silverlight,Windows Phone应用程序,Adobe Flex或Tanuki是一个受MVVM启发的Web框架,它通过其设计或其他示例来描述惯用的Ruby,DRY和可扩展性,它将是WebCore 3 PHP框架,它是与平台无关的框架,它使用MVVM模式。

所以我想说一个特定的模式只适用于客户端或服务器端这是不正确的,它与我们正在使用的框架完全相关,或者可能是我们将为我们的项目建立的环境,无论是在前面或者在后端开发中。

文档:Here

enter image description here

请阅读这篇文章

Interesting Article for AngularJs MV*