AngularJS—理解AngularMVC模式

最新推荐文章于 2022-04-28 21:29:12 发布

Tiramisu_C

最新推荐文章于 2022-04-28 21:29:12 发布

阅读量8.2k

点赞数 6

分类专栏： AngularJs AngularJS学习之路文章标签： Angular html MVC AngularMVC

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53572028

版权

AngularJs 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

AngularJS学习之路

3 篇文章 5 订阅

订阅专栏

MVC指的是 Model View Controller 模型-视图-控制器设计模式，下面通过一个简单例子来理解Angular MVC模式。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>理解angular的MVC模式</title>
	<script type="text/javascript" src="../libs/angular.min.js"></script>
</head>
<body ng-app="myapp">
	<!-- V-M -->
	请输入姓名：<input type="text" ng-model="name"><br>
	输入的内容是：<span>{{name}}</span>

	<!-- M-V-C -->
	<div ng-controller="MyCtrl">
		<p>{{msg}}</p>
	</div>

	<script type="text/javascript">
		angular.module("myapp",[])
		.controller("MyCtrl",function($scope){
			$scope.msg="hello angular！";
		});
	</script>
	
</body>
</html>

运行效果：

MVC指的是 Model View Controller 模型-视图-控制器设计模式，在前端中，我们可以简单的理解为：

V-View，视图层，一般是我们的html文件层，用于展示数据内容。

C-Controller，控制器，控制器帮助将M层数据给V,或者当View层数据有所改变时，通知M层，M层数据也做相应的改变。

M-Model，模型，当我们需要使用到数据的时候，数据暂存在这里。如var str="hello",或者从数据库中取出数据之后，将数据赋给一个对象或者变量，都可以理解为数据模型。

一张图理解一下这个小例子的MVC模式的使用：

重点解析body里边的代码：

<body ng-app="myapp">
	<!-- V-M -->
	请输入姓名：<input type="text" ng-model="name"><br>
	输入的内容是：<span>{{name}}</span>

	<!-- M-V-C -->
	<div ng-controller="MyCtrl">
		<p>{{msg}}</p>
	</div>

	<script type="text/javascript">
		angular.module("myapp",[])
		.controller("MyCtrl",function($scope){
			$scope.msg="hello angular！";
		});
	</script>
	
</body>

其中 ng-app="myapp"声明了边界，不在这个边界中的angular指令将不生效。

先来说一下

<!-- V-M -->
	请输入姓名：<input type="text" ng-model="name"><br>
	输入的内容是：<span>{{name}}</span>

指定了ng-model="name"属性的input输入的值将作为数据模型M，而使用{{name}}指令的span就是V，当输入框输入值有变化时，V（span）中内容也随着数据模型的值变化而变化。简单的说，这里的 V 和 M 通过ng-model="name" 和{{name}}进行关联。

接下来解析下一段包含MVC的代码：

<!-- M-V-C -->
	<div ng-controller="MyCtrl">
		<p>{{msg}}</p>
	</div>

	<script type="text/javascript">
		angular.module("myapp",[])
		.controller("MyCtrl",function($scope){
			$scope.msg="hello angular！";
		});
	</script>

为了方便我将script代码放在html文件中，项目中提倡实现代码分离，应将script代码放在单独的文件中然后引入。

在div中，使用ng-controller="MyCtrl"属性绑定一个名为MyCtrl的控制器，在p标签中使用{{msg}}指令将数据取出并展示。

在script代码中：

angular.module("myapp",[])----创建了angular模块。这里的myapp对应<body ng-app="myapp">，声明作用范围，而[]可填入其他具体的模块，如["xxx","aaa"]，这个例子不填。

.controller("MyCtrl",function($scope){
			$scope.msg="hello angular！";
		});

每一个controller都是一个简单的小mvc，这里的MyCtrl就是controller，$scope就是model,前面说的MyCtrl已经通过ng-controller="MyCtrl"绑定在div上。

再贴一下图分析：

这里的View(div)通过ng-controller="MyCtrl"绑定了控制器MyCtrl，然后通过{{msg}}通过控制器将数据取出并展示。

而C（MyCtrl）通过

.controller("MyCtrl",function($scope){
			$scope.msg="hello angular！";
		});

绑定了数据M（$scope），所以能为V层提供M的数据。可以说C是为了实现V和M之间的数据交互而存在的。

Tiramisu_C

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
AngularJS—理解AngularMVC模式

MVC指的是 Model View Controller 模型-视图-控制器设计模式，下面通过一个简单例子来理解Angular MVC模式。代码如下：理解angular的MVC模式请输入姓名：输入的内容是：{{name}} {{msg}} angular.module("myapp",[]) .controller("My
复制链接

扫一扫