如何在 Angular 2 中解释 MVC 模式？答案

【问题标题】：How MVC pattern can be explained in Angular 2?如何在 Angular 2 中解释 MVC 模式？
【发布时间】：2016-08-09 07:38:16
【问题描述】：

为 Angular: MVC Implementation 找到了一个有用的博客，但仍在寻找 Angular 2

的良好解释

【问题讨论】：

标签： angular

【解决方案1】：

一般

我认为该模式确实与语言无关。也就是说，设计/架构模式是相当抽象的，用不同的语言实现它们遵循这种更抽象的表示。这并不是说我们不能在给定示例语言（例如 C# 或 Java）或示例框架（例如 Angular2）的情况下使其更具体。

鉴于您已经阅读了有关 MVC 模式的一些资料，我假设您已经了解该模式在其抽象形式中的样子。它是模型、视图和控制器的分离。我不会深入探讨这个抽象的介绍。让我们看一下Angular2。

Angular2 特定

假设您使用的是 angular2-cli。当您创建一个新组件时，会为您生成一堆文件。重要的是那些以component.html 和component.ts 结尾的，用于理解MVC。这些分别是视图和控制器。 HTML 是呈现给用户的内容（以及一些用于布局的 CSS）。很容易看出这是如何表示视图的。在它旁边，我们有随附的component.ts 文件。这是控制器。本质上，它可以通过各种绑定形式选择将哪些数据推送到我们的视图 (.html)。

如果你不使用 angular2-cli，你可以将它们合并到一个文件中。 HTML 部分是我们的视图，Typescript 是我们的控制器。

最后，我们有了模型。在 angular2 中，模型主要是我们的services，我们可以通过控制器访问它。（旁注：服务可以被视为另一种模式，singleton pattern。旁注：在大多数情况下这是正确的，但请在 SO 上寻找一些解决方法））

虽然我们的模型可以超越这一点。我们的“后端”可以有更多类，例如我们的服务用来处理或存储信息。这也可以属于我们的模型。我们可以有一个Person 的类文件。然后PersonService 可以管理Person 的数组。我们可以说Person 仍然是一个模型类。

【讨论】：

【解决方案2】：

Angular2 遵循 MVC 模式。模型由可以通过依赖注入注入组件类构造函数的工厂和服务表示。 Controller是组件类；工厂和服务通常在类构造函数中被DI注入到Component Class中，然后用来设置类成员变量。 View 是绑定到组件类成员变量的组件模板。

【讨论】：