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')) || [];
}
分享到：
相关推荐
Asp.NET 3.5 MVC 是一个用于构建动态网站的框架，它提供了更现代的开发方式，相较于传统的ASP.NET Web Forms，MVC模式更加模块化，使得代码组织更清晰，测试更加方便。这个"文章管理源码"是针对初学者的一个实例教程...
- **MVC模式的结构**：模型负责存储数据和业务逻辑；视图负责用户界面的显示；控制器接收用户的输入并调用模型和视图完成用户的需求。 - **MVC模式的设计思想**：通过分离应用程序的不同方面来提高代码的可维护性...
1. 温故知新：通过复习简单过去时态的单词，如"wore"、"women"、"actor"等，以及一个绕口令，引导学生进入新课。 2. 引入新概念：展示图片，播放录音，让学生用中文描述信件内容，然后再次播放录音，让学生跟读，...
通信行业：温故知新，从4G看5G-1202-中信建投-12页.pdf
- 温故知新：通过口算练习，巩固两位数的加法。 - 导学释疑：通过自学、小组讨论，解决谁得分高的问题，强调连加竖式的正确书写和理解。 - 巩固提升：设计连加运算题目，培养计算能力和团队协作能力。 2. **课题...
3. **链表**：链表是一种非连续的存储结构，每个节点包含数据和指向下一个节点的引用。链表分为单链表、双链表和循环链表等类型。它们在插入和删除操作上比数组更灵活，但随机访问不如数组快。 4. **栈与队列**：栈...
农林牧渔行业专题研究：温故知新，复盘上两轮生猪疫情影响-0213-广发证券-17页.pdf
从给定文件中提取的知识点如下： 1. 工业机器人行业概述：工业机器人是机械工程中的一种高科技自动化设备，主要应用于汽车制造、电子电器、化学橡胶塑料、金属制品、食品制造等多个行业。根据国际机器人联合会（IFR...
- 编写简单的控制结构程序，如if-else语句、switch-case语句。 **挑战自我：** - 设计并实现一个简单的计算器程序，支持加减乘除四则运算。 - 编写一个程序，实现对输入文本的统计分析功能。 **招兵募马：** - ...
2. **控制结构**：包括条件语句（if-else，switch）、循环（for，while，foreach）以及异常处理（try-catch）。 3. **方法**：如何定义和调用方法，以及参数传递和返回值。 4. **集合**：了解ArrayList、List、...
在准备高考或其他重要考试的过程中，数学复习是一项至关重要的任务。要高效地复习数学，考生需要注意以下五个关键点： 首先，复习应该以课本为基础，遵循教学大纲的要求。这意味着要避免过度学习，选择一套高质量的...
本文将深入探讨这些技术，帮助开发者温故知新，理解它们的功能、工作原理以及如何在实际项目中应用。 ### JSP（JavaServer Pages） JSP是一种动态网页技术，它允许开发者在HTML页面中嵌入Java代码，以实现动态内容...
数据结构作为计算机科学与技术专业的一门重要基础课程，其重要性不言而喻。本文将结合教学现状，提出几点学习数据结构的建议，旨在为计算机专业的学生在自主学习数据结构时提供指导和帮助。 首先，掌握C/C++程序...
数据结构是计算机科学中的核心课程，它探讨了如何在计算机中高效地组织和管理数据，以便于算法的实现和优化。本数据结构基础课件详细介绍了多种关键的数据结构及其相关算法，包括线性表、栈、队列、树、二叉树、图、...
5G行业发展报告，证券研究报告
- 通过例子训练学生如何将简单的句子变得更具体生动，如“小白兔在捉迷藏”到“可爱的小白兔在树林里捉迷藏，玩儿得真开心”。 3. 古诗词欣赏： - 杜甫的《绝句》：描绘了春天的美丽景色，展现了大自然的生机盎然...
数据结构与算法是计算机科学的基础，对于理解和设计高效的软件至关重要。这个压缩包“数据结构及算法经典-源代码”提供了一种实践性的学习资源，它包含了一系列与数据结构和算法相关的编程实现。以下是对其中可能...
数据结构示例程序（C＃语言描述）配套博文，替代参考数据结构温故知新系列： ①线性表部分： 线性表（上）{数组，ArrayList} 线性表（中）{单链表，双链表，LinkedList} 线性表（下）{循环链表，约瑟夫问题} ②栈...
- 温故知新：复习已学过的几何体，如长方体和立方体，要求学生画出图形并描述其形状。 - 新课探究：通过观察生活中的物品，识别与几何体相似的形状，如书架上的物体可能与长方体或圆柱体相似。 - 自主思考：深入...
- 理解：理清文章结构，重点关注双龙洞内孔隙的特点，尤其是其狭窄和低矮的特性。 3. **教学过程**： - 导入：通过学生分享旅行经历，引入《记金华的双龙洞》这篇游记，激发学生兴趣。 - 初读：让学生自由朗读，...