如何用AngularJS实现web开发的MVC框架

         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>