MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码。
-
模型(Model) 用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“模型”有对数据直接访问的权力,例如对数据库的访问。“模型”不依赖“视图”和“控制器”,也就是说,模型不关心它会被如何显示或是如何被操作。
-
视图(View)能够实现数据有目的的显示,实现了所有的系统和用户之间的业务交互。在视图中一般没有程序上的逻辑。
-
控制器(Controller)只向view提供指示性标志变量和数据源,不对任何数据操作的方法做实现,只通过调用有model的属性或方法实现逻辑控制。也就是说controller处理了所有的业务逻辑。
然而,仅仅有这些资源是不够的,你要对这些资源进行匹配和整合,也就是要配置页面的路由,路由在AngularJS中也占有很重要的地位,例如:
.when('/show_orders', { templateUrl: 'views/show_orders.html', controller: 'ShowOrdersCtrl' })
这样当用户在浏览器中输入的URL为'/show_orders'时,就会调用到'ShowOrdersCtrl'控制器,控制器则会处理所有有关这个页面的业务逻辑,例如,它可以给页面提供数据源:
$scope.orders = Order.get_orders();
此时就涉及到模型(Model)了,模型只负责数据的增,删,改,查询,然后把数据返回给控制器(Controller)。这时控制器就可以提供数据给页面(View)。例如:
Order.get_orders = function () { return JSON.parse(localStorage.getItem("orders")) || []; }
这时候页面就会加载数据呈现给用户了,例如:
<li class=" clearfix list-group-item" ng-repeat="order in orders"> <div class="p-left"> <p class="font-1">{{order.person_name}}</p> <p>{{order.restaurant_name}} {{order.food_name}}</p> </div> </li>