请问Angular.js 是 mvc 还是 mvvm 框架？

八股文_Angular面试题 0 31

参考回答

AngularJS 是一个带有 MVC（Model-View-Controller）和 MVVM（Model-View-ViewModel）特性的框架，但更准确地说，它是一个 MVVM 框架，因为它强调双向数据绑定，允许视图和模型通过 ViewModel 实现同步更新。

详细讲解与拓展

1. MVC 和 MVVM 的概念

MVC（Model-View-Controller）：
- Model：负责管理数据和业务逻辑。
- View：负责显示用户界面。
- Controller：负责连接 Model 和 View，处理用户交互并更新模型或视图。
- 数据流：用户操作通过 Controller 更新 Model，Model 再通知 View 更新。
MVVM（Model-View-ViewModel）：
- Model：数据和业务逻辑。
- View：用户界面。
- ViewModel：视图的抽象，负责处理双向数据绑定，将 Model 和 View 连接起来。
- 数据流：View 和 ViewModel 通过双向数据绑定同步更新。

2. AngularJS 的特点

AngularJS 更接近 MVVM 模式，主要体现在以下几个方面：
– 双向数据绑定：
– AngularJS 提供的双向数据绑定机制是 MVVM 的核心特性之一。
– View 和 Model 之间通过 $scope 实现同步，用户在视图中的操作会自动更新模型，反之亦然。
– 示例：

“`html
<input type="text" ng-model="name">
<p>{{name}}
“`
这里的 `ng-model=”name”` 就是 View 和 ViewModel（$scope）之间的双向绑定。

Controller 的角色：
- AngularJS 中的 Controller 负责定义业务逻辑和处理数据，但它更多充当 ViewModel 的角色，而不是传统的 MVC 中的 Controller。
- 示例：
```
angular.module('myApp', []).controller('MyController', function ( $scope) {$ scope.name = 'AngularJS';
});
```
View 和 DOM 操作解耦：
- AngularJS 通过指令（Directives）实现 View 和 DOM 操作的解耦，View 主要负责展示，而逻辑处理集中在 ViewModel 中。

3. AngularJS 是 MVC 吗？

虽然 AngularJS 被许多人认为是 MVC 框架，但它实际上没有严格按照传统的 MVC 模式实现：
– 没有单独的 Model 层，AngularJS 的 Model 通常只是 $scope 上的数据对象。
– Controller 更像是 MVVM 中的 ViewModel，主要用于管理数据和业务逻辑。
– View 是 HTML 模板，负责显示数据。

因此，AngularJS 不能严格称为 MVC 框架，但它确实支持 MVC 的思想。

4. AngularJS 更接近 MVVM 的原因

ViewModel 的引入：
- AngularJS 的 $scope 对象可以看作是 ViewModel，它是 View 和 Model 的桥梁，负责管理视图的状态和逻辑。
双向绑定是核心：
- 双向绑定直接体现了 MVVM 的特性：View 和 Model 之间的自动同步。
简化了开发：
- 在传统的 MVC 中，Controller 需要手动更新 View，而在 AngularJS 的 MVVM 模式中，ViewModel 通过数据绑定自动完成这些工作。

5. 总结：AngularJS 是 MVC 还是 MVVM？

AngularJS 是一个 MVVM 框架，但它也融入了部分 MVC 的思想：
– 它的双向数据绑定和 $scope 的设计使其更接近 MVVM 模式。
– 它的 Controller 部分与传统的 MVC 有所不同，更像是 MVVM 中的 ViewModel。

在实践中，AngularJS 的灵活性允许开发者以 MVC 或 MVVM 的方式进行开发，但官方更倾向于 MVVM 模式，因为其核心机制（如双向绑定和 $scope）更符合 MVVM 的设计理念。