MVC在AugularJS下的具体实现

MVC是一种使用MVC（Model View Controller 模型-视图-控制器）设计创建Web应用程序的模式。
Model（模型）是应用程序中处理数据逻辑功能的部分，用来实现程序的具体逻辑功能，通常包括数据库中数据的存取。
View（视图）是应用程序中处理数据显示的部分，也就是用户看见的并且可以与之进行交互的界面。
Controller（控制器）是应用程序中处理用户交互的部分，是模型和视图之间交互的纽带，确保了视图和模型的同步。通常控制器接受用户的输入然后调用模型和视图去完成用户的需求，也就是说控制器本身不输出任何东西也不做任何逻辑功能处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后用确定用哪个视图来显示模型处理返回的数据。
[img]

[/img]
例如，用AngularJS创建并存储一个新的（不与之前创建的活动名重复）的活动然后显示出所有创建的活动名称。
创建活动的view：

%input.input-full(type="text" ng-model="activity_name" style="height:38px" ng-change="listen_text()" ) //listen_test()与下面的button_disabled是用来实现输入框为空时，创建按钮不可点，功能函数在此不做介绍。
#test(style="color:red" ng-show='tip')活动名称重复！  //如果活动名重复，红色字体提醒，并且不创建。
%button.btn.btn-2(style="width:100%" ng-disabled="button_disabled"  ng-tap="click_create()")创建  //点击创建按钮后，就会执行创建活动的controller中的$scope.click_create().

创建活动的controller：

$scope.click_create = function(){
        if(Activity.check($scope.activity_name)){ 
            $scope.tip = true;
            return;
        }
        Activity.save($scope.activity_name); 
        $navigate.go('/sign_up'); 
    } //可以看出controller中没有直接自己完成创建、保存功能，而是调用model中的方法来实现这些业务功能的，并且controller还会根据model返回的数据传给相应的view来做显示。

创建活动的model：

function Activity(activity_name){
    this.activity_name = activity_name;
}

Activity.check = function(activity_name){
    var activities = JSON.parse(localStorage.getItem('activities')) || [];
    var current_user = localStorage.current_user;
    return _.find(activities, function(activity){
        return activity.activity_name == activity_name;
    }) ? true : false;
}  //检查这个活动是否是新活动，并返回布尔值给controller。

Activity.save = function(activity_name){
    var activities = JSON.parse(localStorage.getItem('activities')) || [];
    var activity = new Activity(activity_name);
    activity['current_user'] = localStorage.current_user;
    localStorage.displayed_activity = activity_name;
    activities.push(activity);
    localStorage.setItem('activities',JSON.stringify(activities));
} // 把活动存到数据库中

显示已创建活动的view：

%li.text-center(ng-repeat="activity_name in activity_names" )
  %a.list-activity-name
    {{ activity_name }} 

最后，总结一下AngularJS中实现web开发的MVC的处理过程，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回的数据，并通过表示层呈现给用户。