温故知新:Angular 下的简单的 mvc 编码结构
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')) || [];}