angular是MVC模式还是MVVM架构模式

下面仅是个人对angular是MVC或者MVVM的理解。

首先在讨论angular是哪种模式之前,我们得先了解什么是MVVM和MVC。

MVVM vs MVC

总体介绍

首先,两者都是一种架构思想。都是从后端演变而来。

具体的演变流程:传统MVC ——> MVP ——> MVVM

MVC

- M - Model  数据:数据实体,用来保存页面要展示的数据。比如ajax获取的数据。

- V - View 视图,显示数据的页面,一般为html。

- C - Controller 控制器: 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤,进而影响数据在视图上的展示。

MVVM

M - Model 数据:它是与应用程序的业务逻辑相关的数据的封装载体

V - View 视图:它专注于界面的显示和渲染

VM - ViewModel 视图-数据:它是View和Model的粘合体,负责View和Model的交互和协作

Angular是MVC还是MVVM

先下定论,准确的说可以理解为MVC形式的前端框架,但是也可以说是MVVM形式的框架。缘由慢慢道来。

一、MVC

首先:

V即视图层是没有任何争议的,即代表的就是页面展示层,即视图层。用来显示渲染数据,展示用户所看到的内容。在angular中视图就是在@componet装饰器中组装的html模板。

M:即数据模型,在angular中可以认为是从服务端获取的数据,因为angular提倡的是组件化、模块化开发。所以不建议将与后台交互的业务逻辑、数据请求与组件混合,而是专门放在服务即service中单独处理,通过依赖注入(DI)的形式将获取到的数据注入到所应用的组件。所以可以将service服务层认为就是MVC中的M层。

C: 即控制器,控制器的作用就是提供页面显示的属性、跟页面相关的业务逻辑。那么在angular中可以理解为组件。因为在angular中组件通过装饰器@component修饰,并组装所需要的元数据,而模板所需要的属性、数据都是在组件即@component所修饰的类中定义的。而组件只是负责为视图提供属性值数据和跟页面相关的业务逻辑处理后的数据,不直接参与数据与后端的交互。所有,C就是angular中的组件。

综上所述,angular完全可以认为是MVC形式的前端框架。

二、MVVM

那么angular为什么又可以理解为是MVVM形式的框架呢?

个人觉得,MVVM的划分相对MVC来说更细一点,或者说MVVM可以认为是从VMC中抽离出来的一部分。那如何得以体现呢,下面阐述完MVVM之后 ,和上面一对比,则一目了然。

V: 即视图层,这个还是不变的,都是代表了用户能看到的内容。在angular中它就是html模板。通过html模板来达到与用户之间的交互。

M: 即模型,模型对应的就是模型数据。如果要把angular理解为MVVM形式的话,那这块就要理解为是MVC形式中M和C的结合体。为什么呢?下面从MVVM形式的角度来理解。在MVVM中M既担任了视图层V所需要的基本数据,也担任了从后台获取的数据,即通过ajax请求后台获取数据的工作。只不过在angular中,建议是控制器负责与页面交互的基本数据和业务逻辑处理,而与后台交互的例如ajax处理放到了服务service中。我们也完全可以直接在组件控制器中执行完所有操作,不必分层处理,所以可以认为M(MVC)+ C(MVC)= M(MVVM)。在angular中可以理解为M就是组件控制器和服务service两者的结合。

VM: 即视图模型,视图模型的作用是用来连接V视图层和M数据模型层的桥梁。所以为什么上面说可以认为MVVM是MVC的演变或者细化,其实两者的角度不同而已。MVVM中的VM是将M中的数据提供给V用于展示,同时将V中用户改变的数据同步到M中。同样在angular中也是这样实现的,在angular中当改变了数据之后页面就会变化,而页面用户操作之后,M中的数据就会自动更新。

综上所述,angular也可以认为是MVVM的前端框架。



作者:天使凤凰_
链接:https://www.jianshu.com/p/11c89d58d5d5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438887.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql current_MySQL中CURRENT_TIMESTAMP数据类型详解

例1. MySQL 获得当前时间戳函数:current_timestamp, current_timestamp()代码如下mysql> select current_timestamp, current_timestamp();------------------------------------------| current_timestamp | current_timestamp() |----------------------------…

结合vue、react、angular谈谈MVC、MVP、MVVM框架

首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别。 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个library,用于构建用户界面。 v…

mysql emma_ubuntu mysql emma中文乱码问题解决

ubuntu mysql emma中文乱码问题解决emma默认用apt-get 安装的话,emma是不支持中文的,配置文件或直接修改emma程序源文件(python)。apt-get安装emmasudo apt-get install emmaubuntu的apt-get 安装emma是在/usr/share/emma目录下面。cd /usr/share/emma/e…

Vue(MVVM)、React(MVVM)、Angular(MVC)对比

前言 昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了。因为只用过Vue,不了解其他两个框架,今天就赶紧去了解一下他们之间的区别。大家发现如果本文中哪个地…

.NET的MVVM框架

Model-View-ViewModel 是一种架构模式,主要在 WPF、Silverlight 和 WP7 开发里使用,它的目标是从视图层移除几乎所有代码隐藏(code-behind)。交互设计师可以专注于使用 XAML 表达用户体验需求,然后创建和视图模型的绑定…

mysql 索引 lt =_MySQL索引相关

MySQL索引采用的是BTREE,多列联合索引是一个有序元组,其中各个元素均为数据表的一列。设一个表有M列,建一个度为n的多列联合索引,深度h lognM,设一组索引列的大小为s,索引文件的大小可以计算为s*M*(1M/nM/…

.NET平台下开源框架

一、AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架。Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式。这种部署方面(aspects)的方法帮助缺少经验的开发人员提高开发效率。 NKalore是一款编程语言,它扩展…

mysql存储过程查询所有表_mysql存储过程利用游标查询每个数据库的所有表

DELIMITER $DROP PROCEDURE listAllDB;CREATE PROCEDURE listAllDB()BEGINDECLARE no_more_record INT DEFAULT 0;/*定义2个变量:temp用于记录游标每次next的值,schemaName表示将所有temp拼接后的值*/DECLARE schemaName varchar(500) DEFAULT ;DECLARE …

先进的ASP.NET开源工作流快速开发框架 - RoadFlow

.net可视化工作流引擎RoadFlow - 设计概述 RoadFlow是天知软件旗下基于.NET的工作流快速开发平台,由从事六年以上OA及工作流开发与实施的团队设计开发,该工作流平台已应用于众多大型企事业单位。拥有全浏览器兼容的可视化流程设计器、表单设计器、基于角…

view [bootstrap-4] not found如何解决_Dubbo如何处理业务异常,这个一定要知道哦

前言我们在开发应用系统时,不可避免的要使用到我们自己定义的异常,所以我们一般通常会用到自定义的业务异常类BusinessException,这个异常会继承extends RuntimeException,当发生业务限制的时候,会throw出来。问题在Sp…

c# 自定义应用程序配置文件(app.config)

1. 向项目添加app.config文件: 右击项目名称,选择“添加”→“添加新建项”,在出现的“添加新项”对话框中,选择“添加应用程序配置文件”;如果项目以前没有配置文件,则默认的文件名称为“app.config”&…

python爬取文件归类_python爬取各类文档方法归类汇总

HTML文档是互联网上的主要文档类型,但还存在如TXT、WORD、excel、PDF、csv等多种类型的文档。网络爬虫不仅需要能够抓取HTML中的敏感信息,也需要有抓取其他类型文档的能力。下面简要记录一些个人已知的基于python3的抓取方法,以备查阅。1.抓取…

.NET(C#)有哪些主流的ORM框架

前言 在以前的一篇文章中,为大家分享了《什么是ORM?为什么用ORM?浅析ORM的使用及利弊》。那么,在目前的.NET(C#)的世界里,有哪些主流的ORM,SqlSugar,Dapper,Entity Framework(EF)还…

android 加载网络bitmap图片 oom 简书_Android常见问题--ImageView加载图片OOM

开发中给ImageView加载一个高质量图片时,APP抛出了“Canvas: trying to draw too large(840253440bytes) bitmap.”的异常。猜测是图片占用内存太大,超出APP被分配的内存(我用的mate9,APP被分的内存差不多200m),造成了OOM。解决方…

.net开源框架开源类库(整理)

常用库 Json.NET https://github.com/JamesNK/Newtonsoft.Json Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单。通过Linq To JSON可以快速的读写Json,通过JsonSerializer可以序列化你的.Net对象。让你轻松实现.Net中…

docker jdk mysql_docker部署springboot前后端分离项目(jdk+jar包+mysql+redis+nginx)(示例代码)...

jdk1.8,dockerfile文件1.vim jdk-dockerfile?FROM centos:7MAINTAINER sinvie.cnWORKDIR /usrRUN mkdir /usr/local/javaADD jdk-8u221-linux-x64.tar.gz /usr/local/java/ENV JAVA_HOME /usr/local/java/jdk1.8.0_221ENV JRE_HOME $JAVA_HOME/jreENV CLASSPATH $J…

matlab连接mysql教程视频_Matlab建立到Oracle数据库的连接

Linux下的配置过程和Windows一样,如下:1、将Oracle JDBC的JAR包拷贝到Matlab的相关目录(..\matlab\java\jar\toolbox\)下。一、Matlab通过ODBC建立到Oracle数据库的连接1、在Windows下“开始”→“控制面板”→“性能和维护”→“管理工具”,…

C# App.config学习

进入公司一年多来&#xff0c;对配置文件添加了不少参数&#xff0c;但是从未想过这些参数是如何被读取出来的&#xff0c;今天把读取参数的处理看了一下&#xff0c;收获不少。假定有App.config如下 <?xml version"1.0" encoding"utf-8" ?> <…

php mysql 查询时间_PHP-MySQL查询需要大量时间才能执行

我正在开发时间表应用程序,并编写PHP代码以提取所有时间表直到日期.这是我为获取时间表而编写的查询-选择a.accnt_name,u.username,DATE_FORMAT(t.in_time,’&#xff05;H&#xff1a;&#xff05;i’)inTime,DATE_FORMAT(t.out_time,’&#xff05;H&#xff1a;&#xff05;…

大数据-----软件开发模型(详细讲解)

大数据学习免费学习资料&#xff08;免费教程&#xff09; 软件工程中&#xff0c;常用的开了模型有四种&#xff1a;瀑布模型、原型模型、增量模型和螺旋模型。 ⒈瀑布模型包括计划&#xff0c;需求分析、设计、编码、测试、运行维护六个阶段&#xff0c;阶段自上而下&#x…