AngularJS是一款优秀的JS框架,使用的人数比较多,于是我也加入到项目里。
显示前几条新闻
<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; }); });
第二个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',$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']);