angular - 如何在 Angular 2 中解释 MVC 模式？

Question

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

的良好解释

Answer 1

一般

我认为该模式确实与语言无关。也就是说，设计/架构模式是比较抽象的，不同语言的实现都是按照这种比较抽象的方式来实现的。这并不是说我们不能通过示例语言(例如 C# 或 Java)或示例框架(例如 Angular2)使其更具体。

鉴于您已经阅读了一些有关 MVC 模式的资源，我假设您已经了解该模式的抽象形式。它是模型、 View 和 Controller 的分离。我不会深入探讨这个的抽象介绍。让我们看看 Angular2。

Angular2 特有的

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

如果您不使用 angular2-cli，您可以将它们合并到一个文件中。 HTML 部分是我们的 View ，Typescript 是我们的 Controller 。

最后，我们有了模型。在 angular2 中，模型主要是我们的 services，我们可以通过我们的 Controller 访问它。 (旁注:服务可以被视为另一种模式，singleton pattern。旁注的旁注:在大多数情况下都是如此，但请查看 SO 以获得一些解决方法))

尽管我们的模型可以扩展到更远的地方。我们的“后端”可以有更多的类，例如我们的服务使用这些类来处理或存储信息。这也可以属于我们的模型。我们可以为 Person 创建一个类文件。 PersonService 然后可以管理一组 Person。我们可以说 Person 仍然是一个模型类。