AngularJS 获取接口数据

来源：互联网发布：数据结构与算法第三版编辑：程序博客网时间：2024/05/21 09:17

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']);

阅读全文

0 0