理解angularjs MVVM 模型逻辑,数据交互显示的过程

    第一步：先看mvvm的结构图：

            

 1. php server ----server Model

       Angularjs 从后台获取的数据，  把数据传给视图模型，$scope视图模型部分：

   视图模型部分: ViewModel视图模块对应的程序:  通过$scope作用域定义name属性值，将“hello” 这条数据内容显示在视图中

var m =angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
   $scope.name="hello";

}])

    

在 $scope中写了数据，但是如果真正到了项目里面，我们的数据都是从后台获取的，而不是自己敲出 “hello” 数据：

   

 但是 scope也需要放到一个位置里面， 要把scope放到控制器里面面， 结构图中浅绿色部分就是控制器部分。

     scope 再把数据传给视图 view中，也就是大家都能看到的界面， $scope中有啥，就会传给视图。

         下面我们看个例子，从后台获取数据，数据传给视图模型，再通过scope，将数据呈现在界面上：

            下图中各种图书的类型，就是后台的数据（全部、Angularjs、as3、html、css）

           

               

                      

    app.controller('booklist',function ($scope,$http) {
        $scope.booklist={};
        $http.get('data/bookslist.json')
            .success(function(item){
                $scope.booklist =item;
            })
    });

   1.通过$http服务向后台请求json数据，请求成功之后（success之后） ，  向 SERVER请求

   2.其中item就是从后台获取的数据， 

   3.将item数据赋值给scope定义的booklist属性 ，  

   4. 获取booklist数据， 上图中显示的图书列表（全部、Angularjs、as3、html、css），就是 book.name的数据

<li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})">					
<a> <span class="glyphicon {{book.img}}"></span> {{book.name}}</a>
</li>

第二步：

     到了这一步，就体现出了MVVM模型的概念，而且体现了双向数据绑定，（这是jQuery）中不能实现的（体现了jQuery，获取数据方面的缺陷，可在jQuery笔记中看到）

    后台数据给 “视图模型”（M）,  视图模型将它中的数据给"视图"（V），如果“视图”（V）改变时，它相应视图的改变也会，也会同步到“视图模型”（M），所以构成了 MVVM