MVC,M表示Model,也就是数据模型,数据模型是一个数据和操作数据方法的集合,例如User以及关于User的各种方法如增加,删除,修改,查询,更新等等。
V表示View,是显示,也就是要把Model具体的加修饰的显示出来。
C表示Controller,是控制器,运筹帷幄,调兵遣将,这里的兵将就是各种模型的方法以及在View上设定的各种开关(例如Angular 中的ng-switch,ng-show 等)。
写一个Angularjs下的简单的MVC编码结构的例子。
View:user.html(用来显示模型的各种信息及各种可视化操作如按钮)
<html>
<title>MVC Test</title>
<head>
<meta charset='utf-8'>
<script src='E:\Angularjs\angular-1.0.8\angular.js'></script>
<script src='E:\underscore.js'></script>
<script src='E:\UserController.js'></script>
<script src='E:\User.js'></script>
</head>
<body ng-app>
<div ng-controller='UserController'>
<div>
姓名<input ng-model='name'>
性别<input ng-model='sex'>
年龄<input ng-model='age'>
<button ng-click='add_people()'>创建用户</button>
</div>
<div>
查找用户<input ng-model='people_name'>
<button ng-click='find_people()'>查找用户</button>
</div>
<div ng-show='show' style='background-color:black;color:white'>
<div>共有{{number}}个</div>
<div ng-repeat='people in peoples'>
姓名:{{people.name}},性别:{{people.sex}},年龄:{{people.age}}
</div>
</div>
<div ng-repeat='user in users'>
姓名:{{user.name}},性别:{{user.sex}},年龄:{{user.age}}
<button ng-click='remove_people(user.name)'>删除用户</button>
</div>
</div>
</body>
</html>
Controller: UserController.js(操纵模型的各种方法,以及控制视图中的一些标签的显示和隐藏如$scope.show用来控制view中的一个div是否显示)
function UserController($scope){
$scope.list_people = function(){
$scope.users = User.get_all_users();
}
$scope.clear_input = function(){
$scope.name=$scope.age=$scope.sex=null;
}
$scope.add_people = function(){
$scope.show = false;
var user = User.create($scope.name,$scope.age,$scope.sex);
User.save(user);
$scope.list_people();
$scope.clear_input();
}
$scope.remove_people = function(name){
User.remove(name) ? alert('删除' + name + '成功') : alert('删除' + name + '失败');
$scope.list_people();
}
$scope.find_people = function(){
$scope.peoples = User.find($scope.people_name);
$scope.number = $scope.peoples.length;
$scope.show = true;
}
$scope.list_people();
}
Model:User.js(数据与其方法的集合体)
function User(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
User.create = function(name,age,sex){
return new User(name,age,sex);
}
User.save = function(user){
var users = JSON.parse(localStorage.getItem('users')) || [];
users.unshift(user);
localStorage.setItem('users',JSON.stringify(users));
}
User.find = function(name){
var users = JSON.parse(localStorage.getItem('users'));
return _.filter(users,function(user){
return user.name == name;
});
}
User.remove = function(name){
var users = JSON.parse(localStorage.getItem('users'));
var i = 0, j = users.length;
for( ; i < j; i++){
if(users[i].name == name){
users.splice(i,1);
break;
}
}
localStorage.setItem('users',JSON.stringify(users));
return i != j;
}
User.get_all_users = function(){
return JSON.parse(localStorage.getItem('users')) || [];
}
分享到:
相关推荐
数学:吃透课本温故知新.docx
机械军工行业:“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
通信行业:温故知新,从4G看5G-1202-中信建投-12页.pdf
固定收益专题报告:温故知新,国债期货1903合约回顾与总结_国信证券-13页.pdf
农林牧渔行业专题研究:温故知新,复盘上两轮生猪疫情影响-0213-广发证券-17页.pdf
20210202-银河证券-“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
类固收系列报告之四:温故知新,新股首日涨幅预测模型及卖出策略-0511-光大证券-23页.pdf
温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)
SpringSpringSpring温故知新六AOP向切面程Spring温故知新六AOP向切面程
纺织服装行业“温故知新”系列之百丽复盘:渠道为王铸就龙头,改革初见成效-0717-华泰证券-26页.pdf
5G行业发展报告,证券研究报告
机械军工行业:“温故知新”系列之工业机器人行业复盘-从日德韩发展历程看中国工业机器人的未来.pdf
数据结构示例程序(C#语言描述)配套博文,替代参考数据结构温故知新系列: ①线性表部分: 线性表(上){数组,ArrayList} 线性表(中){单链表,双链表,LinkedList} 线性表(下){循环链表,约瑟夫问题} ②栈...
计算机小数表示.温故知新.pdf
初中语文文学讨论现当代文学温故知新
“温故知新”系列之工业机器人行业复盘(三):从零部件国产化看产业链协同发展(附报告).pdf
“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间
中信建设温故知新,从 4G 看 5G.rar
中信建设温故知新,从 4G 看 5G.pdf