AngularJS工作原理--举例说明

在研究了angularjs接近半年的时间以后，终于差不多弄懂了angularjs的工作机制原理了：

拿一个例子说明一下吧：

HTML代码：

<ion-list>
            <div style="margin-top: 44px;"></div>
            <ion-item ng-repeat="item in items"
                      item="item"
                      ng-click="goToDetail(item)"
                      class="item-remove-animate" style="height: 65px;vertical-align: middle;padding-top: 1px;">
                    <div style="width: 100%;" class="warp">
                        <div style="font-size:16px;width: 100%;float:left;color: #000000;padding-top: 15px;">{{ item.OF_OFFICENAME }}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9b9b9b;">容纳{{ item.OF_MAXUSER  }}人</span>&nbsp;&nbsp;&nbsp;<span style="color:#5077aa">已预订：{{}}次</span></div>
                        </div>
                    <!--</div>-->
                </div>
            </ion-item>
        </ion-list>

conroller.js代码：

  listFactory.getOffice(remindtime).then(function (response) {
            console.log(response);
            $scope.items = response;
        });

service.js代码：

getOffice: function getList(date) {
                var deferred = $q.defer();


                var params = "{\"date\":\""+date+"\"}";
                var url = '/serv?domain=getOffice&params=' + encodeURIComponent(params);
                $http.post(url).success(function (response) {
                    deferred.resolve(response);
                }).error(function (data) {
                    console.log("getList网络联接失败!");
                    $ionicPopup.alert({
                        title: '<b>错误!</b>',
                        template: '网络联接失败!'
                    })
                    deferred.reject();
                });
                return deferred.promise;
            },

首先在service.js中定义一个方法叫getOffice，该方法是与后台数据库进行数据查询的接口，在前台页面能够显示出来数据的流程是首先在service里面写一个查询的方法，当页面需要显示容纳人数和预定次数时先调用对应的controller，然后会调用到 listFactory.getOffice，listFactory是controller 调用service方法的函数，点后面跟的是service里面定义的与数据库交互的方法名，response 则是后台数据库返回给前端的数据集合。最后你用一个循环把需要的数据遍历出来就大功告成啦~~~~~