angularjs学习笔记三——AngularJS与MVC模式

最新推荐文章于 2020-12-19 19:15:07 发布

FUNCO_小风

最新推荐文章于 2020-12-19 19:15:07 发布

阅读量1.6k

点赞数

分类专栏： anjularjs 文章标签： mvc angularjs web 前端

本文链接：https://blog.csdn.net/qq_23937195/article/details/72801396

版权

anjularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文主要解决一下几个问题：

什么是MVC
MVC优点缺点
AngularJS的MVC是怎样的
来个简单的示例

一、什么是MVC

MVC模式非常重要，无论你是B/S还是C/S的开发者(实际上个人认为B/S也是C/S的一种特殊形式)，甚至你是纯Client或Browser的前端开发者，你都必须了解什么是MVC。

MVC是单词缩写，拆开的话是Model(模型)、View(视图)、Controller(控制器)，其中，Model模型即为要存储的数据和数据访问接口。

在MVC模式下，你可以简单的理解为一个项目从总体上可以分为三个层次，数据层、控制层、视图层：

视图

控制

数据

(上表图为原创)

将所有的数据存储在数据层，控制层负责逻辑业务处理以及数据在数据层与视图层之间的传递。视图层仅仅单纯的负责显示控制层给出的数据或向控制层传输获得的数据，因此，视图层也可以理解为交互层。

从项目逻辑结构上是这么分，但同时，从项目文件上也可以这么分。同一模块下的控制器、视图、模型各自单独成源文件或目录，在需要的时候通过控制器连接获取视图或数据的源文件，然后进行处理。

以上内容对于习惯了基于JAVA的JSP+Servlet的WEB后端开发人员而言可能比较好理解。如果你认为难以理解我的表述，没关系。

实际上，如果你通过网上查询资料，你会发现，MVC模式中三者之间的关系有很多版本，因此你只需要知道——MVC模式就是希望将视图、数据和数据访问接口、逻辑业务处理高度分离。至于三者间具体关系，应该发挥主观能动性，视不同项目、不同需求、不同环境而具体分析。

需要注意的是，MVC只是其中一种较为常见的开发模式，当然还有其他的，有兴趣的可以自己探究——完全清楚MVC的前提下。

二、MVC优点缺点

MVC模式的优点是显而易见的，它能让项目源码变得更好看，增强可读性。这不仅仅是为了美观，这在大项目中，对于不同人员的分工、岗位任务的交接、后期运维、代码管理等多个方面都非常重要。如果你的代码管理一团糟，那么可能仅仅一个月过去，你再看你一个月前的代码你只会有一个想法——这是什么鬼？

MVC的缺点就是项目会比较大。为了分离各个模块，你将不得不增加一倍甚至几倍的代码量，模块之间通过接口访问，也降低了访问效率。但是我认为这个缺点可以忽略，因为如果没有这些多出来的代码量，你或你的团队将来可能连维护它的欲望都没有，很难正确阅读和理解项目，更别说Debug了。

三、AngularJS的MVC是怎样的

AngularJS的MVC中，三者关系与上述的不太一样，在AngularJS的MVC中，Model作为控制器与视图之间传递数据的载体；View根据Model的设计而设计，用于显示Model，Controller用于根据Model进行不同的逻辑业务处理。

实际上，AngularJS经历了多次改版，早期版本更贴近于MVC，现在的话，如上述，已经与我开篇中所说的MVC有差别了。因此，更多人愿意称AngularJS为MVVM(Model-View-ViewModel)。有兴趣的可以自己通过百度百科了解：http://baike.baidu.com/link?url=lgvjthVzqdIFmD7FftWq0fAPolFA8OKXQ3Xk8FEtrW6LgolKIadDtKH27JmiFtN5kh3ksAxiRvph4ixMnNWT5q

四、来个简单的示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body>
	<!-- 定义该div为一个ng的应用，该应用为其指派一个应用名为appName -->
	<!-- 同时为该应用指派一个控制器，并为该控制器指派一个名称为ctrlName -->
	<div ng-app="appName" ng-controller="ctrlName">
		disStr1 - <span>{{disStr1}}</span><br />		<!-- 显示disStr1，它就相当于Model -->
	</div>
	<script>
		//获取ng应用名appName获取其对象
		//通过这个对象我们能对应用做一些逻辑处理
		var appObj = angular.module("appName",[]);
		//这些逻辑处理通过自定义函数，并将该函数与appName的控制器ctrlName绑定实现。这个绑定的过程可以通过应用对象的controller函数实现
		appObj.controller("ctrlName",function($scope){
			$scope.disStr1 = "Hello, World!";		//scope是作用域对象，也是MVC中的Model部分
									// 其成员属性disStr1与上方appName中的表达式内的disStr1指向同一个对象
		});
	</script>
	</body>
</html>

建议你自己照着写一边，再运行查看效果，不出以外的话，网页只会显示一行字符：disStr1 - Hello, World!

通过上方，我们能了解到

View就是用户可见的部分，包括HTML标签和angularjs表达式。

控制器就是自定义函数中的逻辑处理部分

Model就是$scope对象的成员。

通过上方的代码我们也能体会到，为什么说AngularJS中的Model是作为控制器与View的接口