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里边的代码:
[html] view plain copy <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"],这个例子不填。
[html] view plain copy .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)通过
绑定了数据M($scope),所以能为V层提供M的数据。可以说C是为了实现V和M之间的数据交互而存在的。