AngularJS—理解AngularMVC模式
来源:互联网 发布:ubuntu wine qq2016 编辑:程序博客网 时间:2024/05/01 12:26
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之间的数据交互而存在的。
- AngularJS—理解AngularMVC模式
- angularJs理解
- angularjs模式
- 理解AngularJS——从WPF说起
- angularjs学习笔记三——AngularJS与MVC模式
- AngularJS简单的理解
- AngularJS的自我理解
- Angularjs理解二
- Angularjs理解三-$location
- AngularJS 深入理解 $scope
- AngularJS 深入理解 $scope
- angularjs 理解ngOptions
- AngularJS 深入理解 $scope
- 理解Angularjs的指令
- AngularJS 深入理解 $scope
- angularJS的service理解
- AngularJS深入理解$scope
- AngularJS 深入理解 $scope
- 左旋字符
- phpStrom 配置xdebug php 调试
- React组件规范和生命周期
- shell if test
- 博客转移
- AngularJS—理解AngularMVC模式
- Web服务请求异步化介绍
- 数据结构实验之查找七:线性之哈希表
- * Hopscotch
- HBase之基础理解
- Hadoop中基于文件的数据格式(1)SequenceFile
- 2016年第六届ACM趣味编程循环赛 Round #1 B题
- Spring AOP 配置文件的简单理解
- 编译MeshLab(3)—VS2010编译MeshLab源码之编译meshlab_mini.pro