温故知新: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')) || [];
}

温故知新:Angular 下的简单的 mvc 编码结构

猜你喜欢