AngularJS 获取接口数据

AngularJS是一款优秀的JS框架，使用的人数比较多，于是我也加入到项目里。

显示前几条新闻

HTML代码：

<script src="/scripts/jquery/jquery-1.10.2.min.js"></script>
<script src="/scripts/angularjs/angular.min.js"></script>

 <div class="new-content" ng-app="newsApp" ng-controller="newsCtrl">
    <ul>
        <li ng-repeat="n in list"><a href="News/content.aspx?id={{n.id}}" target="_blank" title="{{n.title}}">· {{n.title}}</a></li>
     </ul>
    <p id="newsloading" class="loading" style="height: 420px;">正在加载...</p>
 </div>

AngularJS代码：

  angular.module('newsApp', []).controller('newsCtrl', function ($scope, $http) {
            $http.get("/tools/news_ajax.ashx?action=home&pageSize=12").then(function (response) {
                if (response.data.list.length == 0) {
                    $("#newsloading").html("暂无数据");
                } else {
                    $("#newsloading").hide();
                }
                $scope.list = response.data.list;
            });
        });

一个页面AngularJS默认只加载一个ng-app，如果是多个ng-app，需要手动加载。

第二个ng-app，显示最新商家

    <div class="sj-content">
        <ul id="sjzz" ng-app="sellerApp" ng-controller="sellerCtrl">
             <li ng-repeat="h in list">
                  <a target="_blank" href="{{h.product_url}}" title="{{h.product_title}}">
                       <img src="{{h.product_img}}" width="168" height="116" alt=""></a><div><a href="{{h.product_url}}">{{h.product_title}}</a></div>
              /li>
          </ul>
          <p id="sellerloading" class="loading" style="height: 460px;">正在加载...</p>
     </div>

      angular.module('sellerApp', []).controller('sellerCtrl', function ($scope, $http) {
            $http.get("/tools/index_ajax.ashx?action=productTop&pageSize=3").then(function (response) {
                if (response.data.list.length == 0) {
                    $("#sellerloading").html("暂无数据");
                } else {
                    $("#sellerloading").hide();
                }
                $scope.list = response.data.list;
            });
        });
        //angular手动加载第2个ng-app
        angular.bootstrap(document.querySelector('[ng-app="sellerApp"]'), ['sellerApp']);